gulp+lessを使ってみる

以前の記事でgulp+sassでの開発環境について書きました。

blog.harukaashiuchi.me

最近は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'));
});

これでオッケーです。またひとつできることが増えました。