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版本。

你可能感兴趣的:(node.js,less)