Gruntを使う (LESSをCSSに自動コンパイルする&監視する)

Grunt: The JavaScript Task Runner

Gruntは、JS,CSSコンパイル作業などのタスクを自動化してくれます。

UNIXでnode.jsとnpm(node.jsのパッケージ管理ソフト)をインストールします。すでに入っているか -v で確認しましょう。

$ node -v
$ npm -v

node.jsを入れる macports - hrt0kmt's blog

npmも同様、$ sudo port install npmでインストールできます。

その後、以下のコマンドでGruntをインストールします。

$ sudo npm install -g grunt-cli
Password:
npm http GET https://registry.npmjs.org/grunt-cli
npm http 200 https://registry.npmjs.org/grunt-cli
・・・
npm http GET https://registry.npmjs.org/grunt-cli/-/grunt-cli-0.1.13.tgz
npm http GET https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz
npm http 200 https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz
npm http 200 https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

続いて、package.jsonを作成します。

$ npm init

% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (okamoto)
version: (0.0.0)
description: local project
entry point: (index.js) Gruntfile.js
test command:
git repository:
keywords:
author: hrt0kmt
license: (BSD) hrt0kmt
About to write to /Users/hrt0kmt/Sites/okamoto/package.json:

{
  "name": "okamoto",
  "version": "0.0.0",
  "description": "local project",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hrt0kmt",
  "license": "hrt0kmt"
}


Is this ok? (yes)
$ ll
total 8
drwxrwxrwx   4 hrt0kmt  staff  136 Oct  3 13:54 apps/
-rw-r--r--   1 hrt0kmt  staff  231 Oct 29 20:06 package.json
drwxrwxrwx  12 hrt0kmt  staff  408 Oct  3 13:51 shared/
drwxrwxrwx  10 hrt0kmt  staff  340 Oct  3 13:52 system/

Gruntとプラグインのインストール

$ npm install grunt --save-dev

$ npm install grunt --save-dev
npm http GET https://registry.npmjs.org/grunt
npm http 200 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz
npm http 200 https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz
npm http GET https://registry.npmjs.org/async
・・・
npm http 200 https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz
npm http 200 https://registry.npmjs.org/argparse/-/argparse-0.1.15.tgz
npm http GET https://registry.npmjs.org/underscore
npm http 200 https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz
npm http 200 https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz
grunt@0.4.5 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── rimraf@2.2.8
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── nopt@1.0.10 (abbrev@1.0.5)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

プラグインをインストールします。

LESSのコンパイル

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

監視

$ npm install grunt-contrib-watch

CSSの圧縮

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

JSの圧縮

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

Gruntfile.jsの作成

--save-dev オプション:package.json にインストールしたパッケージ情報を書き込んでくれます。


次に、インストールしたプラグインを読み取り、タスクを実行するjsファイルを作成します。

雛形

module.exports = function(grunt) {
    grunt.initConfig({
        //タスク
  });
  grunt.loadNpmTasks('プラグイン名');
};

例)CSSの圧縮

module.exports = function(grunt) {

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

    grunt.initConfig({

        // Setting
        Config: config,

        // Less task yield
        less: {
            style: {
                options: { cleancss: true },
                src: 'apps/web_user/public_html/less/general.css',
                dest: 'apps/web_user/public_html/css/general.css'
            }
        },

        watch: {
            less: {
                files: ['apps/web_user/public_html/less/*.less'],
                tasks: ['less'],
                options: {
                    livereload: true
                }
            }
    });

    // Do task
    grunt.registerTask('default', [ 'less', 'watch']);
};

インストールしたプラグインは、package.jsonに記述されます。

{
  "name": "okamoto",
  "version": "0.0.0",
  "description": "local project",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hrt0kmt",
  "license": "hrt0kmt",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-copy": "~0.7.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-yuidoc": "~0.5.2",
    "grunt-contrib-compress": "~0.12.0",
    "grunt-contrib-less": "~0.12.0"
  }
}

なので、プロジェクト毎にpackage.jsonをコピーし以下を実行すれば、記述してあるプラグインをインストールできます。 ※ grunt.jsはPCにインストールされているので大丈夫です。

$ npm install

実行

$ grunt

このコマンドでGruntfile.jsに記述されている監視&タスクを実行します。

Control + Cで監視を終了します。

参照 参照2