[toc]
简介
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快
1 | Gulp官网 http://gulpjs.com/ |
工作流程
gulp的使用流程一般是这样子的:
- 通过gulp.src()方法获取到我们想要处理的文件流,22. 把文件流通过pipe方法导入到gulp的插件中
- 把经过插件处理后的流再通过pipe方法导入到gulp.dest()中
- gulp.dest()方法则把流中的内容写入到文件中
==注意:== 给gulp.dest()传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名。==生成的文件名是由导入到它的文件流决定的==
安装
gulp基于node.js,要通过nodejs的npm安装gulp,所以先要安装nodejs环境
- 全局方式:npm install -g gulp
- gulp的项目中单独安装一次:npm install gulp
- 安装的时候把gulp写进项目package.json文件的依赖中:npm install --save-dev gulp
在全局安装gulp后,还需要在项目中本地安装一次,是为了版本的灵活性,仅供参考
开始使用gulp
- 建立gulpfile.js文件
此时我们的目录结构是这样子的:
1 | ├── gulpfile.js |
最简gulpfile.js:
1 | var gulp = require('gulp'); |
- 运行gulp任务
切换到存放gulpfile.js文件的目录
- 执行gulp命令:会执行任务名为default的默认任务
- gulp task1:执行task1任务
gulpfile.js文件
全局配置config:当gulpfile.js太大时就不好维护了,此时可以将需要在gulpfile中引用的参数,放到这里,包括一些路径,功能的开关等,如:
1 | module.exports = { |
意下这里使用了module.exports,这是nodejs的语法。在gulpfile中将会用require引用config。
1 | var config = require('./config');//加载项目配置 |
使用举例:
1 | //引入gulp,项目文件中安装的gulp的引入方式 |
gulp的API介绍
更多API介绍: http://www.gulpjs.com.cn/docs/api/
gulp.src()
gulp.src()方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息
1 | gulp.src(globs[, options]) |
- 当我们没有在gulp.src()方法中配置base属性时,base的默认值为通配符开始出现之前那部分路径,例如:
1 | gulp.src('app/src/**/*.css') //此时base的值为 app/src |
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件:
1 | * 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾 |
==注意:== 不能在数组中的第一个元素中使用排除模式
使用举例:
1 | //使用数组的方式来匹配多种文件 |
gulp.dest()
gulp.dest()方法是用来写文件的,其语法为:
1 | gulp.dest(path[,options]) |
- 生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径
gulp.task()
gulp.task方法用来定义任务,内部使用的是Orchestrator,其语法为:
1 | gulp.task(name[, deps], fn) |
使用举例:
1 | gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务 |
- 如果任务相互之间没有依赖,任务会按你书写的顺序来执行
- 如果有依赖的话则会先执行依赖的任务
- 如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务
gulp.watch()
gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。其语法为
1 | gulp.watch(glob[, opts], tasks) |
1 | gulp.task('uglify',function(){ |
一些常用的gulp插件
自动加载插件pulp-load-plugins
- 这个插件能自动帮你加载package.json文件里的gulp插件
- gulp-load-plugins是通过package.json文件来加载插件
- gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件,而是在我们需要用到某个插件的时候,才去加载那个插件
- 定义及启用
1 | var gulp = require('gulp'); |
- 使用举例:
1 | plugins.rename //gulp-rename插件的使用 |
重命名插件gulp-rename
1 | gulp.task('rename', function () { |
js文件压缩插件gulp-uglify
1 | var gulp = require('gulp'), |
css文件压缩插件gulp-minify-css
1 | var gulp = require('gulp'), |
html文件压缩插件gulp-minify-html
1 | var gulp = require('gulp'), |
js代码检查插件
1 | var gulp = require('gulp'), |
文件合并插件gulp-concat
1 | var gulp = require('gulp'), |
var gulp = require(‘gulp’);
var imagemin = require(‘gulp-imagemin’);
var pngquant = require(‘imagemin-pngquant’); //png图片压缩插件
gulp.task(‘default’, function () {
return gulp.src(‘src/images/*’)
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant来压缩png图片
}))
.pipe(gulp.dest(‘dist’));
});