（二）用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//解析less

npm install --save-dev gulp-autoprefixer//兼容浏览器

npm install --save-dev gulp-minify-css//压缩css

npm 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: 0,//保留所有特殊前缀
            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会为你自动编译！！！

快去试试吧~~~