どーも、デザインちーむのさむです。
Huluにはまって早2年、まだまだ抜け出せそうにない今日この頃です。
さてさて、本日はフロントエンド周りの作業を効率化するべく、Gruntというものを取り上げてみたいと思います。
Gruntを利用すると、設定したことを自動で行ってくれるので作業効率化になります。
想像以上に便利で驚き。
毎度のことながら自分メモをかねてブログを書きます。（Windows7での説明になります）
目次
Gruntとは
Gruntとは、JavaScriptで書いたタスクを実行してくれるタスク自動化ツールです。
作業内容を記述しておくことで自動で実行してくれます。
cssやjsを自動でminify化してくれたり、ベンダープレフィックスを自動で追加してくれたり、画像を自動で圧縮してくれたり、などなど。
フロントエンド周りのファイルの圧縮、結合、最適化をスクリプト化できます。
導入することにより作業工数が確実に軽減されるのではないでしょうか。
公式サイトは以下になります。
http://gruntjs.com/
では、さっそく環境を構築していきましょう！
Node.jsのインストール
Gruntはnode.jsをベースに作られているので、まずはnode.jsをインストールします。
下記アドレスより自身の環境に合ったものを選びインストールしてください。
http://nodejs.jp/nodejs.org_ja/docs/v0.8/download/
インストールが終了したらコマンドプロンプトにて、下記のコマンドを実行しインストールができているかを確認します。
node -v
バージョン情報が表示されたらOKです。
C:\Users\???>node -v
v0.10.32
Grunt-cliのインストール
続いてGrunt-cliをインストールします。
npm install -g grunt-cli
インストール確認を行います。
grunt -version
バージョン情報が表示されたらOKです。
C:\Users\???>grunt -version
grunt-cli v0.1.13
package.json作成
次に作業をするディレクトリ（フォルダ）を作成します。
今回は「Gruntフォルダ」をデスクトップに作成します。
コマンドプロンプトにて作業ディレクトリに移動します。
その後、以下のコマンドを実行します。
npm init
コマンドプロンプトから色々と聞かれますが全てenterを押してください。
そうすると作業ディレクトリにpackage.jsonが作成されています。
このファイルでプラグイン情報を管理していきます。
不要な記述もされていますが、ひとまずこの内容で進めていきます。
npmインストール
次に様々なプラグインをインストールしていきます。
以下のコマンドでインストールします。
npm install プラグイン名 –-save-dev
後半にある--save-devを追加することによってpackage.jsonにプラグイン情報が自動で記載されますので忘れずに追加しましょう。
試しにgrunt本体をインストールしてみましょう。
npm install grunt --save-dev
先ほど作成した作業ディレクトリ（Gruntフォルダ）にnode_modulesフォルダが作成され、その中にgruntが入っているのが確認できます。
そしてpackage.jsonファイルにもプラグイン情報が記載されました。
現在のフォルダ構成は以下のようになります。
Grunt
node_modules
grunt
package.json
続いてCSSをminifyしてくれるプラグインをインストールします。
npm install grunt-contrib-cssmin --save-dev
node_modulesフォルダ以下にインストールされましたでしょうか？
Grunt
node_modules
grunt
grunt-contrib-cssmin
package.json
今回は簡単な説明なので以上のプラグインのみを利用してみたいと思います。
Gruntfile.js作成
次に上記のプラグインを実行させるためにGruntfile.jsというファイルを作業ディレクトリに作成します。
以下がひな形になるのでコピペで貼り付けて作成してみてください。
module.exports = function(grunt) {
grunt.initConfig({
// この中に各タスクの設定を記述していきます。
cssmin: {
target: {
expand: true,
files: {
'dist/test.min.css':'css/*.css'
}
}
}
});
// grunt.loadNpmTasks('プラグイン名');でプラグインを読み込む記述をします。
grunt.loadNpmTasks('grunt-contrib-cssmin');
// gruntコマンドの設定
grunt.registerTask('default', ['cssmin']);
};
作業ディレクトリのcssフォルダ内のtest.cssを、distフォルダ内にminifyして書き出すように記述してあります。
よって作業ディレクトリにcssフォルダを作成し、その中に適当なcssを記述します。
Grunt
css
test.css
dist
node_modules
grunt
grunt-contrib-cssmin
Gruntfile.js
package.json
cssのファイル名はtest.cssで内容は以下のように記述してます。
#header{
margin-top: 10px;
background: #fff;
}
#header a{
text-decoration: none;
font-size: 1em;
}
test.cssファイルを配置したら以下のコマンドを実行してみましょう。
grunt
いかがでしょうか？
自動的にminifyされたtest.min.cssが作成されたかと思います。
#header{margin-top:10px;background:#fff}#header a{text-decoration:none;font-size:1em}#header{margin-top:10px;background:#fff}#header a{text-decoration:none;font-size:1em}
このようにコマンドを実行するだけで自動で作業を行ってくれる賢いヤツです。
プラグイン紹介
一般的によく使うであろうプラグインをご紹介します。
- grunt-autoprefixer/ベンダープレフィックスを自動で付け加えてくれます
- grunt-contrib-uglify/JavaScriptを圧縮するプラグインです
- grunt-contrib-imagemin/画像を圧縮してくれるプラグインです
- grunt-contrib-compass/Compassを利用しSassをCSSにコンパイルしてくれます
- grunt-contrib-htmlmin/HTMLをminifyしてくれます
- grunt-contrib-csslint/cssの構文をチェックしてくれます
- grunt-contrib-connect/サーバー機能を提供するプラグイン
- grunt-contrib-less/LESSファイルをcssにコンパイルしてくれます
他にもまだまだ便利なプラグインがあるので是非、探してみてください。
おまけ
先ほどまでの内容ですと、作業をさせるときにいちいちコマンドを実行しなければいけません。
ちょっと手間ですよね。
そこで、監視フォルダを指定しておき、そこに何らかの変更が加えられた時に自動で処理を行ってくれるwatchプラグインを利用します。
手順は、watchプラグインをインストールして、Gruntfile.jsに処理内容を追加する。
今までの手順と同じですね。
まずはインストール
npm install grunt-contrib-watch --save-dev
先ほどのGruntfile.jsに追加
module.exports = function(grunt) {
grunt.initConfig({
// この中に各タスクの設定を記述していきます。
cssmin: {
target: {
expand: true,
files: {
'dist/test.min.css':'css/*.css'
}
}
},
watch: {
// cssの変更監視
css: {
files: ['css/*.css'], //監視対象のファイル
tasks: ['cssmin'] //実行するタスク
},
}
});
// grunt.loadNpmTasks('プラグイン名');でプラグインを読み込む記述をします。
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch'); //watchプラグイン読み込み
// gruntコマンドの設定
grunt.registerTask('default', ['watch']);
};
実行させるには、
grunt
すると以下の表示が出てきて監視が始まります。
D:\Users\???\Desktop\grunt>grunt
Running "watch" task
Waiting...
この状態でcssファイルを修正すると自動的にminifyされたfileが作成されます。
自動で行ってくれるのでとても便利です！
ちなみに停止させるときはctrl+cです。
まとめ
簡単な説明でしたが、タスクを色々登録すればかなりの作業効率化になります！
無駄な作業を省くためにも是非トライしてみてください。
今回はGruntをまとめてみましたが、他にもGulpという同じようなビルドツールがあります。
こちらは去年登場した新参者ですが、シンプルな設定ファイルと実行速度に定評があり、人気急上昇中です。
機会があればGulpもまとめてみたいです。
便利なものはどんどん取り入れていきたいですね！
