gulpを使ってlessをコンパイルする方法

今Electronを使ってデスクトップアプリを趣味で開発しているのですが
猛烈にlessを導入したくなったので色々と設定してみました。

less
lesscss.org

ただ、Client変換方式でlessを導入するのはブラウザやパフォーマンスの問題があるので
lessファイルをコンパイルしてくれてコンパイル後のcssを読み取るように設定してみます。
・・もちろんlessの公式にあるとおり

 lessc styles.less styles.css

このようなコマンドでも実行は可能ですが、いちいちCSSの編集後にこのコマンドを投げるのは面倒です。
そのため保存時に自動的にコンパイルが走り、特定のフォルダ内にCSSが作成されるようにします。

上記のことをやりたい場合、gulp + gulp-lessを使用すると便利です。

gulp.js

www.npmjs.com

まずはプロジェクトにlessを導入

npm install --save-dev less

そしてgulp-less(gulp上でlessをビルドしてくれる機能)も導入します。

npm install --save-dev gulp-less

そして新規にgulpfile.jsをルートに作成します。

//gulpfile.js
const gulp = require('gulp');
const less = require('gulp-less');

// less → cssにコンパイルするタスク
gulp.task('less', function(){
  src('./src/less/*.less')
  .pipe(less())
  .pipe(gulp.dest('/src/css/*'));
});

//ファイルの変更があった場合、実行されるタスク
gulp.watch('watch', ['less'], function() {
  gulp.watch('./src/less/*.less', ['less']);
});

// デフォルトで実行してもらいたいタスクを配列で定義する。
gulp.task('default', ['less']);

すごく直感的に書けると思います。
まずはgulp.taskの第一引数に'less'という名前を指定しました。
これでgulp lessというコマンドを実行したら第二引数のcallbackが実行されます。
callbackの中身はlessファイルをcssにコンパイルするという動作ですね。

そしてgulp.watchでファイルの変更があった場合(このソースの場合、.src.less/*.lessの変更)
gulp.taskで指定されたlessを実行するという定義になります。

また、第二引数の['less']ですがgulp watchを実行する前に一度走らせたいタスクを配列で記入していきます。
gulp watchを実行する前にlessを変更した場合にも実行して貰いたいので。

最後にpackage.jsonにこちらを記入します。
今回はlessのコマンド実行なのでスクリプト名をlessにしていますが任意の名前で大丈夫です。

//package.json
scripts: {
    "watch":  "gulp watch";
}

そしてpackage.jsonのある階層で下記を実行するとコンパイルされるはずです。

npm run watch

設定自体楽チンで、何よりcssよりも綺麗に書けるのでlessの導入はお勧めです。ぜひgulpをお試し下さい!