Minifying ionic source code

无兴趣看文章的可以直接去下载脚本执行

检查错误

1、创建文件(可跳过)

hooks/before_prepare/02_jshint.js

文件内容:

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');
var jshint = require('jshint').JSHINT;
var async = require('async');

var foldersToProcess = [
    'js'
];

foldersToProcess.forEach(function(folder) {
    processFiles("www/" + folder);
});

function processFiles(dir, callback) {
    var errorCount = 0;
    fs.readdir(dir, function(err, list) {
        if (err) {
            console.log('processFiles err: ' + err);
            return;
        }
        async.eachSeries(list, function(file, innercallback) {
            file = dir + '/' + file;
            fs.stat(file, function(err, stat) {
                if(!stat.isDirectory()) {
                    if(path.extname(file) === ".js") {
                        lintFile(file, function(hasError) {
                            if(hasError) {
                                errorCount++;
                            }
                            innercallback();
                        });
                    } else {
                        innercallback();
                    }
                } else {
                    innercallback();
                }
            });
        }, function(error) {
            if(errorCount > 0) {
                process.exit(1);
            }
        });
    });
}

function lintFile(file, callback) {
    console.log("Linting " + file);
    fs.readFile(file, function(err, data) {
        if(err) {
            console.log('Error: ' + err);
            return;
        }
        if(jshint(data.toString())) {
            console.log('File ' + file + ' has no errors.');
            console.log('-----------------------------------------');
            callback(false);
        } else {
            console.log('Errors in file ' + file);
            var out = jshint.data(),
            errors = out.errors;
            for(var j = 0; j < errors.length; j++) {
                console.log(errors[j].line + ':' + errors[j].character + ' -> ' + errors[j].reason + ' -> ' +
errors[j].evidence);
            }
            console.log('-----------------------------------------');
            callback(true);
        }
    });
}

2、赋予执行权限(可跳过):

chmod +x hooks/before_prepare/02_jshint.js

3、安装依赖组件(可跳过)

npm install jshing --dev-save
npm install async --dev-save

4、执行ionic build android检查错误,有错修改,直至无措

5、安装cordova-uglify

npm install cordova-uglify --dev-save

6、赋予生成的hooks/after_prepare/uglify.js可执行权限:

chmod +x hooks/after_prepare/uglify.js 

7、大坑

打开uglify.js文件,查看这几段代码:

var dependencyPath = path.join(cwd, 'node_modules', 'cordova-uglify', 'node_modules');
// cordova-uglify module dependencies
var UglifyJS = require(path.join(dependencyPath, 'uglify-js'));
var CleanCSS = require(path.join(dependencyPath, 'clean-css'));
var ngAnnotate = require(path.join(dependencyPath, 'ng-annotate'));
var Imagemin = require(path.join(dependencyPath, 'imagemin'));

这个表示的是该组件需要的依赖组件uglify-jsclean-cssng-annotateimagemin,自行检查一下,这几个组件在你工程中的路径,确保路径是对的
否则,你会遇到类似下面的错误:

module.js:327
    throw err;
    ^

Error: Cannot find module 'src/to/project/node_modules/cordova-uglify/node_modules/uglify-js'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object. (src/to/project/hooks/after_prepare/uglify.js:11:16)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:429:10)
Error: Hook failed with error code 1: src/to/project/hooks/after_prepare/uglify.js

uglify.js 有如下一段代码:

if (!isRelease) {
  return;
}

根据需要,自行注释。

执行命令:

ionic build android --release

如果发现有类似于以下的日志,则恭喜你:

uglifying js file src/to/project/platforms/android/assets/www/js/app.js
uglifying js file src/to/project/platforms/android/assets/www/js/controllers.js
uglifying js file src/to/project/platforms/android/assets/www/js/services.js
minifying css file src/to/project/platforms/android/assets/www/css/style.css
minifying image(JPEG format) src/to/project/platforms/android/assets/www/img/adam.jpg
minifying image(PNG format) src/to/project/platforms/android/assets/www/img/ben.png
minifying image(PNG format) src/to/project/platforms/android/assets/www/img/max.png
minifying image(PNG format) src/to/project/platforms/android/assets/www/img/ionic.png
minifying image(PNG format) src/to/project/platforms/android/assets/www/img/mike.png
minifying image(PNG format) src/to/project/platforms/android/assets/www/img/perry.png

如果有错,修改去吧。

你可能感兴趣的:(Minifying ionic source code)