gulp の Windows での使い方入門（保存時に jsmin が働くように）

Web制作してみたいなー、と思いました。

せっかくやるんなら、
AngularJS とか Sass（もしくは Scss ）とか
TypeScript 使っちゃって、先進的な感じで Web制作したい。

でも、Sass とか TypeScript のコンパイルめんどくさくない？
って思いました。
まあ、ATOM にしろ Brackets にしろ、保存時にコンパイルしたものを吐き出すプラグインとかあると思うんですけど、
せっかく最近 Jenkins のやり方を少し学んだし、そういうのも自動化したいなー、と思いました。

grunt 使おうかと最初は思ったのですが、gulp というものが最近はあるらしいし、
「grunt の設定ファイルは複雑だなあ」とパッと見で思ったので、gulp を使ってみることにしました。

あえての Windows で環境構築していきます。
（・・・といっても、Mac での環境構築とほとんど一緒ですけどねｗ）

1. Node.js を入れる

gulp は npm という、Node.js 付属のパッケージ管理ツールを使って入れます。
Node.js の公式ページからインストーラーをダウンロードするか、
前回の記事で解説した chocolatey を使って、ちゃっちゃと入れちゃいましょう。 choco install -y nodejs

2. 作業フォルダーの用意

今回練習してみるためのフォルダーを用意してください。

終わったら、Windows PowerShell を『管理者として実行』で起動してください。
以下の写真のように、ウィンドウメニューの「ファイル」からおこなうと、
そのディレクトリをスタート地点として PowerShell が始まってくれるので楽です。

f:id:nekonenene:20160202013014p:plain

なお、今回、作業フォルダーは最終的にはこうなります。ご参考に。
f:id:nekonenene:20160202023118j:plain

3. npm init

まず

npm init

とコマンドを打ってください。

いろいろと聞かれますが、たいていはそのまま Enter キーを押して大丈夫です。
ただし、name は大文字のアルファベットが使えないので注意しましょう。

以下のようになりました。
f:id:nekonenene:20160202014228p:plain

そうすると、今いるフォルダーに package.json というファイルが作られました。

このファイルの中身は今回の場合ですとこうなっています。

{
  "name": "hello_gulp",
  "version": "1.0.0",
  "description": "just a test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "HelloWorld",
    "gulp",
    "blog"
  ],
  "author": "nekonenene",
  "license": "ISC"
}

このファイルの役割を説明する前に、次に進みます。

4. gulp コマンドが働くように

npm install -g gulp

これで
C:\Users\UserName\AppData\Roaming\npm\node_modules
の配下に gulp フォルダが作られると思います。

-g は「グローバル」を示すオプションです、これを付け忘れないようにしてください。
付け忘れると、今いるフォルダに node_modules フォルダと gulp フォルダが作られるだけです。
これだと、gulp と打ってもコマンドは実行されませんので注意です。-g は絶対！

5. 作業フォルダに gulp を導入

さて、続いては

npm install gulp --save-dev

のコマンドを実行してください。
--save-dev を付け忘れないよう、注意です。

現在のフォルダに、node_modules フォルダが作られます。

そして、ここで 3. で紹介した package.json を改めて見てみてください。

  "devDependencies": {
    "gulp": "^3.9.0"
  }

の３行が加わっていることが確認できると思います。
（なお、--save-dev オプションを付け忘れていた場合はこれが加わりません。もう一度上のコマンドを実行してください）

ここで、先ほど省いた package.json の説明をおこないます。

このように、JSON ファイルに、
このプロジェクトを動かすためや開発するために必要なツールが入力されていくことにより、
node_modules フォルダーを（たとえば git で）共有しなくとも、
package.config さえあれば、npm install のコマンドだけで、必要なツール群を再現することができるのです！

「え、node_modules フォルダーを git 管理すればいいじゃん」と思う人もいるかもしれませんが、
gulp を入れただけですでに 2MB です。
開発規模が大きくなるとツールはどんどん多くなり、容量がどんどん大きくなるでしょうから、
無駄なものは git 管理に入れないのが、賢い方法かと思います。

（あと他の利点があるのかもですが、すみません、存じません……）

実際に新しいフォルダーを作り package.config のみをコピーして置き、npm install をおこなってみました。

f:id:nekonenene:20160206192437p:plain
しっかりと、npm install で node_modules フォルダーが再現されました。

6. とりあえず gulp を動かしてみる

まだ、gulp コマンドをおこなっても、『No gulpfile found』とエラーメッセージが現れるだけで、なにも行われません。
公式の説明を読むと、どうやら
gulpfile.js というものが必要な様子。

その名前のファイルを作業フォルダに作り、中身は以下のようにしてみます。

var gulp = require("gulp");

/* gulp とコマンドを打つと実行される */
gulp.task("default", function() {
    console.log("Starting gulp...!!");
});

保存したら、gulp コマンドを実行してください。

f:id:nekonenene:20160202023319j:plain

しっかり、console.log("Starting gulp...!!"); の部分が実行されているのが確認できますね。

7. jsmin をしてみるための準備

jsmin という、JavaScript のコードから、無くても動く部分を取り除きファイルサイズを縮小するツールがあるのですが、
今回はそれを、自動化してみようと思います。

まず、以下のコマンドで gulp の jsmin としてメジャーな、gulp-uglify を、作業フォルダにインストールします。
（公式紹介ページ : gulp-uglify - npm ）

npm install gulp-uglify --save-dev

それから、圧縮したい JavaScript ファイルを用意しておきましょう。

作業フォルダーに「original」というフォルダを作り、その中に以下の practice.js を置いてみます。
それから、作業フォルダーにもう１つ「minified」というフォルダも作り、
圧縮されたファイルはこちらに置くということで今回は設定してみましょう。

続いて、公式紹介ページにある通りに、gulpfile.js に文章を追加します。
出力元と出力先を、目的の通りに修正すると、gulpfile.js は以下のようになります。

var gulp = require("gulp");

/* gulp とコマンドを打つと実行される */
gulp.task("default", function() {
    console.log("Starting gulp...!!");
});


var uglify = require("gulp-uglify");

/* gulp compress とコマンドを打つと実行される */
gulp.task("compress", function() {
  return gulp.src("./original/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("./minified/"));
});

8. 保存時に自動実行されるようにする

gulp compress と打てば jsmin が働くようにはなりましたが、
いちいちコマンドを打つのでは gulp の意味がありません。

というわけで、最後にこれを、ファイル保存時に自動でおこなう方法です。

それは、default のメソッド内に以下の一行を加えるだけです。

gulp.watch(["./original/*.js"], ["compress"]);

gulp.watch( [ 監視対象となるファイルの配列 ] , [ そのファイルにおこなう処理の一覧である配列 ] );
という構造になっています。
今回は配列の要素数は１つしかありませんが、複数指定することで、
監視対象ファイルのさらに細かい指定や、並列処理の指定などが可能になります。

なお、jsmin の結果、minified フォルダーには以下のような practice.js が出力されました。
（本当は１行なのですが、あまりに長くて見づらいので改行を挟みました）

window.addEventListener("load",function(){function n(n){function e()
{n.innerHTML+=i+" : "+o+" "+t+" "+r+"<br>",console.log(i),++i}var o="Windows",t="X",r="professional",i=1;
n.innerHTML="",e()}var e=document.getElementsByTagName("h1");
e[0].style.color="red";var o=document.getElementById("practiceString");n(o)},!1);