環境

Mountain Lion

前回gruntのinstallをしたので実際に利用してみます。

プロジェクトの用意

プロジェクトの親フォルダに移動します。
初めてなのでいきなり本物プロジェクトへの適応は怖いので、モックのオブジェクトを使います。

package.jsonの用意

プロジェクトフォルダに移動します。

grunt.jsで全てのソースを管理します。


cd /Users/{username}/Documents/develop_doc/idead/mock4

npm init

対話形式に答えてそのまま進むとpackage.jsonができあがります。
続いてGruntfile.jsが必要なので、package.jsonに以下のように変更します。


 {
   "name": "mock4",
   "version": "0.0.0",
   "description": "test",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": "",
   "author": "test",
   "license": "BSD",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-contrib-cssmin": "~0.4.2"
   }
 }

grunt-contrib-watchは、ファイルが更新された自動感知して処理を実行します。
grunt-contrib-cssminは、cssファイルの改行やコメントを削除してファイルサイズを少なくしてくれます。

準備ができたら下記のコマンドを打ち込みます。


npm install

node_modulesフォルダが作成されているので、中を見てみましょう。フォルダが二つ生成されているはずです。

Gruntfile.jsの設定

package.jsonとおなじ階層にGruntfile.jsを作成します。

まずは基本となるコードを以下のように記載します。


 module.exports = function(grunt) {
   grunt.initConfig({
  
   });
 };

loadNpmTasksを使用して、プラグインを読み込みます。


 'use strict';
 module.exports = function(grunt) {
   grunt.initConfig({
  
   });
  
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-watch');
 };

ついでにstrictモードにしておきます。プロジェクトのcssの設定をおこないます。


 'use strict';
 module.exports = function(grunt) {
   grunt.initConfig({
    cssmin: {
         compress: {
           files: {
             'css/min.css': ['css/bootstrap-responsive.css', 'css/bootstrap.css', 'css/social-buttons.css', 'css/family.css']
           }
         }
       },
       watch: {
         files: ['css/*.css'],
         tasks: ['cssmin']
       }  
   });
  
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-watch');
 };

実行します


 grunt cssmin
 Running "cssmin:compress" (cssmin) task
 File css/min.css created.
 Uncompressed size: 180656 bytes.
 Compressed size: 19805 bytes gzipped (149721 bytes minified).

 Done, without errors.

上記の設定ならcss/min.cssが作成されていれば成功です(responsiveの設定があるのでこれでは使えませんがw)。

とっても便利ですね。jekninsと平行して使うととっても良さそうです。
さて、次は一応javaScriptファイルの結合までやっておきましょう。
でわ

参考サイト