2016/04/28

如何 uglify 你的 RequireJS



應該有三種方法

1. gulp-requirejs-optimize
2. gulp-shell + r.js
3. requirejs

首先先準備好你的 build.js

內容類似這樣
```js
({
baseUrl: "public", // site root path
paths: {
"angularRoute": "empty:",
"angularLocalStorage": "empty:",
"angularUiBootstrap": "empty:",
"angularUiRouter": "empty:",
"angularFileUploadShim": "empty:",
"angularFileUpload": "empty:",
"angularLoadingBar": "empty:",
"angularDialog": "empty:",
"underscore": "empty:",
"restangular": "empty:",
// use local file to prevent requireJS optimizer error
"text": "js/module/text.min",
"angularLocale": "empty:"
},
exclude: [
"angular",
"angularRoute",
"angularLocalStorage",
"angularUiBootstrap",
"angularUiRouter",
"angularFileUploadShim",
"angularFileUpload",
"angularLoadingBar",
"angularDialog",
"underscore",
"restangular",
"text"
],
name: "js/config",
out: "./_public/js/main-built.min.js",
generateSourceMaps: false,
preserveLicenseComments: false
})
```


第一種方法:

由於我的 mba 記憶體只有 4G 在安裝套件時會 out of memory...所以無法確認東西是否正確



第二種方法:

首先先將 r.js 下載下來 v2.2.0載點
安裝 gulp-shell
```
npm install gulp-shell --save-dev
```

在 gulpfile.js 新增一個專門的 task
```js
gulp.task('rjs', shell.task(['node r.js -o build.js']));
```
這樣就會把專案用到的所有 js 檔放到 build.js 中的 out 路徑,如果你不想要 uglify 的話 可以改用
```js
gulp.task('rjs', shell.task(['node r.js -o build.js optimize=none']));
```




第三種方法:

這種方法更簡單了你只要安裝 reuqirejs
```
npm install reuqirejs --save-dev
```

build.js 改成下面這種格式
```js
module.exports = {
...
};
```

新增 gulp 的 task 就完成了
```js
gulp.task('rjs', function(cb) {
var config = require('./build.js');
rjs.optimize(config, function(buildResponse){
// console.log('build response', buildResponse);
cb();
}, cb);
});
```


如果在 optimize 途中遇到類似
```
Error: TypeError: Cannot read property 'normalize' of undefined
```
請記得把你的 text 套件改由 local 端載入,就可以解決這個問題了

沒有留言:

張貼留言