为什么是Gulp?
类似Gulp的工具，我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。
已经有非常多的文章论证它们之前的异同，你随便搜一下就知道了。
主要区别是你如何使用他们构建自动化工作流。与Grunt相比，Gulp更加简洁，执行效率更高。
让我们继续学习Gulp并搭建一个简单的工作流。
安装（以mac版本为例）
1、安装node
安装Gulp之前你需要先安装Node.js。（如何安装node请百度）
2、全局安装gulp
打开终端输入指令
sudo npm install gulp -g
下载安装gulp
3、在项目中创建gulp
首先打开要使用gulp的项目在项目中手动创建Gulpfile.js和package.json两个文件
package.json文件：这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
Gulpfile.js文件：这个文件主要是配置和调用你所下载好的插件
然后在使用gulp项目中打开终端，如：
在终端中输入 npm init
会出现
不想填就一路回车
你可以打开package.jso文件会出现你刚才在终端中输入的信息，以后下的插件也可以在这看
然后就是在项目中引入gulp了
终端中输入 npm install gulp --save-dev
安装完毕后文件夹中出现
证明gulp依赖加载完毕，可以在项目中使用了
简单使用gulp
如果想使用某种功能，得先加载gulp插件
如
终端下载插件 npm install XXXXXX(以下名称)--save-dev
gulp-minify-css （css压缩）
gulp-minify-html （html压缩）
gulp-rename （重命名）
gulp-uglify （js文件压缩）
gulp-concat （代码合并）
gulp-jshint （js代码检测）
gulp-replace （路径替换）
and soon on······
插件下载完毕后
首先打开Gulpfile.js
使用require 引入gulp和各种插件
var gulp = require('gulp'),
minifyCss = require('gulp-minify-css'),
minifyHtml = require('gulp-minify-html'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
revCollector = require('gulp-rev-collector'),
replace = require('gulp-replace');
default设置默认执行任务
gulp.task('default',['css','js','html'])
*数组里的参数为下面设置任务的名称
使用gulp.task创建任务
1、css 压缩 合并
gulp.task('css',function () {
gulp.src('./a/*.css') // 要处理的文件路径 如果有多个路径也可以用数组表示
.pipe(concat('style.min.css')) //合并文件以及文件输出后的名字
.pipe(minifyCss()) // 压缩css文件
.pipe(gulp.dest('./b/css')) //处理完文件 输出的路径
});
2、js压缩合并
gulp.task('js',function () {
gulp.src('./a/*.js') // 要合并的文件路径 如果有多个路径也可以用数组表示
.pipe(concat('demo.min.js')) //合并文件以及文件输出后的名字
.pipe(uglify()) // 压缩js文件
.pipe(gulp.dest('./b/js')) //处理完文件 输出的路径
})
3、html 压缩
gulp.task('html',function () {
var options ={
collapseWhitespace: true,//压缩HTML
removeComments: true,//清除HTML注释
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}
gulp.src('./a/*.html')
.pipe(minifyHtml(options))
.pipe(gulp.dest('./b'))
})
Node中的通配符
通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。
使用通配符，计算机检查文件名和路径进行匹配。
大部分时候，我们只需要用到下面4种匹配模式：
1、 *.scss：*号匹配当前目录任意文件，所以这里*.scss匹配当前目录下所有scss文件
2、 */.scss：匹配当前目录及其子目录下的所有scss文件。
3、!not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
4、*.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。
更多参考：http://www.tuicool.com/articles/FJVNZf
恩~~就先这样吧。
