WebDesign Dackel

gulp+webpack+bowerの構成でcoffee-script開発する

gulp+webpack+bowerの構成でcoffee-script開発する

Hatena0
Google+0
Pocket0
Feedly0

突然ですが、最近Gruntgulpなどのタスクランナー無しでの開発がもの凄く億劫になってきています。

JSminifySassのコンパイル、画像の圧縮やブラウザのライブリロードなど、サイトのクオリティを少しでも高めながら、効率的に開発を進めるためにやりたいこと、やらなければいけないことが沢山あります。
個々のタスクをわざわざ手作業で行うのは面倒、そこは機械に自動的にやってもらうべき場所で、人間が頭を使わなくてはいけないのはもっと別のところにあると思っています。

ただ、タスクランナーやその周辺のツールは便利な半面、それなりに学習コストがかかりますよね。僕はかなり物覚えが悪いので、ちょっと前にやったことをすぐ忘れます。
なので、今回タイトルにあるgulp+webpack+bowerな構成でcoffee-script開発を始めるためにやることを書いておきたいと思います。

前提

Node.jsgulpが使える状態という前提で以下を進めていきたいと思います。また、作業環境はMacです。それぞれインストールは下記が参考になりそうです。

Node.js

Gulp

目指す内容

下記を目標とします。

  • srcディレクトリ内の.coffeeファイルをdistディレクトリにコンパイル
  • bowerパッケージをrequire出来るように

今回使用したファイル

GitHubへあげているので、興味がある方はご確認下さい。

サンプルファイル

プロジェクトの作成

作業するディレクトリに移動して新規プロジェクトを作っていきます。
まずはnpmbowerの初期化を実行。

$ cd ~/path/to/myproject/
$ npm init #今回はEnter連打しました
$ bower init #同じく全てEnter

gulpfileHTMLなどを作成します。

$ mkdir src dist
$ touch gulpfile.coffee webpack.config.coffee index.html src/app.coffee

ここまでで下記の様なファイル構成になっています。

.
├── bower.json
├── dist
├── gulpfile.coffee
├── index.html
├── package.json
├── src
│   └── app.coffee
└── webpack.config.coffee

必要なパッケージをインストール

下記コマンドを実行してパッケージをインストールしていきます。(必要に応じてsudoを)

$ npm install --save-dev coffee-loader coffee-script gulp gulp-coffee gulp-load-plugins gulp-watch gulp-webpack bower-webpack-plugin

一部、必ず必要という訳ではないものが含まれますが、インストールしたパッケージは以下です。

  • gulp
  • coffee-loader
  • coffee-script
  • gulp-coffee
  • gulp-load-plugins
  • gulp-watch
  • gulp-webpack
  • bower-webpack-plugin

コンパイルのための設定を書いていく

Gulpのタスクを用意

先ほど作成したgulpfile.coffeeに下記の様なタスクを用意しておきます。

gulp = require "gulp"
$    = do require "gulp-load-plugins"

# src内のファイルを対象に、webpackを通してdistディレクトリにコンパイルします
gulp.task "webpack", ->
  gulp.src "./src/"
  .pipe $.webpack require "./webpack.config.coffee"
  .pipe gulp.dest "./dist/"

# ファイルの監視を設定
gulp.task "default", ->
  $.watch "./src/**/*.+(coffee|js)", ->
    gulp.start "webpack"

ここではwebpack.config.coffeeに設定を書いていくことを想定していますが、ファイルが増えるのがイヤダー!という場合は、webpackタスクの部分を下記の様にも書けます。

gulp.task "webpack", ->
  gulp.src "./src/app.coffee"
  .pipe $.webpack {
    # ここでWebpackの設定が出来ます
  }
  .pipe gulp.dest "./dist/"

webpackの設定

webpack.config.coffeeを編集していきます。

webpack            = require("gulp-webpack").webpack
BowerWebpackPlugin = require "bower-webpack-plugin"
path               = require "path"


