Gulp构建工具编译Less

WEB前端 Gulp教程、Nodejs学习 2017年8月24日

Gulp是一个基于Node.js的项目，用自动化构建工具增强你的工作流程。Less是一门CSS预处理语言，Less扩充CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。下面雷雪松详细的讲解下如何使用Gulp构建工具编译Less。

1.npm安装gulp-less
[cc lang=”javascript” escaped=”true”]npm install gulp-less[/cc]

2、编写gulp配置文件gulpfile.js
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’)
var less = require(“gulp-less”)
//需要编译的Less文件所在目录
var lessPath = “./”
//Less编译后css所在目录
var distPath = “./”
//新建一个编译Less的任务
gulp.task(‘less’,function(){
gulp.src(lessPath+’**/*.less’)
.pipe(less())
.pipe(gulp.dest(distPath))
})
//监听并自动编译Less文件
gulp.task(‘default’,function(){
gulp.watch(lessPath+’**/*.less’,[‘less’]);
})[/cc]

3、执行gulp任务
a、执行自动编译Less文件命令
[cc lang=”javascript” escaped=”true”]gulp[/cc]

b、执行编译Less文件命令（仅执行一次）
[cc lang=”javascript” escaped=”true”]gulp less[/cc]

来源：Gulp构建工具编译Less