今回は、「gulp」でJSファイルを圧縮する方法を試したいと思います。


node.js_016_02


作業フォルダでnpmでgulp-uglifyをローカルインストールします。


npm install --save-dev gulp-uglify


node.js_020_01


作業フォルダでnpmでgulp-renameをローカルインストールします。


npm install --save-dev gulp-rename


node.js_020_03


gulpfile.js


var gulp = require('gulp');
var jsmin = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('js', function() {
gulp.src('./sample/script.js')
.pipe(jsmin())
.pipe(rename('./sample/script.min.js'))
.pipe(gulp.dest('./'));
console.log('JSを圧縮しました。');
});

gulp.task('default', ['js'])


作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。


gulp


node.js_020_04


処理が完了すると、「script.js」を圧縮した「script.min.js」が作成されます。

node.js_020_05


script.js


var sample;

sample="サンプル!!";

alert(sample)


script.min.js


var sample;sample="サンプル!!",alert(sample)




圧縮とリネームのモジュール読込み:


var jsmin = require('gulp-uglify');
var rename = require('gulp-rename')


指定したJSファイルを圧縮してファイル名を変更:


gulp.src('./sample/script.js')
.pipe(jsmin())
.pipe(rename('./sample/script.min.js'))
.pipe(gulp.dest('./'))


gulp-uglifyモジュールを利用することによりJSファイルの圧縮を手軽に実行することができます。







Q&A