gulp lessをcssにコンパイルする
lessファイルをgulpを使ってcssにコンパイルします。
必要なパッケージをインストール
gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブラウザに対応する場合はあると便利です。
$ npm install --save-dev gulp-less gulp-autoprefixerタスクは以下のようになります。
gulpfile.babel.jsimport gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
gulp.task('less', () => {
return gulp.src('src/less/*.*') // ファイルは適宜変更してください
.pipe($.less({ compress: true }))
.pipe($.autoprefixer('> 1%'))
.pipe(gulp.dest('dest'));
});