gulp及gulp说明

使用gulp编译构建步骤

1.安装gulp

npm install --global gulp

2.在项目根目录创建依赖

npm install --save-dev gulp

3.在项目根目录创建一个gulpfile.js,基本结构如下：

var gulp = require('gulp');

gulp.task('default', function() {
// 将你的默认的任务代码放在这
});

4.创建package.json

5.运行，gulp

实例，编译构建 less

a.在gulpfile.js中定义好依赖的插件



b.创建gulp任务



我们在命令窗口中敲击“gulp”后运行“default”,这个任务里面只做了一件事就是执行“develop”任务，【“clean”】表示运行default的前提是clean任务执行完毕



c.现在我们看看develop是如何编译和构建less的

在develop任务里我们首先运行了“build-less”和“concat”任务



先看看“build-less”任务 编译.less



这段代码的意思是，gulp利用gulp-less插件把less目录下的所有.less文件都编译成了对应的css文件，并指定了它们生成在css目录下


d.之后再看看“concat”任务做了哪些事情？



从代码看出，concat任务是依赖于“build-less”执行完毕之后执行，这段代码的意思是 gulp利用了合并插件和压缩插件先把css目录下的所有.css文件合并并取名为ytm.min.css，和并后再压缩，并指定了生成在api路径下

e.所以只要我们在页面上引入  api/ytm.min.css就可以了

那么当我们修改了某一个.less文件后，gulp是怎么自动编译的呢？看c中的develop任务，我们除了执行“build-less”和“concat”外还执行了监听，

gulp.watch("less/*.less",["build-less"]);
gulp.watch("css/*.css",["concat"]);

这两段代码的意思是

     1）当less目录下的任何一个.less发生了变化，就会执行 “build-less”任务

     2）当css 目录下任何.css变化，就会执行“concat”任务

这样就保证了，只要.less变化了.css就会变化，css变化了ytm.min.css就会变化，这样刷新页面的时候样式就变了

这些是基本的操作，可以根据自己的项目自己定义如何监听，监听那些文件的变化，gulp对js的构建压缩合并也是这个道理，仅供参考