Gulp构建工具编译Less
Gulp是一个基于Node.js的项目,用自动化构建工具增强你的工作流程。Less是一门CSS预处理语言,Less扩充CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。下面雷雪松详细的讲解下如何使用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 |
2017年9月30日 上午9:32
大力顶起。。。。
2019年4月9日 上午9:26
感谢博主分享。
2019年4月12日 下午1:40
支持博主。
2019年5月9日 下午10:30
前排留名,先回再看。等了好久额的新文章。