再次查看你的web文件包
|- view
|-|- index.html
|-node_modules
|-less 新增一个less文件夹[1]
|-|- common.less
|-css 用于存放编译完成的css文件
|- gulpfile.js
安装对应的gulp插件
这个时候请确认你已经把gulp安装完成了。
进入控制台，进入对应的项目地址
安装gulp-less插件
npm install gulp-less //这个插件是用来编译less的…
- 安装gulp-concat插件
npm install gulp-concat //这个插件是用来把less编译出来的css合并为一个css用的…
- 安装gulp-plumber插件
npm install gulp-plumber //这个插件是用来处理管道崩溃问题的…
- 安装gulp-notify插件
npm install gulp-notify //这个插件目的有两个，一个是显示报错信息，一个是报错后不终止当前gulp任务…
修改gulpfile.js文件
真正的自动化之路现在才开始
- 首先还是把需要用到的方法放到简单的（你喜欢的）名字变量里
//我们新添加的一套插件，分为两部分，一部分为了处理错误，一部分为了自动更新css文件（less编译）
var less = require('gulp-less'); //less编译
var concat = require('gulp-concat'); //文件合并
var plumber = require('gulp-plumber'); //处理管道崩溃问题
var notify = require('gulp-notify'); //报错与不中断当前任务
- 编写编译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文件夹下
});
- 监听less文件
此时我们已经写好了编译方法，那么每次当我们修改了less文件后都执行一次方法则违背了我们做自动化的初衷，那么我们需要一个监听方法，每当监听到less文件有变化则自动执行编译方法
gulp.task('watchLess',function(){
//监听所有less文件，如果有变化，则执行less编译方法
gulp.watch(['*/*.less'],['less']);
});
- 把监听任务追加到启动服务器任务中
//第一种方法：将监听任务写进'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'); //执行任务列表
});
- 查看你的成果
我们来写一点less内容在common.less里面
body{
color:#f0f;//瞎眼粉
background-color:#abc000; //屎黄色
/*这俩颜色真的丑爆了！*/
}
在命令行中进入你的项目文件夹，输入gulp，打开你的项目文件夹，查看css目录下是否生成了对应的happyasyou.css文件，实时修改common.less文件，happyasyou.css文件会实时更新。
最后文件包的地址放这里了。
-
在本文集中，我就以less为例讲解如何自动编译了，原因是因为我只会less，不会sass/scss。 ↩
