gulp是一個流式構建系統（把源代碼生成用戶可以使用的目標的自動化工具），是基於Node.js實現構建，開發者可以使用它在網站開發過程中自動執行常見任務，比如編譯預處理CSS，壓縮JavaScript，轉化es6語法等。
gulp本身雖然不能完成很多任務，但它有大量插件可用，開發者可以訪問插件頁面或者在npm搜索gulpplugin就能看到各式各樣的插件。針對自己需要實現的功能尋找合適的插件。
gulp與grunt對比
- grunt定義任務的時候需要有大量的配置，會引用大量你實際上並不需要的對象屬性。gulp在同樣的任務裏也許只有幾行就可以實現了。
- grunt會比gulp更加頻繁地操作文件系統，所以使用數據流的Gulp總是比Grunt快。對於一個小的LESS文件，gulpfile.js通常需要6ms，而gruntfile.js則需要大概50ms——慢8倍多。這只是個簡單的例子，對於長的文件，這個數字會增加得更顯著。
gulp與webpack對比
- gulp與webpack的對比（側重點不一樣），並沒有太多的可比性。gulp是一種能夠優化前端的開發流程的工具，而webPack是一種模塊化的解決方案
- gulp側重於前端開發的整個過程的控制管理（像是流水線），我們可以通過給gulp配置不同的task（比如啓動server、sass/less預編譯、文件的合併壓縮等等）來讓gulp實現不同的功能，從而構建整個前端開發流程
- gulp是對整個過程進行控制，所以在其配置文件（gulpfile.js）中配置的每一個task，對項目中該task所配置路徑下所有的資源都可以管理。
- webpack有人也稱之爲模塊打包機，由此也可以看出webpack更側重於模塊打包。webpack管理資源的方式和gulp是不同的，它是根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源(如下圖)。
glup的一些應用
一、把es6轉化es5
主要插件：gulp-babel
步驟：
1.安裝 Gulp
npm install gulp --save-dev
2.安裝gulp-babel，babel-core 和babel-preset-es2015
npm install [email protected] babel-core babel-preset-es2015 --save-dev
注：gulp-babel版本不能超過8.0.0，否則會error
3.gulp配置：
在根目錄下新增gulpfile.js文件，並創建task
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/*.js")// ES6 源碼存放的路徑
.pipe(babel())
.pipe(gulp.dest("dist")); //轉換成 ES5 存放的路徑
});
4.babel配置：
在根目錄下新增 .babelrc。內容如下：
{
"presets": ["es2015"]
}
5.es6文件測試：
在根目錄下的src文件夾下新增testBabel.js文件。內容如下：
var a = `test es6`;
6.執行gulp
gulp
7.在dist文件夾下找到轉化之後的js文件，es6模板字符串的語法被轉化爲es5語法
二、css前綴修正
主要插件：gulp-postcss、autoprefixer
步驟：
1.安裝gulp-postcss插件
npm install gulp-postcss --save-dev
2.安裝autoprefixer插件
npm install autoprefixer --save-dev
3.安裝browsers
npm install -g bower
4.在根目錄下新增gulpfile.js文件，並創建task：
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer');
gulp.task('autoprefixer', function(cb) {
gulp.src('./src/css/test.css')
//修正css前綴
.pipe(postcss())
.pipe(gulp.dest('./dist/css'))
cb();
});
5.css測試文件
在根目錄下的src/css文件夾下創建test.css。內容如下：
div{
display: flex;
}
6.在根目錄下的src/css文件夾下創建postcss.config.js。內容如下：
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
7.執行gulp autoprefixer
gulp autoprefixer
8.在build/css目錄下找到test.css文件，此時css樣式被自動加上了不同瀏覽器內核的兼容寫法
