Tweet

Pocket

grunt0.4.1のメモ。

1. node/npmをインストール

最新版(2014.01.26)

• node: v0.10.25。
• npm: 1.3.25。

インストール

node.jsからnode-v0.10.25.pkgをダウンロードしてインストーラーからインストールする。npmはnodeインストール時に同時にインストールされる。

2. grunt command line interface(grunt-cli)をインストール

Grunt: The JavaScript Task Runner

$ sudo npm install -g grunt-cli

/usr/local/lib/node_modules/grunt-cli/gruntへインストールされた。

3. プロジェクトフォルダにpackage.jsonを作成

{
    "name": "example-project",
    "version": "0.0.1"
}

4. プロジェクトフォルダにGrunt本体とプラグインをインストール

grunt本体とプラグインはプロジェクト毎にプロジェクトフォルダへインストールする。grunt command line interfaceは2でインストールしたものを共通で使う。

grunt本体をインストールする。

$ cd プロジェクトフォルダ
$ npm install grunt --save-dev    

–save-devをつければpackage.jsonのdevDependenciesにプラグイン情報が追記される。

{
    "name": "example-project",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.1"
    }
}

続いてプラグインをインストール

$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-concat --save-dev


{
    "name": "example-project",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-cssmin": "~0.6.1",
        "grunt-contrib-concat": "~0.3.0"
    }
}

上記処理でプロジェクトフォルダにnode_modulesフォルダが作成され以下がインストールされた。

• grunt(の本体)
• grunt-contrib-concat
• grunt-contrib-cssmin

5. Gruntfile.js

Gruntfile.jsに処理を記載(ファイル名はgrunt.jsではなくGruntfile.js)。

grunt.initConfig({
    cssmin: {
        compress: {
            files: {
                'body.min.css': [ 'body.css' ]
            }
        }
    },
    concat: {
        dist: {
            src: ['header.css', 'body.min.css'],
            dest: 'style.css'
        }
    }
});

プラグインはloadNpmTasksでロードする。

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

デフォルト処理を定義。

// Default task(s).  
grunt.registerTask( 'default', [ 'cssmin', 'concat' ] );

6. gruntの確認

実行

$ grunt cssmin                # cssminのみ実行
$ grunt concat                # concatのみ実行
$ grunt                       # Default task(s)の処理を実行

ヘルプ

$ grunt --help

バージョン確認(2014.01.26時点)

$ grunt --version
grunt-cli  v0.1.13

7. WordPressのstyle.cssを圧縮

WordPressのstyle.cssをミニファイする。
Compass > CSSminify > Concat。

流れ

1. Compassでstyle_body.scssからcssディレクトリへstyle_body.cssを作成する。
2. css/style_body.cssをミニファイしてstyle_body.min.cssを作成する。
3. style_header.cssへstyle_body.min.cssを結合してstyle.cssを作成する

フォルダ構成

my-theme
|
|-- css
    |-- style_header.css  # テーマスタイルのヘッダー用
|-- config.rb             # Compass設定ファイル
|-- Gruntfile.js
|-- package.json
|-- style_body.scss       # テーマスタイルのボディー用

grunt-contrib-compassをインストール

$ npm install grunt-contrib-compass --save-dev

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        cssmin: {
            compress: {
                files: {
                    'css/style_body.min.css': [ 'css/style_body.css' ]
                }
            }
        },
        concat: {
            dist: {
                src: ['css/style_header.css', 'css/style_body.min.css'],
                dest: 'style.css'
            }
        }
    });

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

    // Default task(s).
    grunt.registerTask( 'default', [ 'compass', 'cssmin', 'concat' ] );
};

package.jsonをもとにインストール

$ npm install

既存のnode_modulesフォルダがあるときは削除する。

参考記事

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17