gulp を使用して、javascript のファイルを圧縮や結合するタスクを自動化します。
Contents
gulp
gulp は開発時に必要なタスクを自動化するためのツールです。
導入
npm でインストールします。
|
1 2 3 4 5 6 |
$ npm install gulp-cli -g $ npm install gulp -D $ npm install gulp-plumber -D $ npm install gulp-concat -D $ npm install gulp-sourcemaps -D $ npm install gulp-uglify -D |
設定
gulpfile.js を作成してタスクを設定します。
処理用タスクと watch 用タスク、デフォルト時のタスクも設定します。
- plumber：タスク実行時にエラーで停止して、watch が止まってしまうのを防ぎます。
- sourcemaps：デバッグ用にソースマップを出力するようにします。
- concat：ファイルを結合します。
- uglify：minify 化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var gulp = require('gulp'); var plumber = require('gulp-plumber') var concat = require('gulp-concat'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require("gulp-uglify") gulp.task('test', function(){ return gulp.src('src/*.js') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(concat('app.min.js')) .pipe(sourcemaps.write()) .pipe(uglify('test.min.js')) .pipe(gulp.dest('dest')) }); gulp.task('watch', function() { gulp.watch(['src/*.js'], ['test']); }); gulp.task('default', ['test']); |
実行
設定したタスクを実行
|
1 |
$ gulp test |
処理用として設定した test タスクを実行します。
watch タスクを実行
|
1 |
$ gulp watch |
対象ファイルを更新するたび gulp タスクが実行されます。
まとめ
今回は gulp プラグインのみで設定してみました。
単純なタスクであれば簡単に設定から動作まで出来ますので、負担も無く開発効率をあげられそうです。
参考
公式：gulp.js