gulp入门教程
gulp是前端的自动化构建工具，gulp的出现是希望能取代grunt，成为最流行的前端自动化构建工具，它与grunt比起来有如下优势：
- 遵循代码优于配置策略：无需写一堆配置参数，维护起来更像写代码
-
易上手：它的核心API只有4个（有些地方可能会说是5个API，因为目前已经摒弃了
run方法，所以我们只要知道这4个API就行） -
速度快：各任务之间通过
nodejs的stream进行数据互通，速度更快
gulp的安装
在安装之前，请确保已经安装nodejs环境，如何安装nodejs可以查看这里搭建nodejs环境
全局安装
npm install -g gulp
通过gulp -v检查是否安装成功，安装成功后会在全局目录中找到gulp文件夹，我这里是/usr/lib/node_modules
本地安装
1. 生成package.json文件
npm init
2. 本地安装gulp
npm install --save-dev gulp
安装成功后，能在本地node_modules文件夹中看到gulp；其中--save-dev表示会将安装gulp的信息写入package.json文件的devDependencies字段中
搭建gulp项目
gulp API介绍
gulp的核心API只有4个：task、watch、src、dest；有些地方可能会说是5个API，因为目前已经摒弃了run方法，所以我们只要知道这4个API就行。
1. gulp.src(globs[, options])
gulp使用gulp.src函数读取文件，然后将文件内容转换成stream流后通过pipe传输给其他的任务，最终通过gulp.dest将处理结果写入文件中，整个流程如下：
gulp
代码例子:
// 读取src/scss/目录下scss文件
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
- globs：文件匹配模式，用来匹配文件；该函数还可以为数组，这样能有多种匹配模式来匹配文件。
- options：可选参数，一般不用，可以忽略。
这里列出globs参数的匹配规则：
-
*：匹配0到多个字符；如：
*.js：匹配js文件
*.css：匹配css文件。 -
**：匹配0到多个目录或文件；如：
src/**/*.js：匹配src/目录下所有的js文件。 -
?：匹配一个字符；如 ：
?.js：匹配a.js和b.js，不能匹配ab.js。 -
!：不匹配；如：
!*.js：不匹配js文件。 -
[字符]：匹配方括号内出现字符的任意一个；如：
[abc].js：匹配a.js、b.js、c.js；
[^abc].js：不匹配a.js、b.js、c.js。 -
(模式1|模式2)：匹配括号内任意一个模式，可与*、+、?和!作为前缀组合使用；如：
*.+(js|css)：匹配js文件或css文件
2. gulp.dest(path[, options])
将stream流写入文件
- path：写入文件的目录
- options：可选参数，一般不用，可以忽略
// 编译scss文件后，保存到build/css/目录中
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
3. gulp.task(name[, deps], fn)
gulp使用gulp.task函数创建任务
- name：任务名称
- deps：任务列表，这些任务会在当前任务运行之前被执行；当这个任务依赖于其他任务时，可以把任务写入列表中，否则可以不写。
- fn：任务函数，我们可以把要执行的代码都写在这个函数中，该参数也是可选的。
代码例子：
gulp.task('one', function(){
console.log('task one');
});
gulp.task('two', ['one'], function(){
console.log('task two');
});
gulp.task创建了one和two任务，该two任务依赖one任务，使用gulp命令执行two任务
gulp two
4. gulp.watch(glob[, opts], tasks)
gulp.watch用来监视文件内容是否变化
-
glob：文件匹配模式，规则与
gulp.src中的glob参数一样 - opts：可选参数，一般不用，可以忽略。
-
task：任务列表，当
glob匹配的文件有变化时，就会执行该列表中的任务。
代码例子：
gulp.watch('src/**/*.+(scss|js)', ['sass', 'js']);
监控src/目录下所有的scss文件和js文件，如果有文件内容发送变化，则顺序执行sass、js任务。
搭建项目例子
我们把项目的文件放在本地src/文件夹中，项目结构为：
├── gulpfile.js
├── node_modules
├── ...
├── package.json
└── src
├── js
│ ├── a.js
│ └── b.js
└── scss
├── c.scss
└── d.scss
gulpfile.js内容：
var gulp = require('gulp'),
sass = require('gulp-sass'),
jshint = require('gulp-jshint'),
cssmin = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
// 检查、编译scss文件后，保存到build/css中
gulp.task('sass', function(){
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
});
// 检查js语法后，保存到build/js中
gulp.task('js', function(){
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(gulp.dest('build/js'));
});
// 监听文件变化
gulp.task("watch", function(){
// 监听src目录下的scss、js文件
gulp.watch('src/**/*.+(scss|js)', ['sass', 'js']);
});
// 压缩css、js文件
gulp.task('dist', ['sass', 'js'], function(){
// 压缩css文件
gulp.src('build/css/*.css')
.pipe(cssmin())
.pipe(rename({
suffix: ".min", // 文件名后缀加上".min"
})).pipe(gulp.dest('dist/css'));
// 压缩js文件
gulp.src('build/js/*.js')
.pipe(uglify())
.pipe(rename({
suffix: ".min", // 文件名后缀加上".min"
})).pipe(gulp.dest('dist/js'));
});
gulp.task('default', ["sass", "js", "watch"]);
首先我们要安装项目需要的gulp插件
npm install node-sass gulp-sass gulp-jshint gulp-clean-css gulp-uglify gulp-rename --save-dev
安装好之后，执行gulp命令
gulp
会在build/文件夹下产生：build/js/a.js、build/js/b.js和build/css/c.css、build/css/d.css；
gulp dist
会在dist/文件夹下生成dist/js/a.min.js、dist/js/b.min.js、dist/css/c.min.css、dist/css/d.min.css。
