gulpでwebpackを使って、Web開発で使用するモジュールを管理してみます。
インストール
まずはgulpとwebpackのインストールします。WebPackはコマンドを使うことがあればグローバルにインストールする必要があるけれども、今回はgulpを使うのでグローバルにはインストールしていません。
package.jsを作成してプロジェクトを追加、ついでにその他必要になるパッケージもインストールしておきます。
npm install gulp webpack-stream gulp-load-plugins --save
loaderを使えばJadeやBabel、CoffeeScriptの変換もできます。
gulpfile.js
このサイトの作成時に使用しているgulpfile.jsの一部です。
'use strict';
var gulp = require('gulp');
var objectAssign = require('object-assign');
var webpack = require('webpack-stream');
var $ = require('gulp-load-plugins')();
var watch = false;
gulp.task('build:js', function() {
var src = 'src/scripts/main.js';
var dist = 'tmp/scripts/';
var config = {
output: {
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.jade$/,
loader: 'jade'
}
]
},
};
if(watch) {
config = objectAssign(config, {
watch: true,
devtool: '#inline-source-map'
});
return gulp.src(src)
.pipe(webpack(config))
.pipe(gulp.dest(dist));
} else {
return gulp.src(src)
.pipe(webpack(config))
.pipe(gulp.dest(dist));
}
});
gulp.task('watch:js', function(cb) {
watch = true;
runSequence('build:js', cb);
});
webpackは機能自体は多くてちょっととっつきにくさはあるけれど、そのぶんgulpfile.jsはbrowserifyを使ったときよりもだいぶシンプルになります。監視用のタスクはとくにそうだとおもう。
browserifyとの使い分け
webpackで便利だと感じるのはbrowserifyやwatchifyなどのvinylを扱った大量のコードでの表現をwebpackでは簡単な記述で実現できるところが楽で好き。基本的に監視タスクが必要になる場合には何も考えずにwebpackを使っています。