r.js結合gulp等于webpack（angular為例）
本人大學時玩dojo，開始了AMD模塊化的不歸路，工作后一直使用requirejs，感覺非常好。但是，近來隨著react的火熱，webpack成為了天下無敵的模塊化工具，能做模塊化，合并壓縮，監視等，當我看見webpack甚至還能做反向代理的時候，我整個人都不好了。我已經打算從requirejs轉向webpack了，在重構以前老代碼的時候，我想記錄下歷史。使用r.js結合gulp同樣可以實現webpack的絕大部分功能。
例子
源代碼地址： https://github.com/lewis617/daily-task
例子比較彎彎繞，不適合angular和requirejs的新手看，但是可以只關注思路。
寫的是一個任務管理系統，包括用戶系統，任務的crud等功能。
組件（components）
angular的組件指的是指令、過濾器、服務等，在這個例子中，我自己編寫了若干個組件，包括一個延遲加載工具、一個等待指令、一個確認框、一個wilddog工具模塊（里面包含了若干個我能用到的服務），都是我平時經常復用的組件，直接復制文件夾過去就能用。
還包括一些第三方的組件比如，angular-route，angular-ui等，都是直接用bower安裝的。跟我自己寫的組件原理是一樣的哈哈，只不過最后用了一個module打包起來。
模塊（modules）
就是按頁面劃分的功能模塊，包括登錄、主頁、賬戶、任務四個模塊。每個模塊都包括config路由，controller，html頁面等。
開始打包
npm install requirejs后可以使用r.js了，我們直接使用r.js命令行工具也可以，但是無法實現監視代碼變動的功能，所以我們引入gulp來實現監視功能，其他的合并壓縮均使用requirejs來實現。
gulpfile.js
var gulp = require('gulp');
var rjs = require('requirejs');
var paths = {
scripts: ['modules/**/*.js', 'modules/**/**/*.js','main.js']
};
gulp.task('build', function(cb){
rjs.optimize({
baseUrl: "./",
mainConfigFile:"./main.js",
name:'main',
out:'./dist/build-main.js'
}, function(buildResponse){
// console.log('build response', buildResponse);
cb();
}, cb);
});
// Rerun the task when a file changes
gulp.task('watch', function() {
var watcher = gulp.watch(paths.scripts, ['build']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('default', ['build','watch']); 這個gulp配置文件就寫了兩個任務，一個是build一個是watch。build任務是直接把requirejs的入口文件（main.js）輸入，指定輸出目錄，再指定配置文件（這里也是main.js），就可以合并壓縮了。是不是非常簡單。
watch任務就是監視代碼變動，如果代碼改變就自動合并壓縮一次。
那么main.js里面究竟是什么呢？先貼出代碼
main.js
'use strict';
require.config({
baseUrl:'',
paths: {
'ngRoute':'bower_components/angular-route/angular-route.min',
'domReady':'bower_components/domReady/domReady',
'text':'bower_components/text/text',
'ui-bootstrap' : 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-animate':'bower_components/angular-animate/angular-animate.min',
'routeConfig':'components/routeConfig'
}
});
require([
'domReady!',
'modules/home/main',
'modules/login/main',
'modules/account/main',
'modules/task/main'
],function(){
angular.module("myApp", [
"myApp.home",
"myApp.login",
"myApp.account",
'myApp.task'
]).run(['$rootScope', 'Auth', function($rootScope, Auth) {
// track status of authentication
Auth.$onAuth(function(user) {
$rootScope.loggedIn = !!user;
});
//alert列表以及關閉方法
$rootScope.alerts = [];
$rootScope.closeAlert = function(index) {
$rootScope.alerts.splice(index, 1);
};
}]);
angular.bootstrap(document,['myApp']);
}); 這段代碼包含兩部分，第一部分是requirejs的配置部分，定義了幾個假名而已；第二部分是requirejs的入口部分，主要是先加載一些模塊，然后用在主module里面聲明以來，最后用run方法，啟動一些你需要啟動的事件，最后的最后手動啟動angular。
多米諾骨牌
本文并不打算寫requirejs，但是可以簡單說一下，requirejs以及其他所有的模塊化工具都是一個多米諾骨牌，觸發入口文件，繼而引入所有的文件。示例程序中的組件和模塊就是這樣被引入的。將他們封裝起來用文件夾打包，在以后的復用過程中，會非常好用！
比較webpack
這些功能webpack都具備，但是requirejs是可以不全部合并的，有些文件需要延遲加載，比如angular程序絕大多數都是SPA ，如果我們一開始就把所有的文件全部合并，勢必會造成首次加載速度非常慢，那么如果我們使用requirejs就可以在改變路由時候延遲加載一些js文件，使得首次加載的js文件體積變小。使用webpack的話，恐怕不能直接實現這個功能，但是一定有相關的插件或者模塊可以實現類似的。期待webpack，也感謝歷史上那些曾經優秀的工具帶給我們的便利，讓我們碼農的工作更加輕松！