第1章gulp简介
1.1 gulp是什么?
gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单
1.2 官网地址
中文网: http://www.gulpjs.com.cn/
Gitbook:https://wizardforcel.gitbooks.io/gulp-doc/content/2.html
1.3 特点
1.3.1 易于使用
通过代码优于配置的策略,gulp 让简单的任务简单,复杂的任务可管理。
1.3.2 构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
1.3.3 易于学习
通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
1.3.4 插件高质
gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
第2章gulp使用引导
2.1 快速开始
(1)全局安装npm install –g gulp
(2)安装到本地 npm install gulp –save-dev
(3)在项目根目录新建gulpfile.js
(4)编写文件内容并运行
var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world');
});
2.2 核心API
http://www.ydcss.com/archives/424
http://www.hubwiz.com/class/562089cb1bc20c980538e25b#
我们首先来说一下gulp.js工作方式。在gulp中,使用的是Nodejs中的stream(流),首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方。
2.3 globs语法
下面以例子来加深理解
* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
*.* 能匹配 a.js,style.css,a.b,x.y
*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
Globs语法是匹配文件夹和文件路径的,和正则表达式类似,但是语法有区别,作用没有正则表达式强大
2.4 gulp.task
2.4.1 语法
2.4.2 默认任务
你也可以定义一个在gulp开始运行时候默认执行的任务,并将这个任务命名为“default”
2.4.3 任务依赖
如果任务相互之间没有依赖,任务就会按你书写的顺序来执行,如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务。
2.4.4 异步任务
2.5 gulp.src
2.5.1 语法
2.5.2 多文件
2.6 gulp.dest
用gulp.dest()把文件流写入文件后,文件流仍然可以继续使用。
2.7 gulp.watch
2.7.1 语法
第3章常用插件
https://markgoodyear.com/2014/01/getting-started-with-gulp/
3.1 删除文件和文件夹
del
https://github.com/sindresorhus/del
3.2 合并js文件
gulp-concat
https://github.com/contra/gulp-concat
3.3 合并css文件
gulp-concat-css
https://github.com/mariocasciaro/gulp-concat-css
3.4 重命名文件
gulp-rename
https://github.com/hparra/gulp-rename
3.5 压缩js
gulp-uglify
https://github.com/terinjokes/gulp-uglify
3.6 压缩css
gulp-cssnano
https://github.com/ben-eb/gulp-cssnano
3.7 压缩页面
gulp-minify-html
https://github.com/sanfords/gulp-minify-html
3.8 压缩照片
gulp-imagemin
https://github.com/sindresorhus/gulp-imagemin
3.9 自动打开浏览器
gulp-open