こんにちわ、コードネームWP-Eイクラ こと @se_inoです。こぼしイクラとか、お米を覆うほどたっぷりのイクラ丼は邪道です。塩漬けの魚卵と白米との程よいマリアージュこそが正義なのです。よく覚えておいてくださいね。

さて、本日はフロントエンドエンジニア・マークアッパ向けに、Gruntの導入手引について書きたいと思います。

あなたがGruntに手を出さない理由

もしあなたがまだGruntを使っていない場合、今のやりかたで別に困ってないからではないでしょうか？

確かに、困ってはいないのかもしれません。
だがしかし、本当にその方法はベストなのかということを一度考えてみましょう。

なお、この記事はQiitaに投稿されている Grunt – Getting Started の記事を参考にさせていただいています。

作業効率化してますか？

言い換えれば、無駄な手作業をしていませんか？例えば、

• JSとかCSSのファイルを1つにするのは手作業で頑張っちゃう
• そして超巨大になったJSとCSSに追加していく
• 各ファイルのミニファイを手作業でやってる
• ブラウザのリロードを手動でやってる

ほかにも

• JSの文法エラーは動かしてみてチェックしてる
• ローカルサーバーつかってない

とか、どれか一つでも当てはまってませんか？
（もちろん作業環境の事情がある場合もあるでしょうが、そこについては加味しません）

当てはまっていたのなら、その作業を行うのに、何秒あるいは何分かかっていますか？
その作業は何回行っていますか？所要時間×行う回数が、あなたがロスしている時間です。

どうでしょうか？計算してみたら結構なロスになりませんか？
ではそのロスをなくすためにどうするかということで、Gruntを導入するのです。

Gruntってあれでしょ？黒い画面でしょ？

ダイジョブ　クロイガメンコワクナーイ。
その出だし聞き飽きたわ！！ってお嘆きの諸氏へ。

黒い画面をなるべく触らないで導入したい

今回は「Gruntが便利だってことは分かってるんだけど、どうやってつかえばいいのかやっぱりよくわからない」という方にむけて、サンプルファイルを用意しました。
とりあえず動かせるようになって、まずはGruntの便利さに触れて貰えればと思います。

ただし、手順中にどうしても黒い画面が必要になる箇所がありますが、そう多くはないので頑張ってください。

使うための準備

1. Node.jsのインストール
2. Gruntのインストール
3. サンプルファイルのダウンロード
4. Gruntを動かしてみる

※１：Windowsの場合、Administratorユーザを利用している前提とします。
※２：サンプルファイルにはnode_modulesもすべて内包させているので重たいです。ご留意ください。

Node.jsのインストール

Node.jsのサイトから、インストーラをダウンロードして、Node.jsをインストールしてください。

Node.jsがインストールできたか確認

黒い画面を立ち上げてください。Windowsならコマンドプロンプト Macならターミナルになります。
（iTermなどの他の端末ソフトを利用してももちろん構いません）

以下のコマンドを入力して、バージョン情報が表示されるか確認してみてください。

npm -v

バージョンを表す数字が表示されればOKです。

Gruntのインストール

黒い画面で以下のコマンドを入力してください。

Macの場合

sudo npm instal -g grunt-cli

コマンド実行後にパスワードが求められます。
パスワードを入力して再度実行してください。（パスワードの入力のとき、文字を入力しても表示は変化しませんが、きちんと入力されています。）

Windowsの場合

npm intall -g grunt-cli

正常に実行されるとこのような感じになります。

ここでERRとかWORNがいっぱい出てきてしまった場合は、sudoを付けて実行したか確認してください。

サンプルファイルのダウンロード

Githubにサンプルになるプロジェクトを置いてあります。
ここからお手元にダウンロードして展開ください。

gruntを動かしてみる

黒い画面で、ダウンロードしたフォルダに移動します。以下のコマンドを実行してください。

cd 【ダウンロードしたフォルダのパス】

ダウンロードしたフォルダのパスを手入力するのが面倒なときは、黒い画面にフォルダをドロップすると、パスが自動入力されます。

ちゃんと移動出来たか確認するためには、以下のコマンドを実行してください

Macの場合

ls

Windowsの場合

dir

以下のような表示になればOKです。

確認できたら、以下のコマンドを実行してください。

grunt

問題なく動作したら、以下の様な表示となります。

このサンプルでできる事

このサンプルプロジェクトでできる事は以下のとおりです。

• ローカルサーバーでの開発
• HTMLの自動ミニファイ
• CSS・JSの自動ミニファイ/結合
• jshintによる構文チェック
• LiveReload（ファイル更新でブラウザを自動リロード）※GoogleChrome限定、専用拡張が必要です

前提

このサンプルではHTML,CSS,JSの開発はsrcというフォルダ以下にて行い、最適化したファイルがプロジェクト直下に出力されるようになっています。
構造は必要に応じて変更を行ってください。

ローカルサーバーでの開発

Grunt起動時にローカルサーバーが立ち上がります。

http://localhost:8000　にアクセスすると、以下の様な画面となるはずです。

なお、8000番ポートが競合している場合は起動に失敗するのでご注意ください。
この設定はGruntfile.coffeeの66行目の部分です。

    connect:
      site:
        options:
          hostname: "*",
          port: 8000

HTMLの自動ミニファイ

Gruntが起動している状態で、srcフォルダ以下にある、index.htmlを編集してみてください。
保存を行うと、プロジェクトの直下に最小化されたindex.htmlが出力されます。（ファイルを消しても作成されます）

ミニファイする対象の指定

