gulp 入门

第1章gulp简介

1.1 gulp是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单

1.2 官网地址

官网：http://gulpjs.com/

中文网： http://www.gulpjs.com.cn/

插件：http://gulpjs.com/plugins/

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

https://github.com/stevelacy/gulp-open