2016/04/28

如何 uglify 你的 RequireJS



應該有三種方法

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

首先先準備好你的 build.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

gulp.task('rjs', shell.task(['node r.js -o build.js']));

這樣就會把專案用到的所有 js 檔放到 build.js 中的 out 路徑,如果你不想要 uglify 的話 可以改用

gulp.task('rjs', shell.task(['node r.js -o build.js optimize=none']));





第三種方法:

這種方法更簡單了你只要安裝 reuqirejs

npm install reuqirejs --save-dev


build.js 改成下面這種格式

module.exports = {
    ...
};


新增 gulp 的 task 就完成了

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 端載入,就可以解決這個問題了

沒有留言:

張貼留言