3.LESS的自动编译

再次查看你的web文件包

---

|- view
|-|- index.html
|-node_modules
|-less 新增一个less文件夹^[1]
|-|- common.less
|-css 用于存放编译完成的css文件
|- gulpfile.js

---

安装对应的gulp插件

这个时候请确认你已经把gulp安装完成了。

1. 进入控制台，进入对应的项目地址

2. 安装gulp-less插件

npm install gulp-less  //这个插件是用来编译less的…

3. 安装gulp-concat插件

npm install gulp-concat  //这个插件是用来把less编译出来的css合并为一个css用的…

4. 安装gulp-plumber插件

npm install gulp-plumber  //这个插件是用来处理管道崩溃问题的…

5. 安装gulp-notify插件

npm install gulp-notify  //这个插件目的有两个，一个是显示报错信息，一个是报错后不终止当前gulp任务…

修改gulpfile.js文件

真正的自动化之路现在才开始

1. 首先还是把需要用到的方法放到简单的（你喜欢的）名字变量里

//我们新添加的一套插件，分为两部分，一部分为了处理错误，一部分为了自动更新css文件（less编译）
var less = require('gulp-less');  //less编译
var concat = require('gulp-concat');  //文件合并
var plumber = require('gulp-plumber');  //处理管道崩溃问题
var notify = require('gulp-notify');  //报错与不中断当前任务

2. 编写编译less的任务

//less编译
gulp.task('less',function(cb){
    return gulp.src('less/common.less')  //找到需要编译的less文件，所有less文件就写 less/*.less，
        .pipe(plumber({errorHandler: notify.onError('Error:<%= error.message %>;')}))  //如果less文件中有语法错误，用notify插件报错，用plumber保证任务不会停止
        .pipe(less())  //如果没错误，就编译less
        .pipe(concat('happyasyou.css'))  //把编译后的css合并为一个，名字是你开心就好，如果不想合并，就不写这一行
        .pipe(gulp.dest('css/'));  //把css文件放到css文件夹下
});

3. 监听less文件
   此时我们已经写好了编译方法，那么每次当我们修改了less文件后都执行一次方法则违背了我们做自动化的初衷，那么我们需要一个监听方法，每当监听到less文件有变化则自动执行编译方法

gulp.task('watchLess',function(){
//监听所有less文件，如果有变化，则执行less编译方法
    gulp.watch(['*/*.less'],['less']);
});

4. 把监听任务追加到启动服务器任务中

//第一种方法：将监听任务写进'woyaofuwuqi'任务中
//不推荐
gulp.task('woyaofuwuqi', function () {
    //任务名称不要有空格
    connect.server({
        liverload: true,port:9000 //端口号
    });
    gulp.watch(['*/*.html'],['qinghuancun']);
    gulp.watch(['*/*.less'],['less']);
});
/***********************************************************/
//第二种方法：新建一个任务列表，把监听任务与服务器任务都放在列表中
//推荐
gulp.task('taskList', ['woyaofuwuqi','watchHtml','watchLess']);
//修改默认任务，按照顺序做了的话，其实这次就不用改了。
gulp.task('default', function() {
    // 测试一下
    console.log('this is a new test page.');
    //gulp.start('woyaofuwuqi');
    gulp.start('taskList');  //执行任务列表
});

5. 查看你的成果
   我们来写一点less内容在common.less里面

body{
    color:#f0f;//瞎眼粉
    background-color:#abc000; //屎黄色
    /*这俩颜色真的丑爆了！*/
}

在命令行中进入你的项目文件夹，输入gulp，打开你的项目文件夹，查看css目录下是否生成了对应的happyasyou.css文件，实时修改common.less文件，happyasyou.css文件会实时更新。

---

最后文件包的地址放这里了。

---

1. 在本文集中，我就以less为例讲解如何自动编译了，原因是因为我只会less，不会sass/scss。 ↩