gulpでJavaScriptの結合圧縮処理

gulpでJavaScriptの圧縮処理を設定してみました。ご想像の通りuglifyJSですが@readymadegogoに教えてもらったuseminというプラグインも合わせて利用します。

gulpの使い方は「タスクランナーgulp入門」を参照してください。

まずは圧縮用のgulp-uglifygulp-useminをインストール。

sudo npm install gulp-uglify gulp-usemin --save-dev

今回の設定の肝はgulp-usemin。これを利用するとHTML上に直接圧縮処理の設定を記述できます。

たとえばHTMLを以下のように設定した場合、useminを実行したらscript1.jsとscript2.jsを圧縮結合したscript.min.jsというファイルを生成しHTML上のscriptの呼び出しをscript.min.jsに変更します。

<!-- build:js script/script.min.js-->
<script src="script/script1.js"></script>
<script src="script/script2.js"></script>
<!-- endbuild-->

<script src="script/script.min.js"></script>

その為、開発時は記述しているファイル(script1.js、script2.js)で読み込みが行い、本番にリリースなどのタイミングで圧縮処理を行うことができます。

gulpfile.jsは以下のように設定しすると「gulp usemin」のコマンドでuseminを実行できます。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');
  
gulp.task('usemin', function() {
     gulp.src('htdocs/**/*.html')
        .pipe(usemin({
            js:[uglify()]
        }))
        .pipe(gulp.dest('htdocs/'));
});

注意点は上記の設定ではhtdocs内のhtmlファイルの内容が書き換えられてしまうこと。これはわたしが今回作っている環境がjadeの利用を想定しており、htmlファイルが書き換えられてもJadeを実行すれば元のHTMLに戻るからです。

通常は以下のように開発用のディレクトリ(develop)と本番用のディレクトリ(release)などにわけて作業したほうがよいでしょう。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');
  
gulp.task('usemin', function() {
     gulp.src('develop/**/*.html')
        .pipe(usemin({
            js:[uglify()]
        }))
        .pipe(gulp.dest('release/'));
});

関連エントリー

Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」
gulpとnode.jsの連携
CSSスプライトを生成する「grunt-spritesmith」
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」

スポンサードリンク

«Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」 | メイン | スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」»