Gruntfile.coffeeの19行目の部分です。これは、「task」の定義です。

    htmlmin:
      dist:
        options:
          removeComments: true
          collapseWhitespace: true
        files:
          "<%= dest_dir %>index.html" : "<%= src_dir %>index.html"
          "<%= dest_dir %>child/sample.html" : "<%= src_dir %>child/sample.html"

オプション等の内容については、今回の説明では割愛します。
ミニファイする対象のhtmlファイルと、その出力先をfilesに定義します。
このtaskを、いつ実行するのかを指定しているのがGruntfile.coffeeの54行目です。

      html_files:
        files: "<%= src_dir %>**/*.html"
        tasks: "htmlmin"

srcフォルダ以下にある.htmlの拡張子のファイルが変更されたら、htmlminのタスクを実行するという指定です。

CSS、JSの自動ミニファイ・結合

JS,CSSの各ファイルを結合してミニファイします。

結合

srcフォルダ以下のjsフォルダ以下にある拡張子が.jsのファイル、cssフォルダ以下にある拡張子が.cssのファイルをそれぞれ結合して出力します。
また、結合の順序をファイル名のプレフィクスにつけている数字で指定しています。

Gruntfile.coffeeの7行目にタスクの指定があります。

    concat:
      js_files:
        src: [
          "<%= src_dir %>js/*.js"
        ]
        dest: "<%= dest_dir %>js/<%= pkg_name %>.js"
      css_files:
        src: [
          "<%= src_dir %>css/*.css"
        ]
        dest: "<%= dest_dir %>css/<%= pkg_name %>.css"

タスクの実行指定は47行目にあります。

      concat:
        files: [
          "<%= concat.js_files.src %>",
          "<%= concat.css_files.src %>"
        ]
        tasks: "concat"

CSSミニファイ

前述の結合が行われたCSSファイルをミニファイします。
タスクの指定は38行目にあります。このタスクの指定内容から、出力されたものを対象にしてミニファイしているということが読み取れると思います。

    cssmin:
      dist:
        src: "<%= dest_dir %>css/<%= pkg_name %>.css"
        dest: "<%= dest_dir %>css/<%= pkg_name %>.min.css"

HTMLは、幾つものCSSを使用しなくてもこのミニファイされたCSSを使用すればOKということですね。

JS圧縮

JSを圧縮します。タスクの指定についてはCSSと内容は一緒です。31行目にタスク指定があります。
オプションで日付をつけたコメントを出力しています。

    uglify:
      options:
        banner: "/* <%= pkg_name %> <%= grunt.template.today('yyyy-mm-dd') %> */\n"
      build:
        src: "<%= dest_dir %>js/<%= pkg_name %>.js"
        dest: "<%= dest_dir %>js/<%= pkg_name %>.min.js"

HTMLから呼ぶJSも、これで圧縮されたファイル1つを呼び出せば済むようになりますね。

jshintによる構文チェック

jshintで構文のチェックを行うことができます。
単純な構文ミスや、よろしくない書き方をこういったツールで未然に防ぎましょう。

28行目にタスク指定があります。指定はサンプル用なので、チェック対象のスクリプトをフォルダ分けするか、名前規則をつけるかなどでうまく指定してください。

    jshint:
      beforeconcat: "<%= src_dir %>js/**/*_userscript.js"

この書き方で【任意の文字列】_userscript.jsという名前のファイルをチェック対象とすることができます。
また、タスクの実行の指定について、Gruntfile.coffeeの62行目に注目してください。

      js_files:
        files: "<%= src_dir %>js/**/*.js"
        tasks: ["jshint","uglify"]

tasksの部分に、複数のタスク名が指定されていることがわかります。
このように書くと指定したファイルが保存されたときに、複数のタスクを実行させることができます。
この場合、src/jsフォルダ以下にある.jsファイルが保存されたときに、jshintとuglify(JSの圧縮)の2タスクを実行するということです。

LiveReload

これがあるかないかでストレスが相当違います。
GoogleChromeの拡張です。ファイルが保存されたときに自動でリロードしてくれます。
ここからインストールしてください。
Chromeに追加したら、アイコンをクリックして起動状態にするだけでOKです。

各ファイルを保存したらすぐにリロードされ、変更結果を確認できます。これ、めちゃくちゃ便利です。

Gruntfile.coffeeの雰囲気を把握する

Gruntfile.coffeeの43行目にあるwatchという部分ですが、これもタスクです。
このタスクで監視する対象を今まで見てきた44〜64行目に定義しているのです。
このタスクはGruntの起動時に実行され、その指定が87行目に定義してある

  grunt.registerTask "default", ["connect","watch"]

この部分になります。一番最初に出ていた、ローカルサーバーの起動もこの部分のconnectというタスクです。

どうでしょうか、Gruntfileで指定してあるもののつながりがなんとなく見えてきましたでしょうか？
覚えなくても使うことはできますが、雰囲気がわかるだけでも重要です。
そうすることによって、自分の都合のいいようにGruntfileを編集していくことができるようになるからです。

おわりに

Gruntすごく便利なのですが、実際の仕事現場であまり使ってる人を見かけないため書いてみました。

どうでしょうか。お手元でGruntを動作させることはできましたでしょうか？
自分自身も、Gruntを使いこなせてるとはまだ言いづらい部分があるため、「これを入れた方がいい」とか「もっとこうした方がいい」というご意見があれば頂けると嬉しいです。

それでは。「清野」がMacに「kiyono」と自動認識されてしまったのを未だに修正しないままの恥ずかしいターミナルを晒したところでお暇したいと思います。