最近Javascriptメインになりつつあるフロントエンジニアのピーターです。 今回は社内でも標準化されてきたGruntについてまとめたいと思います。

目次

Gruntとは

Javascriptで記述するタスクランナーのことです。 たとえば、大きめのWebサイトを作ってるとします。

CSSはSASSで記述してるのでコンパイルが必要です。修正毎にコンパイルするの結構手間ですが、エディターを使えばなんとかなります。 スタイルガイドも作ってほしいと言われたので、これも修正毎に出力しないといけません。 他にもCSSだけでなくPNG圧縮もしないと、、 となると本来のコーディング作業時間がどんどん削られてしまいます。

こういった 「SASSのコンパイル」「スタイルガイドの出力」「PNG圧縮」といったタスクを自動で行ってくれる のがタスクランナーなのです。

Gruntはそのタスクランナーのなかでいま最も普及していると言われているものです。

Gruntを使用するための環境構築

とはいえ、Gruntを動かす環境の構築は必要となってしまいますが、一度構築すれば今後も使えますし、グループ開発で新しいメンバーが参加してもGruntの設定を共有することですぐに開発にとりかかれるのでしばしおつき合いください。

また弊社はWindowsが主流なのでWindowsをベースに話を進めますのでご了承ください。

実行環境

  • windows7

Git

TortoiseGitなどがインストールされている場合はいれなくても大丈夫です

今回はGit公式のインストーラーをインストールします
Gitダウンロード(アクセスすると、ファイルが自動でダウンロードされます)

Python

Pythonは後述するnvmwの実行に必須です。2.7以上をインストールします。

Pythonダウンロード

nvmw

Node.jsのバージョン管理ツールのnvmのwindows版です

インストール方法

コマンドプロンプトを立ち上げて以下を実行します。 まずgithubからプロジェクトをクローンします。

そのあと環境変数にnvmwのディレクトリパスを追加します

最後に以下のコマンドでインストールされているかを確認します

ヘルプが表示されればインストール完了です。

Node.js

nvmwはNode.jsのバージョン管理ツールなのでこれをインストールしただけではまだNode.jsは使えません。

ここでは社内でよく使ってるv0.10.8をインストールしています。

今後インストールされるNPMはv0.10.8と紐づくのでバージョンを変更するときは注意しましょう。

Gruntのインストール手順

Grunt公式ページ

必要なファイル

ここからようやくGruntの出番です。 Gruntに必要なファイルは4種類あります。

grunt-cli

grunt-cliは Grunt command line interface のことで、 コンピュータのどこからでもgruntコマンドを呼び出せるようにします。

grunt

gruntの本体です。

package.json

プロジェクトの設定ファイルでどんなプロジェクト名かとかプロジェクトの説明などを記述します。

Gruntfile.js

どのタスクをどんな設定で実行するのかを記述する設定ファイルです。

新規プロジェクトをつくる

フォルダの構成

基本的にフォルダ直下にはhtmlなどのファイルは置かない方がいいと思います。srcにsassファイルなどをいれておいて、gruntでdstのcssフォルダに出力するみたいな構造にしておくといい気がします。

参考例

1)grunt-cliのインストール

まずはGrunt本体のインストールです

-g はグローバルオプションで今後はどこからでも呼び出せるようになります。

2)package.json生成

package.jsonの方をコマンドで生成します。

このコマンドをうつとプロンプト上で対話的に設定が行えます。

ひとまずpackage.jsonはこのままにしておきます。

3)gruntのインストール

npm install grunt –save-dev

–save-devはインストール時にpackage.jsonのdevDependencyに追加されるオプションです。 さらに同じ階層にnode_modulesというフォルダが作られ、そこにgruntが収められていることがわかります。

またタスクに必要なNodeモジュールも上記のような方法でダウンロードします。

4)Gruntfile.js

これはgrunt-initなどを使えばGruntfile.jsを簡単に作れるのですが、今回はエディターを使って実装してみます。 grunt-initなどが気になった方は調べてみるときっと幸せになれます。

Gruntfile.jsの書き方としてまず以下のような代入式を用意します。

次にその中に

カスタムタスクサンプル

では実際にマークアップで役立ちそうなGruntfileをつくってみました。このGruntfileには以下のタスクが設定されています。

  • grunt-compass-multiple
    • scssが増えてくると重くなるcompassを並列実行してくれるタスク
  • grunt-autoprefixer
    • ベンダープレフィックスを自動でつけてくれるタスク
  • grunt-pngmin
    • PNG画像を高圧縮・高速実行してくれるタスク
  • grunt-contrib-watch
    • ファイル変更を監視し、変更が行われたらタスクを実行したりできます
  • grunt-contrib-connect
    • Xamppなどを使わずにローカルで確認ができるタスク

また実際には上記5つのタスクを実行するためには事前に下記のコマンドを打ち込んでパッケージをインストールしておく必要があります。

また上記のGruntfileを使ったサンプルプロジェクトをGithubにあげましたので、適当なディレクトリに移動してから

するとgithubからプロジェクトがダウンロードできるので プロジェクト内に移動したあと、

すると必要なnode_modulesがインストールされますので、

とやるとタスクが実行されるようになります。

https://github.com/svartalfheim/GruntForMarkup

あとはやりたいことにあわせてタスクを追加したりしてカスタマイズしてみてください。

以上になります。 ここまでお付き合いありがとうございました。

あわせて読みたい記事