一柳恐、組件
1、gulp-concat 代碼合并
2乐设、gulp-autoprefixer:css代碼自動補全前綴
3讼庇、gulp-copy:文件復制
4近尚、gulp-csscomb:css代碼風格規(guī)范
5蠕啄、gulp-csslint:css代碼語法檢測工具
6、gulp-header:為代碼添加頭部
7戈锻、gulp-jscs:js代碼風格規(guī)范
8、gulp-less:less文件加載組件
9嘹承、gulp-minify-css:去除多余空格，壓縮css代碼
10骤竹、gulp-rename:文件重命名
11蒙揣、gulp-tap:文件過濾器
12、gulp-uglify:代碼丑化
13个扰、gulp-zip:代碼壓縮
14、jslint:js代碼語法檢查
二办龄、gulp
1俐填、API：http://www.gulpjs.com.cn/docs/api/
2玷禽、gulp.src,gulp.task,gulp.pipe,gulp.watch
3、gulp和webpack比較分析
Gulp 的定位是 Task Runner, 就是用來跑一個一個任務的撩银。放在以前比如我想用sass寫css, coffee寫js, 我必須手動的用相應的compiler去編譯各自的文件，然后各自minify抄邀。這時候designer給你了兩張新圖片境肾，好嘞，接著用自己的小工具手動去壓縮圖片环鲤。后來前端人不能忍了，搞出個自動化這個流程的 Grunt/Gulp, 比如你寫完代碼后要想發(fā)布production版本西剥，用一句 gulp build 就可以rm 掉 dist文件夾中以前的舊文件自動把sass編譯成css, coffee編譯成js壓縮各自的文件扎附，壓縮圖片蔫耽，生成圖片sprite拷貝minified/uglified 文件到 dist 文件夾但是它沒發(fā)解決的是 js module 的問題，是你寫代碼時候如何組織代碼結構的問題.之前大家可以用 require.js, sea.js 來 require dependency, 后來出了一個 webpack 說 我們能不能把所有的文件(css, image, js) 都用 js 來 生成依賴留夜，最后生成一個bundle呢匙铡？ 所以webpack 也叫做file bundler.同時 webpack 為了解決可以 require 不同文件的需求引入了loader, 比如面對sass文件有sass-loader, 把sass 轉換成 csscss-loader, 讓 webpack 能識別處理 cssstyle-loader, 把識別后的 css 插入到 html style中類似的識別es6 有babel-loader本來這就是 webpack 的初衷，require everything, bundle everything. 一開始 webpack 剛出來的時候大家都是把它結合著 gulp 一起用的碍粥， gulp 里面有個 gulp-webpack鳖眼，就是讓 webpack 專門去做module dependency的事情, 生成一個bundle.js文件，然后再用 gulp 去做一些其他雜七雜八minify, uglify的事情嚼摩。 后來人們發(fā)現(xiàn) webpack 有個plugins的選項钦讳， 可以用來進一步處理經(jīng)過loader 生成的bundle.js矿瘦，于是有人寫了對應的插件， 所以minify/uglify, 生成hash的工作也可以轉移到webpack本身了愿卒，擠掉了gulp這部分的市場份額缚去。 再后來大家有發(fā)現(xiàn) npm/package.json 里面的scripts 原來好好用啊，調用任務的時候就直接寫一個簡單的命令琼开，因為 gulp 也不就是各種插件命令的組合呀易结，大部分情況下越來越不需要 gulp/grunt 之類的了 ref. 所以你現(xiàn)在看到的很多新項目都是package.json里面scripts 寫了一堆，外部只需要一個webpack就夠了柜候。打個不恰當?shù)谋确礁愣瑆ebpack就像微信一樣，本來就是做聊天(module dependency)的渣刷，后來生生搞出一個微信小程序(processing files)鹦肿，大家面對簡單的需求發(fā)現(xiàn)這個比原生app方便使用啊，于是開發(fā)原生的人越來越少一樣辅柴。
