1.gulp简介
1.1 gulp是什么
gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp
1.2 官网地址
1.3 特点
- 易于使用
- 通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
- 构建快速
- 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
- 易于学习
- 通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
- 插件高质
- gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
2.gulp使用引导
2.1 快速开始
- 全局安装
npm install –g gulp
- 安装到本地
npm install gulp –save-dev
- 新建gulpfile.js
- 编写文件内容并运行
var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world');
});
2.2 核心API
我们首先来说一下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 删除文件和文件夹
3.2 合并js文件
3.3 合并css文件
3.4 重命名文件
3.5 压缩js
3.6 压缩css
3.7 压缩页面
3.8 压缩照片
3.9 自动打开浏览器
3.10 gulp-notify
3.11 依赖自动加载
gulp-load-plugins
image.png
3.12 自动刷新页面
3.13 gulp-useref
var runSequence = require('run-sequence');
gulp-html-replace
网友评论