gulp： less コンパイルの自動化

gulp は、Node.js の Stream API を使用したビルドシステムです。これから gulp を使って、less のコンパイルを自動化する手順を書いていきます。

前提

Node.js（と npm）がインストールされていること。

ディレクトリ構成

今回の例は、sample というディレクトリ（プロジェクトのルート）を作成して、そこで作業しています。html, less, css などは、src ディレクトリ配下に置きます。

sample
　- node_modules
　- package.json
　- gulpfile.js
　- src
　  - *.html
　  - *.less
　  - *.css

手順1. gulp のインストール

※ 既にインストールしている場合は作業不要です。

次のコマンドで、gulp をグローバルでインストールします。

> npm install --global gulp-cli

今後、別プロジェクトで gulp を使う場合、この作業は省略できます。

手順2. package.json の作成

package.json は、プロジェクト情報や依存パッケージなどを管理するファイルです。次のコマンドで作成します。

> npm init

コマンドを実行すると対話形式になりますが、ひとまず全てデフォルト（何も入力せず Enter 押下）でも良いと思います。

手順3. パッケージのインストール

利用するパッケージをインストールします。

> npm install gulp --save-dev
> npm install gulp-less --save-dev
> npm install gulp-plumber --save-dev

--save-dev を付けているので、package.json に依存性が保存されます。

手順4. gulpfile.js の作成

gulpfile.js を作成して、次の内容を保存します。

// パッケージの読み込み
var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require("gulp-plumber");

// lessコンパイルタスク
gulp.task('less', function() {
  return gulp.src('src/*.less')  // src の less が対象。
    .pipe(plumber())  // エラーが発生しても止めない。
    .pipe(less()).pipe(gulp.dest('src'));  // css は src に出力。
});

// デフォルトタスク
// src の less が変更されたら、lessコンパイルタスクを実行。
gulp.task('default', function() {
  gulp.watch("src/*.less", ['less']);
});

手順5. gulp実行

次のコマンドで、デフォルトタスクを実行します。

> gulp

実行すると gulp が常駐して、less ファイルを変更するとコンパイルされます。

終了する場合は、ctrl + c を押します。

Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。