読者です 読者をやめる 読者になる 読者になる

Web系開発メモ

Java, SpringBoot, JavaScript, CSS, HTML などの記事を書いています。

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 を押します。