JSの開発作業自動化ツールのgulpを軽く触ってみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

前回のエントリーでGruntを紹介しましたが、最近は、gulpというツールのほうが使われているようです。

実は、Gruntを触ってみた時に、Gruntfile.jsの階層が深く、記述が冗長で分かりにくいように感じました(後出しでなんですが)。今回、gulpを調べてみると、その箇所が少し分かりやすくなったように思えます。というわけで、前回Gruntで試したことをgulpでもやってみることにしました。

今回、参考にしたサイトは下記サイト。
gulp.jsで始めるWeb開発爆速自動化入門:便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) – @IT

まずは、node.jsをインストールしてない場合は、インストール。

続いて、npmからグローバル環境とプロジェクトのディレクトリにgulpのインストール。それと、gulpのUglifyJSプラグインもインストール。

つづいて、下記のようなgulpfile.jsの作成

後はgulpコマンドでuglifyを呼んだらできるはず。

これで、前回Gruntでやったように、sample01.jsとsample02.jsをミニファイして結合したoutput.min.jsができるはず・・・。

予想に反して、『output.min.js』という名前のフォルダができました。中を見てみると、その中にミニファイされたsample01.jsとsample02.jsがありました。

とりあず、『ビルドツール「gulp」を触ってみた – E-riverstyle Vanguard』を参考に、gulp-concatをインストールしてgulpfile.jsを下記のように変更。

その後、『gulp concat』と実行すれば、無事、output.min.jsが出力されました。中身は下記のようになっていました。

改行がついていますが、結合はできたようです。

分からないなりにやってみましたが、やっぱりまだよく分からないところも多いので、もう少し調べてみようと思います。

追記:
concatとuglifyの順番を逆にすると改行なしで出力できました。