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.<anonymous> (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

如果有错,修改去吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,287评论 25 708
  • 错误:1000 SQLSTATE: HY000 (ER_HASHCHK)消息:hashchk 错误:1001 SQ...
    灼灼2015阅读 23,656评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,765评论 18 399
  • 来自西安的小刘【践行】第127天 我记得前段时间有一篇很火的文章《远离垃圾人》。垃圾人的一个特点就是爱抱怨。随时随...
    德罗巴007_592阅读 683评论 4 15