module.exports = {

  # entryポイントを指定、複数指定できます
  entry:
    app: "./src/app.coffee"

  # 出力先の設定
  output:
    filename: "[name].js"

  # ファイル名の解決を設定
  resolve:
    root: [path.join(__dirname, "bower_components")]
    moduleDirectories: ["bower_components"]
    extensions: ["", ".js", ".coffee", ".webpack.js", ".web.js"]

  # .coffeeをcoffee-loaderに渡すように
  # 他にもhtmlやcssを読み込む必要がある場合はここへ追記
  module:
    loaders: [
      {test: /\.coffee$/, loader: "coffee-loader"}
    ]

  # webpack用の各プラグイン
  plugins: [
    # bower.jsonにあるパッケージをrequire出来るように
    new BowerWebpackPlugin()

    # ↓下記では`main`で指定されたファイルが配列の場合読み込めない!
    # new webpack.ResolverPlugin(
    #   new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin ".bower.json", ["main"]
    # )
  ]

}

これで、coffee-scriptのコンパイルと、bowerのパッケージをrequireするための準備が整いました。

webpackの設定について、下記のサイトがとても参考になりました!

ちょこっと寄り道

gulp-webpackを使ったサンプルなどで、gulp-webpackwebpackの両方をインストールしているのを見たことがあるのですが、バージョンが1.1.0以降の場合は下記のようにしてwebpackを参照することが出来るようになっています。

# 直で参照
webpack = require("gulp-webpack").webpack

# gulp-load-pluginsから
$       = do require "gulp-load-plugins"
webpack = $.webpack.webpack

gulp-webpack

bowerのパッケージをインストールしてrequireしてみる

早速パッケージをインストールしていきます。

とりあえずjQueryと、jp-prefectureという、前に作った都道府県を扱うライブラリをこっそり入れてみます。

$ bower install --save jquery jp-prefecture

CoffeeScript

$  = require "jquery"
jp = require "jp-prefecture"

これで下記のコマンドを実行するとdist/app.jsが出来上がるようになっています。

$ gulp webpack

ファイルの変更で自動的にコンパイルするには下記を実行。

$ gulp

簡単なサンプルを作成

ちょっとした動作確認をしていきたいと思います。ファイルを編集する前に、ファイルの変更を監視しておきます。

$ gulp

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>入力した県の英語表記を表示するサンプル</title>
  <style type="text/css">
  body {
    font-size:18px;
    font-family:sans-serif;
  }
  input {
    font-size:inherit;
  }
  </style>
</head>
<body>
  <h1>入力した県の英語表記を表示するサンプル</h1>

  <div>結果:<strong id="pref-result"></strong></div>
  <div>
    都道府県を入力!
    <input type="text" id="pref-input" placeholder="東京, 埼玉県, ヒョウゴ">
  </div>

  <script type="text/javascript" src="dist/app.js"></script>
</body>
</html>

src/app.coffee

$  = require "jquery"
jp = require "jp-prefecture"

$ ->
  # 各セレクタ
  $prefResult = $("#pref-result")
  $prefInput = $("#pref-input")

  # 入力値を英語表記へ変換して表示
  $prefInput.on "keyup", ->
    result =  jp.prefConvert $(@).val(), "en"
    result ?= "Not Found!"
    $prefResult.text result

実行してみたサンプルです。

動作サンプル

動作サンプル

なんの意味も無いサンプルですが、無事に動かせるところまで出来ました。

まとめ

webpackでは出来る事がたくさんあり、まだまだわからないことばかりです。。こうやった方が良いよ!という箇所などありましたらご教授頂けたらとおもいます。

更新履歴

2015.06.15

最初はDirectoryDescriptionFilePluginプラグインを使って、bower_components内のモジュールを読んでいましたが、そうすると、bower.jsonmain属性が配列担っている時に読めない場合があるので、bower-webpack-pluginを使って読み込むように変更しました。

下記サイトが参考になりました!

webpack + bower でライブラリを読み込めない! – とある地味なブログ