gulp4.0 搭建less编译环境

一，缘起

前端发展到今天，ui组件库比比皆是，但为了提升下自我的业务及基础能力，还是决定造个ui框架轮子，顺带把工作的常用的一些整合下，那也是一种沉淀与分享。
然后针对 ui 组件的写法，选择less，然后采用gulp来编译及输出，也许大家会疑惑，为什么不用webpack，为了与单位项目进行无缝切合吧，忘记说了，我们现在的项目是卫星项目（很高端的），为了调试方便，采用了seaJS来进行模块化的。这个H5项目没有采用线下流行的webpack。

二，开始

1、支持nodeJS环境

npm init

生成package.json。
备注：因为我这仅仅是开发环境的，所以安装包的时候，都采用了 --save-dev 。

2、安装 gulp

npm install --save-dev gulp

3、安装gulp-less

npm install --save-dev gulp-less

在gulpfile.js中写入

var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(){
    gulp.src('less/*.less')
    .pipe(less())  
    .pipe(gulp.dest('dist/css'))
     });

执行结果如下
图片描述
仔细看居然有报错，百度了下，是gulp4.0 带来的。
重新改写代码：

var gulp = require('gulp'); var less = require('gulp-less');
gulp.task('less', function(done){

gulp.src('less/*.less')
.pipe(less())  
.pipe(gulp.dest('dist/css'))
done() });

妥妥的好了。

4、安装gulp-concat

npm install --save-dev gulp-concat

在gulpfile.js中写入

 var gulp = require('gulp'); var less = require('gulp-less');
 gulp.task('less', function(done){
     gulp.src('less/*.less')
      .pipe(concat('style.css')) 
     .pipe(less())  
     .pipe(gulp.dest('dist/css'))
     done(); });

5、安装gulp-minify-css

npm install --save-dev gulp-minify-css

在gulpfile.js 中写入

gulp.task('less',function(done){

gulp.src('less/*.less')
.pipe(concat('style.css'))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
done(); });

6、安装gulp-rename

npm install --save-dev gulp-rename

在gulpfile.js 中写入

gulp.task('less',function(done){

gulp.src('less/*.less')
.pipe(concat('style.css'))
.pipe(minifyCss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/css'));
done(); });

7、安装 gulp-liverelaod 自动刷新

npm install --save-dev gulp-livereload

在 gulpfile.js 中写入

gulp.task('watch', function(){

livereload.listen();
gulp.watch('less/*.less', gulp.series('less'));  });

8、提取 输入，输出文件夹

npm install --save-dev path

在 gulpfile.js 中写入

var path = require('path'); var basePath = path.resolve(__dirname,
'');//-项目路径 var src = basePath + '/less/*.less',

output = basePath + '/dist/css';

9、安装 gulp-clean 清空文件夹

npm install --save-dev gulp-clean

在 gulpfile.js 中写入

gulp.task('clean', function(done){

return gulp.src(output, {read: false})
.pipe(clean({force: true}));    });

10、合并各个任务

在 gulpfile.js 中写入

gulp.task('dev', gulp.series('clean', 'less', 'watch', function (done)
{

done(); }));

三、总结

一个基于gulp的less编译环境已经完成了，通过watch可以监听到less中变化，并实时进行编译、合并、压缩。
后期已经将 js以及html的一些也加进去，应该分dev版本与pro版本。