dayjournal memo

Total 975 articles!!

gulp

gulp #005 – gulpでJSファイルを圧縮

Yasunori Kirimoto's avatar
Yasunori Kirimoto 2016/3/14

今回は、「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ファイルの圧縮を手軽に実行することができます。



book

Q&A