jsファイルをGulpで自動圧縮(minify)

Gulpのインストールは「SassをGulpで自動コンパイルする」に記載したので省略します。

jsファイルを自動圧縮する手順

Gulpプラグインをインストール

使いたいプラグインをインストールします。
今回は以下のプラグインを使用します。

javascriptの圧縮

npm install gulp-uglify --save-dev

ファイル名変更

npm install gulp-rename --save-dev

エラーハンドリング

npm install gulp-plumber --save-dev

gulpfile.jsの作成

gulpfile.jsを作成し、以下を記述します。
すでにgulpfile.jsがある場合は、必要な部分だけ追記します。

var path = require('path');
var fs = require('fs');
var pkg = JSON.parse(fs.readFileSync('./package.json'));
var assetsPath = path.resolve(pkg.path.assetsDir);

var gulp = require('gulp');

// javascript minify
var uglify = require('gulp-uglify');
 
// file rename
var rename = require('gulp-rename');

// error handling
var plumber = require('gulp-plumber');

gulp.task('js', function() {
    gulp.src([path.join(assetsPath, 'js/**/*.js'),path.join('!', assetsPath, 'js/**/*.min.js')])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest(path.join(assetsPath, 'js/')));
});

gulp.task('default', function() {
    gulp.watch([path.join(assetsPath, 'js/**/*.js'),path.join('!', assetsPath, 'js/**/*.min.js')],['js']);
});

package.jsonにパスを追記

gulpfile.jsを他のプロジェクトでも使い回したいので、パスはpackage.jsonに記述するようにします。

"path": {
    "assetsDir": "./assets/"
},

実行

以下のコマンドを実行します。

gulp

すると、監視状態になり、jsディレクトリ内のjsファイルが変更・保存される度に自動で圧縮され、min.jsファイルができるようになります。