前回のエントリーでGruntを紹介しましたが、最近は、gulpというツールのほうが使われているようです。
実は、Gruntを触ってみた時に、Gruntfile.jsの階層が深く、記述が冗長で分かりにくいように感じました(後出しでなんですが)。今回、gulpを調べてみると、その箇所が少し分かりやすくなったように思えます。というわけで、前回Gruntで試したことをgulpでもやってみることにしました。
今回、参考にしたサイトは下記サイト。
gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) – ＠IT
まずは、node.jsをインストールしてない場合は、インストール。
続いて、npmからグローバル環境とプロジェクトのディレクトリにgulpのインストール。それと、gulpのUglifyJSプラグインもインストール。
C:\Users\FMVF56DDRZ\Dropbox\gulp>npm install -g gulp gulp@3.8.8 node_modules\gulp ├── interpret@0.3.7 ├── pretty-hrtime@0.2.2 ├── deprecated@0.0.1 ├── archy@0.0.2 ├── minimist@1.1.0 ├── semver@3.0.1 ├── tildify@1.0.0 (user-home@1.1.0) ├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.2, supports-color@0.2.0, strip-ansi@ 0.3.0, has-ansi@0.1.0) ├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5) ├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, through2@0.6.3, vinyl@0.4.3, lodash@2.4.1, multipipe@0.1.1, lodash.template@2.4.1) ├── liftoff@0.12.1 (extend@1.3.0, minimist@0.2.0, resolve@0.7.4, findup-sync@0.1.3) └── vinyl-fs@0.3.9 (graceful-fs@3.0.4, strip-bom@1.0.0, mkdirp@0.5.0, duplexer2@0.0.2, through2@0 .6.3, lodash@2.4.1, vinyl@0.4.3, glob-stream@3.1.15, glob-watcher@0.0.6) C:\Users\FMVF56DDRZ\Dropbox\gulp>npm install gulp gulp@3.8.8 node_modules\gulp ├── pretty-hrtime@0.2.2 ├── deprecated@0.0.1 ├── interpret@0.3.7 ├── archy@0.0.2 ├── tildify@1.0.0 (user-home@1.1.0) ├── minimist@1.1.0 ├── semver@3.0.1 ├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0. 1.0, strip-ansi@0.3.0) ├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5) ├── vinyl-fs@0.3.9 (graceful-fs@3.0.4, strip-bom@1.0.0, mkdirp@0.5.0, through2@0.6.3, duplexer2@0 .0.2, vinyl@0.4.3, glob-watcher@0.0.6, lodash@2.4.1, glob-stream@3.1.15) ├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, lodash.template@2.4.1, throug h2@0.6.3, multipipe@0.1.1, vinyl@0.4.3, lodash@2.4.1) └── liftoff@0.12.1 (extend@1.3.0, minimist@0.2.0, resolve@0.7.4, findup-sync@0.1.3) C:\Users\FMVF56DDRZ\Dropbox\gulp>npm install gulp-uglify gulp-uglify@1.0.1 node_modules\gulp-uglify ├── deepmerge@0.2.7 ├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33-1) ├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, minimist@1.1.0, chalk@0.5.1, lodash.template@2.4.1, vinyl@0.4.3, multipipe@0.1.1, lodash@2.4.1) ├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.40) └── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7 )
つづいて、下記のようなgulpfile.jsの作成
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task("uglify", function() {
return gulp.src(['sample01.js','sample02.js'])
.pipe(uglify())
.pipe(gulp.dest("output.min.js"));
});
gulp.task('default', function() {
gulp.run('uglify');
});
後はgulpコマンドでuglifyを呼んだらできるはず。
C:\Users\FMVF56DDRZ\Dropbox\gulp>gulp uglify [23:12:01] Using gulpfile ~\Dropbox\gulp\gulpfile.js [23:12:01] Starting 'uglify'... [23:12:01] Finished 'uglify' after 61 ms
これで、前回Gruntでやったように、sample01.jsとsample02.jsをミニファイして結合したoutput.min.jsができるはず・・・。
C:\Users\FMVF56DDRZ\Dropbox\gulp>dir
ドライブ C のボリューム ラベルがありません。
ボリューム シリアル番号は 4270-BB9E です
C:\Users\FMVF56DDRZ\Dropbox\gulp のディレクトリ
2014/10/18 23:15 <DIR> .
2014/10/18 23:15 <DIR> ..
2014/10/18 20:51 296 gulpfile.js
2014/10/18 23:11 <DIR> node_modules
2014/10/18 23:12 <DIR> output.min.js
2014/10/13 20:20 72 sample01.js
2014/10/13 20:21 75 sample02.js
3 個のファイル 443 バイト
4 個のディレクトリ 730,098,659,328 バイトの空き領域
予想に反して、『output.min.js』という名前のフォルダができました。中を見てみると、その中にミニファイされたsample01.jsとsample02.jsがありました。
とりあず、『ビルドツール「gulp」を触ってみた – E-riverstyle Vanguard』を参考に、gulp-concatをインストールしてgulpfile.jsを下記のように変更。
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task("concat", function() {
return gulp.src(['sample01.js','sample02.js'])
.pipe(uglify())
.pipe(concat('output.min.js'))
.pipe(gulp.dest('./'));
});
gulp.task('default', function() {
gulp.run('concat');
});
その後、『gulp concat』と実行すれば、無事、output.min.jsが出力されました。中身は下記のようになっていました。
function viewYourDomain(o){console.log("あなたのサイトドメインは、"+o+"です")}
!function(){viewYourName("am-yu.net")}();
改行がついていますが、結合はできたようです。
分からないなりにやってみましたが、やっぱりまだよく分からないところも多いので、もう少し調べてみようと思います。
追記：
concatとuglifyの順番を逆にすると改行なしで出力できました。
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task("concat", function() {
return gulp.src(['sample01.js','sample02.js'])
.pipe(concat('output.min.js'))
.pipe(uglify())
.pipe(gulp.dest(''));
});
gulp.task('default', function() {
gulp.run('concat');
});
コメント