請務必理解如下章節後閱讀此章節：

1. 安裝 Node 和 gulp
2. 使用 gulp 壓縮 JS

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護。

安裝

npm install gulp-less

基本用法

// 獲取 gulp
var gulp = require(‘gulp‘)
// 獲取 gulp-less 模塊
var less = require(‘gulp-less‘)

// 編譯less
// 在命令行輸入 gulp less 啟動此任務
gulp.task(‘less‘, function () {
    
 
// 1. 找到 less 文件
    gulp.src(‘less/**.less‘)
    // 2. 編譯為css
        .pipe(less())
    // 3. 另存文件
        .pipe(gulp.dest(‘dist/css‘))
});

// 在命令行使用 gulp auto 啟動此任務
gulp.task(‘auto‘, function () {
    // 監聽文件修改，當文件被修改則執行 less 任務
    gulp.watch(‘less/**.less‘, [‘less‘])
})

// 使用 gulp.task(‘default‘) 定義默認任務
// 在命令行使用 gulp 啟動 less 任務和 auto 任務
 

gulp.task(‘default‘, [‘less‘, ‘auto‘])

LESS 代碼和編譯後的CSS代碼

less/a.less

.less{
    a{
        color:pink;
    }
}

less/import.less

@import "a.less";
.import{
    a{
        color:red;
    }
}

less/a.css

.less a {
  color: pink;
}

less/import.css

.less a {
  color: pink;
}
.import a{
  color: red;
}
 

接著閱讀：使用 gulp 編譯 Sass

使用 gulp 編譯 LESS