1,264 views

この記事は最終更新から 2219日 が経過しています。

1. やりたいこと

JavaScriptファイルの更新を監視し、自動的に JavaScriptファイルを minifyしたい。

2. やってみる！

(50) Node.js + gulpでcssファイルを自動圧縮 とほとんど同じだ。
ファイル変化検出時に実行するプログラムが異なるだけだ。

ローカルな作業環境に移動し Node.jsのパッケージ管理を初期化する。

$ npm init

gulp, gulp-uglify をインストールする。

$ npm install -g gulp
$ npm install -D gulp
$ npm install -D gulp-uglify

gulpfile.js を書く。
ファイルの変化検出は gulp.watch( 監視対象, 検出後実行タスク ) で実現する。
ここでは dirIn に置かれた jsファイルを監視し、dirOut に変換後ファイルを出力するように書いた。
タスク名 minify-js, watch は何でもよい。
gulp.src()の引数には glob() のオプションを指定する。

var gulp = require('gulp');
var minifyJs = require('gulp-uglify');

gulp.task('minify-js', function() {
    gulp.src("dirIn/*.js")
        .pipe(minifyJs())
        .pipe(gulp.dest('dirOut'));
});
gulp.task('watch', function() {
    gulp.watch("dirIn/*.js",['minify-js']);
});

実行！

gulp watch

dirInに非圧縮の jsファイルを置くと、自動的に処理されて dirOutに出力されるようになった！

※おまけ
起動時に必ず１回タスクを実行したい場合は以下のように書く。

gulp.task('watch', ['minify-js'], function() {