正文
（二）用less+gulp+requireJs 搭建项目（gulp）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
gulp是自动化构建工具，基于node，需要安装node，如果你不了解node也没关系，先跟着来一遍再去了解node也不迟~
首先去node官网下载安装包
1.新建项目文件夹 在目录下shift+右键打开命令行工具;下图表示node已经装好
2.现在想要做这样一个功能
如上图：
button.less中的颜色依赖于color.less
需要实现:
将两个less文件合并，而且生成css文件到css文件夹中：
新建文件index.less,合并两个less文件
这时候就要用到gulp
3.安装gulp
npm install --save-dev gulp
安装完成后根目录下会多出一个文件夹--node_modules 里面是node安装的模块，然后查看gulp 的版本号 说明安装成功
另外，还需要安装一些其他的包
npm install --save-dev gulp-less//解析lessnpm install --save-dev gulp-autoprefixer//兼容浏览器npm install --save-dev gulp-minify-css//压缩cssnpm install --save-dev gulp-rename//文件+后缀
3.接下来需要一个配置文件gulpfile.js，这个是必须要的，目的就是 告诉后台用什么解析less文件，生成的css放在哪里
gulpfile.js：
var gulp = require('gulp'),
less = require('gulp-less'),
prefix = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename');gulp.task('Less', function (done) {
gulp.src('less/index.less')//需要编译的less文件路径
.pipe(less())//编译
.pipe(prefix(['last 4 versions'], { cascade: true }))
.pipe(minifyCss({
keepSpecialComments: ,//保留所有特殊前缀
compatibility:'ie7'//保留ie7及以下兼容写法
}))
.pipe(rename({ extname: '.min.css' }))//后缀
.pipe(gulp.dest('css/index.css'))//生成目录
.on('end', done);//结束
});
这个文件的作用是，创建一个“Less”任务，将index下的index.less文件解析 ,压缩 生成到 css下
4.接下来需要输入执行”Less”任务
gulp Less
上图表示编译成功，此时css下已经生成css文件，并且已经压缩
如下图：
5.接下来 还没完 因为这么写 你每次修改less文件都要执行一次“Less”任务才能完成编译
我们需要自动监听less文件，只要文件被修改就执行‘Less’任务，gulp有的watch（）函数可以完成这种需求
在配置文件下添加如下代码：
gulp.task('watch', function () {
gulp.watch('less/*.less', ['Less']); //当有less文件发生改变时，调用Less任务
});
这样我们只要执行“watch”任务就可以一直监听less文件了
gulp watch
这样当你修改less文件时，gulp会为你自动编译！！！
快去试试吧~~~
