gulpでJavaScriptの結合圧縮処理
gulpでJavaScriptの圧縮処理を設定してみました。ご想像の通りuglifyJSですが@readymadegogoに教えてもらったuseminというプラグインも合わせて利用します。
gulpの使い方は「タスクランナーgulp入門」を参照してください。
まずは圧縮用のgulp-uglifyとgulp-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 」»