最近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以上をインストールします。
nvmw
Node.jsのバージョン管理ツールのnvmのwindows版です
インストール方法
コマンドプロンプトを立ち上げて以下を実行します。 まずgithubからプロジェクトをクローンします。
|
1 2 |
[sourcecode lang="text"]git clone git://github.com/hakobera/nvmw.git "%HOMEDRIVE%%HOMEPATH%\.nvmw" [/sourcecode] |
そのあと環境変数にnvmwのディレクトリパスを追加します
|
1 |
[sourcecode lang="text"]set "PATH=%HOMEDRIVE%%HOMEPATH%\.nvmw;%PATH%"[/sourcecode] |
最後に以下のコマンドでインストールされているかを確認します
|
1 2 3 4 |
[sourcecode lang="text"]nvmw help Node Version Manager for Windows ...[/sourcecode] |
ヘルプが表示されればインストール完了です。
Node.js
nvmwはNode.jsのバージョン管理ツールなのでこれをインストールしただけではまだNode.jsは使えません。
ここでは社内でよく使ってるv0.10.8をインストールしています。
|
1 2 3 4 |
[sourcecode lang="text"]nvmw install v0.10.8 nvmw use v0.10.8 Now using Node v0.10.8 [/sourcecode] |
今後インストールされるNPMはv0.10.8と紐づくのでバージョンを変更するときは注意しましょう。
Gruntのインストール手順
必要なファイル
ここからようやくGruntの出番です。 Gruntに必要なファイルは４種類あります。
grunt-cli
grunt-cliは Grunt command line interface のことで、 コンピュータのどこからでもgruntコマンドを呼び出せるようにします。
grunt
gruntの本体です。
package.json
プロジェクトの設定ファイルでどんなプロジェクト名かとかプロジェクトの説明などを記述します。
Gruntfile.js
どのタスクをどんな設定で実行するのかを記述する設定ファイルです。
新規プロジェクトをつくる
フォルダの構成
基本的にフォルダ直下にはhtmlなどのファイルは置かない方がいいと思います。srcにsassファイルなどをいれておいて、gruntでdstのcssフォルダに出力するみたいな構造にしておくといい気がします。
参考例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[sourcecode lang="text"]. ├── Gruntfile.js ├── README.md ├── dst │ ├── css │ ├── html │ ├── img │ └── js ├── node_modules ├── package.json ├── src │ └── js └── test[/sourcecode] |
１）grunt-cliのインストール
まずはGrunt本体のインストールです
|
1 |
[sourcecode lang="text"]npm install -g grunt-cli[/sourcecode] |
-g はグローバルオプションで今後はどこからでも呼び出せるようになります。
２）package.json生成
package.jsonの方をコマンドで生成します。
|
1 |
[sourcecode lang="text"]npm init[/sourcecode] |
このコマンドをうつとプロンプト上で対話的に設定が行えます。
ひとまずpackage.jsonはこのままにしておきます。
３）gruntのインストール
[sourcecode lang=”text”]npm install grunt –save-dev[/sourcecode]
–save-devはインストール時にpackage.jsonのdevDependencyに追加されるオプションです。 さらに同じ階層にnode_modulesというフォルダが作られ、そこにgruntが収められていることがわかります。
またタスクに必要なNodeモジュールも上記のような方法でダウンロードします。
４）Gruntfile.js
これはgrunt-initなどを使えばGruntfile.jsを簡単に作れるのですが、今回はエディターを使って実装してみます。 grunt-initなどが気になった方は調べてみるときっと幸せになれます。
Gruntfile.jsの書き方としてまず以下のような代入式を用意します。
|
1 2 3 |
[sourcecode lang="text"]module.exports = function (grunt) { //--ここいろいろ書く };[/sourcecode] |
次にその中に
|
1 2 3 4 5 6 |
[sourcecode lang="text"]module.exports = function (grunt) { //package.jsonの読み込み var pkg = grunt.file.readJSON('package.json');</p> //タスクの設定 grunt.initConfig({ //各タスクの詳細設定 }); //devDependency内のgrunt-*と書かれたNodeモジュールの読み込み Object.keys(pkg.devDependencies).forEach(function (devDependency) { if (devDependency.match(/^grunt-/)) { grunt.loadNpmTasks(devDependency); } }); //タスクの実行名を登録 //'default'であればgruntだけでおｋ grunt.registerTask('default', ['タスク名']); };[/sourcecode] |
カスタムタスクサンプル
では実際にマークアップで役立ちそうなGruntfileをつくってみました。このGruntfileには以下のタスクが設定されています。
- grunt-compass-multiple
- scssが増えてくると重くなるcompassを並列実行してくれるタスク
- grunt-autoprefixer
- ベンダープレフィックスを自動でつけてくれるタスク
- grunt-pngmin
- PNG画像を高圧縮・高速実行してくれるタスク
- grunt-contrib-watch
- ファイル変更を監視し、変更が行われたらタスクを実行したりできます
- grunt-contrib-connect
- Xamppなどを使わずにローカルで確認ができるタスク
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
[sourcecode lang="text"] module.exports = function (grunt) { //package.jsonの読み込み var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ compassMultiple: { dist: { // Target options: { // Target options sassDir: 'src/sass', cssDir: 'src/css', environment: 'production' } } }, autoprefixer: { // prefix all files target: { expand: true, flatten: true, src: 'src/css/*.css', dest: 'dst/css/' } }, pngmin: { compile: { options: {}, files: [ { src: 'src/img/**/*.png', dest: 'dst/img/' } ] } }, watch:{ scss:{ files:['src/sass/{,**/}*.{scss,sass}'], tasks:['compassMultiple','autoprefixer'] }, options:{ livereload:true }, livereload:{ options:{ livereload:'&lt;%= connect.options.livereload %&gt;' }, files:['src/sass/**/*.css'], } }, connect:{ options:{ port:9000, livereload:35729, hostname:'localhost' }, livereload:{ options:{ open:true, base:[ 'dst/' ] } } } }); //devDependency内のgrunt-*と書かれたNodeモジュールの読み込み Object.keys(pkg.devDependencies).forEach(function (devDependency) { if (devDependency.match(/^grunt\-/)) { grunt.loadNpmTasks(devDependency); } }); grunt.registerTask('default', ['compassMultiple','autoprefixer','pngmin','connect','watch']); };[/sourcecode] |
また実際には上記5つのタスクを実行するためには事前に下記のコマンドを打ち込んでパッケージをインストールしておく必要があります。
|
1 2 3 4 5 |
[sourcecode lang="text"]npm install --save-dev grunt-compass-multiple npm install --save-dev grunt-autoprefixer npm install --save-dev grunt-pngmin npm install --save-dev grunt-contrib-watch npm install --save-dev grunt-contrib-connect[/sourcecode] |
また上記のGruntfileを使ったサンプルプロジェクトをGithubにあげましたので、適当なディレクトリに移動してから
|
1 |
[sourcecode lang="text"]git clone https://github.com/svartalfheim/GruntForMarkup.git[/sourcecode] |
するとgithubからプロジェクトがダウンロードできるので プロジェクト内に移動したあと、
|
1 |
[sourcecode lang="text"]npm install[/sourcecode] |
すると必要なnode_modulesがインストールされますので、
|
1 |
[sourcecode lang="text"]grunt[/sourcecode] |
とやるとタスクが実行されるようになります。
https://github.com/svartalfheim/GruntForMarkup
あとはやりたいことにあわせてタスクを追加したりしてカスタマイズしてみてください。
以上になります。 ここまでお付き合いありがとうございました。
