為什么是Gulp?
類似Gulp的工具锦爵，我們通常稱之為構建工具辐脖。如今最流行的兩個構建工具是Gulp和Grunt。
已經(jīng)有非常多的文章論證它們之前的異同僵娃，你隨便搜一下就知道了概作。
主要區(qū)別是你如何使用他們構建自動化工作流。與Grunt相比默怨，Gulp更加簡潔讯榕，執(zhí)行效率更高。
讓我們繼續(xù)學習Gulp并搭建一個簡單的工作流匙睹。
安裝（以mac版本為例）
1愚屁、安裝node
安裝Gulp之前你需要先安裝Node.js。（如何安裝node請百度）
2痕檬、全局安裝gulp
打開終端輸入指令
sudo npm install gulp -g
下載安裝gulp
3霎槐、在項目中創(chuàng)建gulp
首先打開要使用gulp的項目在項目中手動創(chuàng)建Gulpfile.js和package.json兩個文件
package.json文件：這個文件保存著這個項目相關信息。比如你用到的各種依賴（這里主要是插件）
Gulpfile.js文件：這個文件主要是配置和調(diào)用你所下載好的插件
然后在使用gulp項目中打開終端谆棺，如：
在終端中輸入 npm init
會出現(xiàn)
不想填就一路回車
你可以打開package.jso文件會出現(xiàn)你剛才在終端中輸入的信息栽燕，以后下的插件也可以在這看
然后就是在項目中引入gulp了
終端中輸入 npm install gulp --save-dev
安裝完畢后文件夾中出現(xiàn)
證明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設置默認執(zhí)行任務
gulp.task('default',['css','js','html'])
*數(shù)組里的參數(shù)為下面設置任務的名稱
使用gulp.task創(chuàng)建任務
1宠互、css 壓縮 合并
gulp.task('css',function () {
gulp.src('./a/*.css') // 要處理的文件路徑 如果有多個路徑也可以用數(shù)組表示
.pipe(concat('style.min.css')) //合并文件以及文件輸出后的名字
.pipe(minifyCss()) // 壓縮css文件
.pipe(gulp.dest('./b/css')) //處理完文件 輸出的路徑
});
2擎厢、js壓縮合并
gulp.task('js',function () {
gulp.src('./a/*.js') // 要合并的文件路徑 如果有多個路徑也可以用數(shù)組表示
.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
恩~~就先這樣吧。
