使用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的构建压缩合并也是这个道理,仅供参考