gulp4.0 搭建less編譯環境

一，緣起

前端發展到今天，ui組件庫比比皆是，但爲了提高下自個人業務及基礎能力，仍是決定造個ui框架輪子，順帶把工做的經常使用的一些整合下，那也是一種沉澱與分享。
而後針對 ui 組件的寫法，選擇less，而後採用gulp來編譯及輸出，也許你們會疑惑，爲何不用webpack，爲了與單位項目進行無縫切合吧，忘記說了，咱們如今的項目是衛星項目（很高端的），爲了調試方便，採用了seaJS來進行模塊化的。這個H5項目沒有采用線下流行的webpack。

二，開始

一、支持nodeJS環境

npm init

生成package.json。
備註：由於我這僅僅是開發環境的，因此安裝包的時候，都採用了 --save-dev 。

二、安裝 gulp

npm install --save-dev gulp

三、安裝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() });

妥妥的好了。

四、安裝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(); });

五、安裝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(); });

六、安裝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(); });

七、安裝 gulp-liverelaod 自動刷新

npm install --save-dev gulp-livereload

在 gulpfile.js 中寫入

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

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

八、提取 輸入，輸出文件夾

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';

九、安裝 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}));    });

十、合併各個任務

在 gulpfile.js 中寫入

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

done(); }));

3、總結

一個基於gulp的less編譯環境已經完成了，經過watch能夠監聽到less中變化，並實時進行編譯、合併、壓縮。後期已經將 js以及html的一些也加進去，應該分dev版本與pro版本。