Gulp构建工具编译Less

分类:WEB前端 时间:

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

1.npm安装gulp-less

1
npm install gulp-less

2、编写gulp配置文件gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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']);
})

3、执行gulp任务
a、执行自动编译Less文件命令

1
gulp

b、执行编译Less文件命令(仅执行一次)

1
gulp less

标签:
来源:Gulp构建工具编译Less

发表评论

电子邮件地址不会被公开。 必填项已用*标注