從概念上，gulp和webpack不是一個(gè)層次的東西。但是在現(xiàn)在的前端項(xiàng)目中，他們承擔(dān)的角色卻越來(lái)越類似，打包，擾碼，開(kāi)發(fā)，調(diào)試，css處理等等。
Bower vs NPM
對(duì)于處理JS依賴這一塊，Bower通過(guò)wiredep把JS壓縮到一個(gè)bundle里面，一般來(lái)說(shuō)，不需要自己來(lái)處理依賴；wiredep也相當(dāng)智能，可以通過(guò)分析bower_components里面需要添加到one_page入口的文件中。例如，Angular通過(guò)package.json中指定的main把需要的index.js放到html中，如下。
{
"name": "angular",
"version": "1.5.11",
"description": "HTML enhanced for web apps",
"main": "index.js",
...
}
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
從某種意義上，bower的這種做法更加簡(jiǎn)單和便捷，省去的程序員處理依賴的過(guò)程。但是Bower本身的能力受限，在Why we should stop using Bower一文中，提到了bower遇到的一些問(wèn)題。
- Bower不支持嵌套依賴。
- Bower本身的冗余性。
- Bower的不可靠性。
個(gè)人認(rèn)為，bower本身是有很多問(wèn)題，例如，bower的publish是任何人都可以發(fā)布，沒(méi)有驗(yàn)證正確性。也可能是因?yàn)镹PM的后繼這Yarn的包管理工具的推出，更多的開(kāi)發(fā)者更愿意在npm/yarn上進(jìn)行開(kāi)發(fā)。總之，現(xiàn)在的大趨勢(shì)更趨向于支持npm。
Webpack
可以通過(guò)https://github.com/lishan/OCProject/tree/master/Webpack下載完整例子。
為了用后臺(tái)的聲明依賴的方式進(jìn)行前端開(kāi)發(fā)，使用webpack來(lái)進(jìn)行打包將是大勢(shì)所趨。以下是在爬坑中遇到的一些問(wèn)題。
- Webpack Config可否支持es6?
使用webpack.config.babel.js代替webpack.config.js即可，這個(gè)和gulpfile.babel.js的方式類似。
- Webpack使用打包文件，如何debug?
Webpack提供一個(gè)參數(shù)devtool = 'inline-source-map'，表示在瀏覽器上查看的時(shí)候是單獨(dú)的文件所在行，一般應(yīng)用于dev環(huán)境中。
- Webpack作為一個(gè)standalone cli有哪些配置項(xiàng)？
如下是例子項(xiàng)目中提供的一些命令，使用npm run build之類的可以運(yùn)行提供的功能。
--progress 顯示進(jìn)度
--profile 顯示build時(shí)間
--bail 遇到第一個(gè)錯(cuò)誤時(shí)退出
"scripts": {
"build": "webpack --bail --progress --profile --config webpack/webpack.prod.babel.js",
"start": "npm run server",
"server": "babel-node server/app.js",
"prod": "webpack-dev-server --inline --content-base ./dist --config webpack/webpack.prod.babel.js"
},
- 如何直接用node運(yùn)行es6程序？
可以通過(guò)babel-node代替node命令。
- 常用的Webpack plugin?
通過(guò)Webpack plugin可以做gulp plugin類似的工作，所以在引言中提到他們的作用已經(jīng)越來(lái)越相似。
new HtmlWebpackPlugin({ //生成入口的html文件，可以通過(guò)模板生成，支持ejs, handlebars語(yǔ)法
template: './app/index.html'
}),
new ExtractTextPlugin("styles.css")//抽取style-loader中的到單獨(dú)文件
new CleanWebpackPlugin(['dist']),//刪除一個(gè)文件夾
new CopyWebpackPlugin([{ //拷貝一些文件
from: path.resolve(__dirname, '..', 'app', '404.html')
}]),
new UglifyJSPlugin() //JS壓縮
- Webpack-dev-server vs webpack-dev-middleware?
這兩個(gè)扮演的是gulp中一般使用一個(gè)express上部署工程。相同的是，他們生成的文件目錄都是放在內(nèi)存中的，不會(huì)像運(yùn)行webpack生成dist目錄。
webpack-dev-middleware可以和express結(jié)合，我們?cè)谑纠胁捎眠@樣的方式，在express上我們可以配置我們的RESTAPI層。和以前的項(xiàng)目類似。
- Angular的Controller例子？
給出一段示例代碼，需要注意的是$scope這樣的注入項(xiàng)必須采用這種AMD方式，否則在uglify中會(huì)有Unknow provider的錯(cuò)誤。
import angular from 'angular';
export default angular.module('basic').controller('MainCtrl',['$scope', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
}]);
