grunt-contrib-lessでlessファイルのコンパイルを自動化する。

automation

ブログデザインの変更にあたって、lessファイルのコンパイルをgrunt-contrib-lessを使って自動化してみた。

デザインベースは公式のboilerplateを使わせてもらった。

フォルダ構成

boilerplateからboilerplate.lessとlessディレクトリ配下のlessファイルをコピーしてくる。

dist配下にコンパイルしたcssファイルを格納するようにした。

views配下に自分のブログのhtmlファイルをダウロードしてきて、dist配下のcssファイルを読み込むように編集する。

% tree -L 1
 .
├── Gruntfile.js
├── dist
├── less
├── node_modules
├── package.json
├── tachikoma.less
└── views

grunt-contrib-lessのインストール

gruntモジュールのインストールはいつも通り。

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

Gruntタスクの編集

lessのoptionsで@importディレティブのディレクトリやソースファイルを指定する。

yuicompressオプションでcssmin.jsを使った圧縮を有効にできる。

% vi Gruntfile.js

module.exports = function (grunt) {
  'use strict';
  var pkg = grunt.file.readJSON('package.json');
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    less: {
      development: {
        options: {
          paths: ["less"]
        },
        files: {
          "dist/tachikoma.css": "tachikoma.less"
        }
      },
      production: {
        options: {
          paths: ["less"],
          yuicompress: true
        },
        files: {
          "dist/tachikoma.min.css": "tachikoma.less"
        }
      }
    },
    connect: {
      livereload: {
        options: {
          port: 9000
        }
      }
    },
    watch: {
      html: {
        files: 'views/*.html',
        tasks: [],
        options: {
          livereload: true,
          nospawn: true
        }
      },
      less: {
        files: ['*.less', 'less/*.less'],
        tasks: ['less:development'],
        options: {
          livereload: true,
          nospawn: true
        }
      }
    }
  });
  var taskName;
  for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }
  grunt.registerTask('live', ['connect', 'watch']);
  grunt.registerTask('default', ['less:development', 'live']);
};

gruntタスクの実行

% grunt

を実行するとlessファイルがコンパイルされて、lessファイルとhtmlファイルが監視対象になったLiveReloadが有効になる。

lessファイルの編集と画面確認を繰り返してデザインを整え終えたら、

% grunt less:production

で圧縮したcssファイルがdist配下に作成される。

あとはできたmin.cssファイルをブログ管理画面で貼り付けれればアップデート完了。

Grunt便利!!