pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

すごく便利なビルドツールGrunt

今回はビルドツールであるgruntを導入してみたので、その入れ方と使い方を紹介したいと思います。

スクリーンショット 2013-08-28 7.25.14

 

webサイトの表示速度を最適にしようとするとCSSJavascriptのminifyやCSSスプライトなど多くのことをやらなければなりません。

 

ざっくりいうとこのような作業を簡単にしてくれるのがGrunt.jsです。

 

さっそくですが実際に使ってみましょう

Grunt.jsはターミナルを使っていきます。

 

まずNode.jsが必要なので、インストールします。

こちらにいき、インストールでOKです。

http://nodejs.org/

 

インストールするとターミナルでNode.jsが使えるようになっています。

 

そしてターミナルからgrunt-cliというものを導入します。

 

 以下のコマンドを入力します。

sudo npm install -g grunt-cli

 grunt-cliのインストールが終わったら、作業ディレクトリにいきます。

 

ここでは、ホームディレクトリ直下に「project」というディレクトリを作ってそこで作業することにします。

 

mkdir ~/project

cd ~/project 

 

今はprojectのフォルダの中にいることを再度確認します。

 

ではGrunt.jsの設定にいきましょう。

 

まずpackage.jsonとGruntfile.jsが必要になります。

 

npm init

 

でpackage.jsonの項目をターミナルとの会話形式で入れていきます。

 

まずはこんな感じでいれてみましょう。

 

{

  "name": "test",

  "version": "0.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "nagasawa",

  "license": "BSD-2-Clause"

 そして

npm install grunt --save-dev 

 でgruntをインストールし、node_modulesというgruntが入ったフォルダが生成されます。

 

次に、プラグインを導入してみます。

grunt-contribというものを入れます。

 

多くのプラグインがありますが、

ファイルの更新を自動的に感知してくれるものとcssファイルの改行やファイルサイズを小さくするプラグインを導入してみます。

 

npm install grunt-contrib-watch grunt-contrib-cssmin --save-dev

そうするとpackage.jsonをみると

 

% cat package.json                                                                                                                                           (git)-[master]

{

  "name": "test",

  "version": "0.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "nagasawa",

  "license": "BSD-2-Clause",

  "devDependencies": {

    "grunt": "~0.4.1",

    "grunt-contrib-cssmin": "~0.6.1",

    "grunt-contrib-watch": "~0.5.3"

  }

 最後にプラグインがあることがわかります。

 

package.jsonに書いてあれば、

npm install 

 を実行すればどこでも同じ環境がすぐに作れてしまいます。

 

package.jsonと同じ階層にGruntfile.jsを作ります。

vim Gruntfile.js

 

  module.exports = function(grunt) {

             grunt.initConfig({

                         cssmin: {

                                       compress: {

                                               files: {

                                                   './min.css': ['css/base.css', 'css/style.css']

                                                           }

                                                            }

                                                                                          },

                                         watch: {

                                                   files: ['css/*.css'],

                                                   tasks: ['cssmin']

                                                       }

                                                            });

              grunt.loadNpmTasks('grunt-contrib-cssmin');

                grunt.loadNpmTasks('grunt-contrib-watch');

  };

 

 

そしてpackege.jsonと同じ階層にcssフォルダを作ります。

 

mkdir css

cd css

vim base.css

 簡単なものを書いてみます。

h1{

padding:100px;

}

 

vim style.css 

 簡単なものを書いてみます。 

body{

magin-left:10px;

}

 package.jsonと同じ階層にcssフォルダがあり、そのcssフォルダの中にdefault.cssとstyle.cssがあります。

 

grunt cssmin 

 をしてcssを圧縮してみます。

 

するとmin.cssができています。

 

 h1{padding:100px}body{margin-left;10px}

 圧縮されているようです。

 

ぜひ使ってみてください。