gulp.js实现less批量实时编译

问题描述：

在之前一直用Koala编译less文件，但本人感觉Koala用起来非常麻烦，好像不能做多个less文件的批量的编译；因为目前项目也没有用到webpack，我的less是通过vs code 里的easy less插件来编译的，然而今天在项目中发现了个比较尴尬的问题，比如我编写了一个公用的base.less文件，里面定义了一些公用的变量、样式，其他.less文件都使用@import引入了base.less文件；接下来问题来了，当我修改了base.less文件后，我其它引入了base.less的文件并不能根据base.less的变化而重新编译一次，导致我只能挨个去手动打开保存一次，它才能重新编译，假如我有100个.less文件引入了base.less，那么我得去打开100个less文件，这样不是我想看到的。那么遇见问题解决问题，网上也查找了很多方法，基本都不靠谱，最后锁定了gulp.js前端自动化构建工具，来实现对多个.less文件的批量实时编译。话不多少，现在开始：

 

gulp.js简介：

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulp.js使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得grunt.js太难用的话，那就尝试一下gulp吧。

 

具体实现：

1、全局安装gulp.js (首先确保你已经正确安装了node.js环境)

npm install -g gulp

 

2、在项目目录下执行以下命令，创建package.json文件：

npm init

 

3、依次执行下面的命令下载gulp依赖包和gulp-less以及gulp-autoprefixer工具：

npm install gulp  -D

npm install gulp-less  gulp-autoprefixer  -D

 

4、在项目目录中创建一个gulpfile的js文件，js代码如下

var gulp =require("gulp");
var less =require("gulp-less");
var auto =require("gulp-autoprefixer");//css浏览器兼容前缀

gulp.task('compileLess', done => {
　　//找到项目中less文件夹中所有文件夹下的所有less文件
    gulp.src("../less/**/*.less")
         //进行预编译处理,保持与引入的模块一致
         .pipe(less())
         .pipe(auto({
              grid:true,
              browsers:['last 2 version']
       }))
     //编译后将less编译成的css文件保存到项目目录下的css文件夹中
     .pipe(gulp.dest('../css'))
　　done();
});

// 通过watch方法实时监测所有less文件，如果发生更改，执行compileLess方法
gulp.task('watch',function(){
　　gulp.watch('../less/**/*.less',gulp.series('compileLess'));
})

 

 控制台输入 gulp watch 命令实现监听