前段時間做個項目，前期順風(fēng)順?biāo)四伲S著各種需求插入到項目中來涯呻，包括后期項目的一些修改，代碼冗余度越來越高腻要，頁面訪問速度也受到一些影響复罐，尤其是對某個功能的修改，可能需要找很久雄家，個人表示很痛苦呀-_-!
因此決定跳出來去找尋不會再這么痛苦下去的技術(shù)效诅，于是找到了它們！
本文主要來介紹Webpack和Gulp以及Grunt咳短，它們之間有什么區(qū)別填帽？它們?nèi)绾问褂茫恳约八鼈兪侨绾螢槲覀冺椖块_發(fā)提高效率的咙好？
以下是最近一段時間研究的一些心得體會篡腌，拿出來跟大家分享一下~
1. Gulp
gulp 是基于Nodejs的自動任務(wù)運(yùn)行器，能自動化的完成javascript/coffee/sass/less/html/image/css 等文件的的測試勾效、檢查嘹悼、合并、壓縮层宫、格式化杨伙、瀏覽器自動刷新、部署文件生成萌腿，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟限匣。
通俗來講，gulp就是一個處理項目文件的工具毁菱，通過gulp建立一些任務(wù)米死，當(dāng)我們對相應(yīng)文件進(jìn)行修改之后，會自動觸發(fā)這些任務(wù)贮庞，自動的對文件進(jìn)行了處理峦筒。不用我們手動的、反復(fù)的去處理這些文件窗慎，大大提高了我們的工作效率物喷。
舉個栗子：
現(xiàn)在已經(jīng)開始用less來寫樣式（less的優(yōu)點很多卤材，寫起來要比css快很多，在此不多說峦失，盆友們可以上網(wǎng)了解less）扇丛，在html使用這些樣式，需要用一些工具將.less文件轉(zhuǎn)換為.css文件尉辑，如果用Sublime敲代碼的盆友可能知道它有插件自動生成css晕拆，但是.less和生成的.css文件在同一目錄下。
這只是文件比較少的情況材蹬，如果文件比較多呢实幕？是不是也是一件很頭疼的事情...
下面，上代碼帶你用gulp解決令人頭疼的問題 ^ _ ^
前提我們已經(jīng)創(chuàng)建好一個nodejs項目堤器，這里我們安裝兩個插件: gulp 和 gulp-less(編譯less文件)
npm install gulp --save-devnpm install gulp-less --save-dev
新建gulpfile.js文件
// 說明：gulpfile.js是gulp項目的配置文件昆庇，放項目根目錄即可。
// 導(dǎo)入工具包
var gulp = require('gulp'),
less = require('gulp-less');
// 定義一個testLess任務(wù)（自定義任務(wù)名稱）
gulp.task('testLess', function () {
gulp.src('public/stylesheets/style.less') //該任務(wù)針對的文件
.pipe(less()) //該任務(wù)調(diào)用的模塊
.pipe(gulp.dest('public/css')); //將會在public/css下生成style.css
});
接下來闸溃，我們只需要在命令行輸入gulp testLess我們就可以在public/css下看到生成的style.css文件了
but 這顯然是我們手動來生成的整吆，我們需要的是讓它自動生成，那好吧辉川，現(xiàn)在我們需要一個東西能夠來監(jiān)聽less文件的修改表蝙，然后自動去執(zhí)行任務(wù)
gulp.task('testWatch', function () {
gulp.watch('public/stylesheets/*.less', ['testLess']); //當(dāng)所有l(wèi)ess文件發(fā)生改變時，調(diào)用testLess任務(wù)
});
好了乓旗，現(xiàn)在我們運(yùn)行gulp testWatch當(dāng)修改了less文件保存府蛇，會看到css文件也跟著變了^ _ ^
補(bǔ)充一點，我們在一個項目里使用gulp的時候屿愚，我們想啟動項目汇跨，就自動啟動了testWatch，而不是啟動項目之后妆距，我們還要手動啟動testWatch穷遂，那么，加上下面代碼：
gulp.task('default',['testWatch']); // 指定gulp默認(rèn)啟動任務(wù)
2. Grunt
Grunt 基于 Node.js 娱据，用 JS 開發(fā)蚪黑，這樣就可以借助 Node.js 實現(xiàn)跨系統(tǒng)跨平臺的桌面端的操作，例如文件操作等等中剩。此外忌穿，Grunt 以及它的插件們，都作為一個 包 咽安，可以用 NPM 安裝進(jìn)行管理伴网。
Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js蓬推。然后開始安裝 Grunt妆棒。
Grunt 可以幫助我們減少很多的工作量，比如：檢查每個 JS 文件語法、合并兩個 JS 文件糕珊、將合并后的 JS 文件壓縮动分、將 SCSS 文件編譯等，包括我們上面提到的試用gulp將.less文件轉(zhuǎn)換為.css文件红选，grunt也是可以實現(xiàn)的澜公，下面我們用grunt實現(xiàn)gulp的轉(zhuǎn)換less的功能：
和gulp一樣，首先我們先安裝grunt 以及 grunt-contrib-less
npm install grunt --save-dev
npm install grunt-contrib-less --save-dev
新建Gruntfile.js文件
使用grunt喇肋，主要有三塊代碼：任務(wù)配置代碼坟乾、插件加載代碼、任務(wù)注冊代碼蝶防。
任務(wù)配置代碼就是調(diào)用插件配置一下要執(zhí)行的任務(wù)和實現(xiàn)的功能甚侣，插件加載代碼就是把需要用到的插件加載進(jìn)來，任務(wù)注冊代碼就是注冊一個 task间学，里面包含剛在前面編寫的任務(wù)配置代碼殷费。
需要注意的是，grunt的配置代碼放到
module.exports = function(grunt) {
...
};
里面低葫，沒有為什么...
// 1. 任務(wù)配置代碼
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//less插件配置
less: {
main: {
options: {
compress: false,
yuicompress: false
},
files: {
'./public/css/global.css': './public/less/*.less'
}
}
}
});
// pkg 功能是讀取 package.json 文件详羡，并把里面的信息獲取出來，方便在后面任務(wù)中應(yīng)用
// 2. 插件加載代碼
grunt.loadNpmTasks('grunt-contrib-less');
// 3. 任務(wù)注冊代碼
grunt.registerTask('lessjs', ['less']);
到這一步嘿悬，我們已經(jīng)做好grunt配置文件了,控制臺輸入grunt lessjs即可實現(xiàn)同gulp一樣的效果实柠。
同樣的，這一樣使我們手動生成的善涨，grunt能像gulp一樣自動為我們生成嗎主到？答案是肯定的，grunt同樣也有watch躯概。
首先安裝插件grunt-contrib-watch
npm install grunt-contrib-watch --save-dev
在任務(wù)配置代碼添加一個watch任務(wù)：
watch: {
lesses: {
files: ['./public/less/*.less'],
tasks: ['less']
}
}
同樣需要加載插件代碼登钥，任務(wù)注冊代碼：
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
3. grunt 與 gulp區(qū)別
上面的學(xué)習(xí)，我們知道 grunt 和 gulp 能實現(xiàn)同樣的功能娶靡，那么它們有什么區(qū)別牧牢？分別在什么場景下使用呢？
在我看來姿锭，其實 grunt 和 gulp 兩個東西的功能是一樣的塔鳍，只不過是任務(wù)配置 JS 的語法不同，Gulp配置文件的寫法更加通俗易懂呻此，上手更快轮纫。但是 Gulp 的插件感覺不如 Grunt，只能滿足基本的工作需要焚鲜；而Grunt 官方提供了一些常見的插件掌唾，滿足大部分日常工作放前，而且可靠值得信賴，而 Gulp 好像沒有太多官方出品糯彬，各種插件不太規(guī)范凭语。
至于在什么場景下使用哪個？這個看個人需要吧撩扒，grunt 遠(yuǎn)遠(yuǎn)不止上面寫的那么簡單似扔，如果gulp能滿足平時工作需要，可以使用gulp搓谆。
總之炒辉，用網(wǎng)友的話說，Grunt 和 Gulp 就像 iPhone 與 Android 一樣泉手，一個質(zhì)量高學(xué)習(xí)難一點辆脸，一個學(xué)起來簡單但是有點那個，你懂得螃诅。
