glup

1.gulp简介

1.1 gulp是什么

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

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

gulp

1.2 官网地址

• 官网
• 中文网
• 插件
• Gitbook

1.3 特点

1. 易于使用
   • 通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
2. 构建快速
   • 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
3. 易于学习
   • 通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
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语法

匹配符	说明
*	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
**	匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
?	匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
!(pattern|pattern|pattern)	匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern)	匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern)	匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

下面以例子来加深理解

• *
  能匹配 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

2.4 gulp.task

2.4.1 语法

gulp.task

2.4.2 默认任务

你也可以定义一个在gulp开始运行时候默认执行的任务，并将这个任务命名为“default”

2.4.3 任务依赖

任务依赖

如果任务相互之间没有依赖，任务就会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。

2.4.4 异步任务

异步任务

那如果我们想等待异步任务中的异步操作完成后再执行后续的任务，该怎么做呢？

有三种方法可以实现：

方法一

方法二

方法三

2.5 gulp.src

2.5.1 语法

语法1

语法2

2.5.2 多文件

多文件

2.6 gulp.dest

gulp.dest

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

2.7 gulp.watch

2.7.1 语法

gulp.watch

---

3.常用插件

常用插件

3.1 删除文件和文件夹

• del

3.2 合并js文件

• gulp-concat

3.3 合并css文件

• gulp-concat-css

3.4 重命名文件

• gulp-rename

3.5 压缩js

• gulp-uglify

3.6 压缩css

• gulp-cssnano

3.7 压缩页面

• gulp-minify-html

3.8 压缩照片

• gulp-imagemin

3.9 自动打开浏览器

• gulp-open

3.10 gulp-notify

• gulp-notify

3.11 依赖自动加载

gulp-load-plugins

image.png

3.12 自动刷新页面

• gulp-livereload

3.13 gulp-useref

var runSequence = require('run-sequence');

gulp-html-replace