以前の記事でgulp+sassでの開発環境について書きました。
最近はlessを使う機会が増えたので、gulp+lessの使い方についても備忘録的に書いておきます。 それでは、gulpを入れて、開発環境を整えていきましょう。node.jsは入っている前提です。 やり方はSassの時とたいして変わりません。
gulpとlessを導入
作成したプロジェクトファイルの階層で、npm init -y
をしてpackage.jsonを作成します。
次にgulpを入れます。npm install -D gulp
これでGulpが使えるようになりました。
lessファイルをコンパイルするためのプラグインを入れます。npm i -D gulp gulp-less
そしてタスクを作成するためにgulpfile.jsを作ります。
このファイルにコンパイルの処理を記述していきましょう。
const gulp = require("gulp"); const less = require("gulp-less"); gulp.task("default",function(){ return gulp .src('src/*.less') .pipe(less({ outputStyle: 'expanded' })) .pipe(gulp.dest('dest')); });
ここまで書いたら一度タスクを実行してみましょう。保存先に指定したフォルダにcssファイルが作られます。
この場合は、srcフォルダにあるlessファイルをdestフォルダに保存しています。
npx gulp
でタスクを実行します。
browser-syncとwatch機能を追加して、さらに便利に
npx gulp
でlessがコンパイルされますが、いちいち手動でコンパイルせずに変更があれば勝手にやってもらいたいですよね。せっかくgulp使ってるし。
browser-syncとwatch機能を追加しましょう。npm i -D browser-sync
const bs = require('browser-sync'); gulp.task('serve',function(){ bs.init({ server: './dest', open: false, port: 3030, ui: { port: 3031, }, }); gulp.watch('src/**/*.less',gulp.parallel('less')); });
これでオッケーです。またひとつできることが増えました。

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門
- 作者:中村 勇希
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)