すでに花粉症が始まった大熊猫です(@@)
さて、今回はビルド管理ツール「Grunt.js」のご紹介と実際に使ってみるまでを簡単にまとめてみました。
Gruntとは?
GruntはJavaScriptで作られたビルド管理ツールです。
SASSなどのCSSプリプロセッサーの管理やCSSやJavaScriptの結合や圧縮などの処理をタスクとして実行できます。
ビルド管理ツールは他にRuby(Rake)やJava(Make)で実行されるものがあります。
環境準備
Gruntを利用するための準備をはじめましょう。
Node.jsとnpm
以前に紹介したStyleDoccoと同じくGruntを利用するにはNode.jsとnpm(Node Packaged
Modules)のインストールが必要になります。
まずはターミナル(Windowsの場合はMINGW等)でnode.jsとnpmがインストール済みかを確認しましょう。
node -v v0.8.15 npm -v 1.1.66
こんな感じになればOK。
v0.3をアンインストール
※Gruntを初めてインストールされる人はこの節は飛ばしてください。
v0.3がグローバルでインストールされている人はまずアンインストールを行います。
npm uninstall -g grunt
Gruntのバージョンは本記事の投稿の少し前に0.4にバージョンアップしました。
今回の0.4では以前のバージョンである0.3から大幅に仕様が変更されました。
そのため、すでにバージョン0.3でgruntを触っている場合は必ずアンインストールが必要になります。
grunt-cliをインストール
grunt-cliはGruntのコマンドラインインターフェイスです。
Gruntのコマンドライン操作を行う為のものになります。
こちらをまずグローバルにインストールします。
npm install -g grunt-cli
これでひとまず環境の準備は終了です。
タスクを作ってみる
では実際にGruntをで実行するタスクを作っていきましょう。
まず、Gruntを使って何をしたいかを考えてみます。
今回やってみたいこと(タスク)を考える
今回は以下のタスクをGruntで行いたいと思います。
- SASSの管理
- CSSの圧縮
- JavaScriptファイルの結合
- JavaScriptファイルの圧縮
- 上記の処理の監視(Watch)
- ローカルホストを立てる(今回は「localhost:9000/)
用意したディレクトリ
今回のサンプルのために以下のディレクトリを用意します。
├── css ├── _sass │ └── style.scss ├── js │ ├──_src │ ├── test.js │ └── test02.js └── index.html
package.jsonを用意する。
以下のような「package.json」をディレクトリの直下に作成します。
{ "name": "プロジェクト名", "description": "プロジェクトの説明", "version": "1.0.0", "author": "作成者名", "dependencies": {}, "devDependencies": {} }
Gruntに関するpackage.jsonの詳しい解説は一旦割愛致します。
以下が詳しいのでご覧下さい。
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと ::ハブろぐ
Gruntのインストール
次にGruntのCoreをインストールします。
npm install grunt --save-dev
※グローバルインストールではなく、作業環境にインストールしてください。
package.jsonを確認すると以下のようになります。
{ "name": "プロジェクト名", "description": "プロジェクトの説明", "version": "1.0.0", "author": "作成者名", "dependencies": {}, "devDependencies": { "grunt": "~0.4.0" } }
プラグインのインストール
今回必要なプラグインをインストールします。
必要なプラグインは以下の通りです。
grunt-contrib-concat grunt-contrib-uglify grunt-contrib-sass grunt-contrib-cssmin grunt-contrib-connect grunt-contrib-watch
npm installでプラグインもインストールします。
$ npm install [プラグイン] --save-dev
以下のコマンドで一気に実行もできます。
$ npm install grunt-contrib-concat grunt-contrib-uglify grunt-contrib-sass grunt-contrib-cssmin grunt-contrib-connect grunt-contrib-watch --save-dev
package.jsonが以下のように変更されます。
{ "name": "プロジェクト名", "description": "プロジェクトの説明", "version": "1.0.0", "author": "作成者名", "dependencies": {}, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.1.1", "grunt-contrib-sass": "~0.2.2", "grunt-contrib-cssmin": "~0.4.1", "grunt-contrib-connect": "~0.1.2", "grunt-contrib-watch": "~0.2.0" } }
※尚、Gruntのコアデータ及びプラグインはnpmで把握している安定板がインストールされます。
Gruntfile.jsを作成
公式サイトやgithubに上がっているサンプルを見つつ以下を作成しました。
module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), connect: { server: { options: { port: 9000, hostname: 'localhost' } } }, watch: { scripts: { files: 'js/_src/*.js', tasks: ['concat', 'uglify'] }, sass: { files: '_sass/*.scss', tasks: ['sass', 'cssmin'] } }, concat: { common: { files: { 'js/all.js': [ 'js/_src/test.js', 'js/_src/test02.js' ] } } }, uglify: { common: { files: { 'js/all.min.js': 'js/all.js' } } }, sass: { common: { options: { style: 'expanded' }, files: { 'css/style.css': '_sass/style.scss' } } }, cssmin: { compress: { files: { 'css/style-min.css': 'css/style.css' } } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['concat', 'uglify', 'sass', 'cssmin', 'connect', 'watch']); }
タスク
今回行いたいタスクは以下の通り
concat -JavaScriptの結合 uglify -JavaScriptの圧縮 sass -SASSの管理 cssmin -CSSの圧縮 connect -サーバーを立てる watch -ファイルの監視
タスクを実行する
ではここまでに作ったタスクを実行してみます。
Gruntを実行
以下のコマンドをたたきます。
grunt
今回はdefault(標準)のタスクのみで実行できますのでこれでOKです。
上記を実行後、ディレクトリは以下のようになります。
実行の結果
問題がなく実行されれば、ターミナルは以下のように表示されると思います。
$ grunt Runnning "watch" task Waiting... /省略/ Running "connect:server" (connect) task Starting connect web server on localhost:9000. Running "watch" task Waiting...
一部省略していますがエラーが出なければOKです。
また、ディレクトリは以下のような状態になっているはずです。
├── css │ ├──style.css │ └──style-min.css ├── _sass │ └── style.scss ├── js │ ├──all.js │ └──all.min.js │ ├──_src │ ├── test.js │ └── test02.js │ ├──Gruntfile.js │ ├──package.json │ └── index.html
ローカルホストで確認
ローカルホストを立てましたので、問題がなければ今回の設定では「http://localhost:9000/」で確認できるようになります。
おわりに
今回はGruntの導入という事で比較的簡単なタスクを実行してみました。
Gruntは他にも以前に紹介したStyleDoccoの自動化や、ファイルの自動更新も行う事が可能です。
こちらは少々、解説が複雑になるので機会があれば紹介したいと思います。