利用UglifyJS和uglifycss打包前端js和css

前言

在用webpack兼容了许久以后，我们终于放弃了这个垃圾东西，只要不是用到框架的代码打包全部不用webpack。这里我分别讲解我们js和css打包所用到的工具和细节。

javascript

方法一：

全局安装UglifyJS

npm install uglify-js -g

单个打包文件

uglifyjs index.js -m -o index.min.js

打包多个文件

uglifyjs index.js test.js -m -o index.min.js

参数配置

  --source-map                  指定输出的文件产生一份sourcemap 
  --source-map-root             此路径中的源码编译后会产生sourcemap
  --source-map-url              放在//#sourceMappingURL的sourcemap路径.  默认是 
                                --source-map传入的值.
  --source-map-include-sources  如果你要在sourcemap中加上源文件的内容作为sourcesContent属性，
                                就传这个参数吧。
  --source-map-inline           把sourcemap以base64格式附在输出文件结尾
  --in-source-map               输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
                                假如该sourcemap包含在js内，请指定"inline"。
  --screw-ie8                   是否要支持IE6/7/8。UglifyJS默认不兼容IE。
  --support-ie8                 是否要支持IE6/7/8，等同于在`compress`, `mangle` 和
                                 `output`选项中都设置`screw_ie8: false`
  --expr                        编译一个表达式，而不是编译一段代码（编译JSON时用）
  -p, --prefix                  忽略sourcemap中源码的前缀。例如`-p 3`会干掉文件名前面3层目录
                                以及保证路径是相对路径。你也可以指定`-p relative`,让UglifyJS
                                自己计算输出文件、sourcemap与源码之间的相对路径。
  -o, --output                  输出文件，默认标准输出(STDOUT)
  -b, --beautify                美化输出/指定输出 选项
  -m, --mangle                  Mangle的名字，或传入一个mangler选项.
  -r, --reserved                mangle的例外，不包含在mangling的名字
  -c, --compress                是否启用压缩功能（true/fasle），或者传一个压缩选项对象, 例如 
                                `-c 'if_return=false,pure_funcs=["Math.pow","console.log"]'`，
                                `-c`不带参数的话就是用默认的压缩设置。
  -d, --define                  全局定义
  -e, --enclose                 所有代码嵌入到一个大方法中，传入参数为配置项
  --comments                    保留版权注释。默认保留Google Closure那样的，保留JSDoc-style、
                                包含"@license" 或"@preserve"字样的注释。你也可以传下面的参数:
                                - "all" 保留所有注释
                                - 正则（如`/foo/`、`/^!/`）保留匹配到的。要注意，如果启用了压
                                缩，因为会移除不可达代码以及压缩连续声明，因此不是*所有*注释都能
                                保留下来。
  --preamble                    在输出文件开头插入的前言。你可以插入一段注释，例如版权信息。
                                这些不会被编译，但sourcemap会改成当前的样子。
  --stats                       在STDERR中显示操作运行时间。
  --acorn                       用 Acorn解析。
  --spidermonkey                假如输入文件是 SpiderMonkey AST 格式(像JSON).
  --self                        把UglifyJS2本身也构建成一个依赖包
                                (等同于`--wrap=UglifyJS --export-all`)
  --wrap                        所有代码嵌入到一个大函数中,让"exports"和"global"变量有效，
                                你需要传入一个参数指定模块被浏览器引入时的名字。
  --export-all                  只当`--wrap`时有效,告诉UglifyJS自动把代码暴露到全局。
  --lint                        显示一些可视警告
  -v, --verbose                 Verbose
  -V, --version                 打印版本号.
  --noerr                       不要为-c,-b 或 -m选项中出现未知选项而抛出错误。
  --bare-returns                允许返回函数的外部。当最小化CommonJs模块和Userscripts时，
                                可能匿名函数会被.user.js引擎调用立即执行（IIFE）
  --keep-fnames                 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
  --reserved-file               要保留的文件的名字
  --reserve-domprops            保留（绝大部分？）DOM的属性，当--mangle-props
  --mangle-props                混淆属性，默认是`0`.设置为`true`或`1`则会混淆所有属性名。
                                设为`unquoted`或 `2`则只混淆不在引号内的属性。`2`时也会让
                                `keep_quoted_props` 美化选项生效，保留括号内的属性；让压缩选项
                                的`properties`失效，阻止覆写带点号（.）的属性。你可以通过在命令
                                中明确设置来覆写它们。
  --mangle-regex                混淆正则，只混淆匹配到的属性名。
  --name-cache                  用来保存混淆map的文件
  --pure-funcs                  假如返回值没被调用则可以安全移除的函数。 
                                例如`--pure-funcs Math.floor console.info`(需要设置 `--compress`)

这个方法特别简单，不过也有很多局限性，比如，我们需要加个需求，打包好的文件加上日期，如果用这个就不好实现，当然我们还有第二种方法。

方法二：

1.本地新建一个js文件，我设为min.js，然后安装uglify-js

yarn add uglify-js

现在我们就可以开始编写代码。我们先把需要的模块引进来。

const fs = require('fs'),
      UglifyJS = require('UglifyJS'),
      code = fs.readFileSync('./main.js', 'utf-8');

这里需要提醒，特别是不要傻傻的抄别人写的，我记得我找到的都是

var result = uglifyjs.minify("../test.js",{
 mangle:false
});

试了一下别人写的，结果和想象的不一样，难道是我运气的问题？然后特地去了npm的官方网站看了下，第一个参数是哪个傻逼开始这样写的，然后又有多少傻逼没试过就抄别人的又放出来教育别人。果然看别人的不如自己去看官方的。

官方的写法是这样的，在没有需要外部js的时候

var result = UglifyJS.minify({"foo.js" : "if (0) else console.log(1);"});

如果需要外部文件可以这样

var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"));

第二个参数可以接一个obj配置，具体的可以去npm官方网站查看。

2.增加时间

也就是自己把当前时间放到文件名中间

function getCurrentDate(format) {	  var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth();//得到月份
    var date = now.getDate();//得到日期
    var day = now.getDay();
    var hour = now.getHours();//得到小时
    var minu = now.getMinutes();//得到分钟
    var sec = now.getSeconds();//得到秒
    month = month + 1;
     if (month < 10) month = "0" + month;
     if (date < 10) date = "0" + date;
     if (hour < 10) hour = "0" + hour;
     if (minu < 10) minu = "0" + minu;
     if (sec < 10) sec = "0" + sec;
     var time = "";	 //精确到天
     if(format==1){
         time = year + "-" + month + "-" + date;
     }	  //精确到分
     else if(format==2){
         time = year +  month +  date+ "_" + hour + minu +sec;
     }
     return time;
}

注意，如果用-或者：会报错，具体报错是哪个我没有去细找，有时间的可以自己去试。

3.增加多文件，不修改代码

可是我们还有个不确定的事，你并不能确定要打包的js文件是哪些，是单个还是多个，总不能每次都去修改代码，这样很麻烦，所以我们这些做，利用node的强大。

var params = process.argv.slice(2);
let data=[];
for (let i=0;i

这样我们的js压缩工具就做好了

var params = process.argv.slice(2);
var path=require('path');
const fs = require('fs'),
    UglifyJS = require('uglify-js');

let data=[];
for (let i=0;i

然后为了那些不懂node的，我把运行的命令也放出来

css

css就和js不同，所以我们需要再安装其他插件

方法一

npm install uglifycss –g

打包也是命令行

uglifycss index.css > index.min.css

方法二

同样，我们还是要在打包好的css文件加入时间，这一次我们不需要再对外部文件进行处理，css有很好的支持，官方这样写的

var uglifycss = require('uglifycss');
 
var uglified = uglifycss.processFiles(
    [ 'file1', 'file2' ],
    { maxLineLen: 500, expandVars: true }
);

所以我们只需要把打包的代码替换，把引入的代码删除就可以了

var params = process.argv.slice(2);
var path=require('path');
const fs = require('fs'),
    UglifyCSS = require('uglifycss');
let uglifyCode = UglifyCSS.processFiles(params,{  maxLineLen :500 ,  expandVars:true });

function getCurrentDate(format) {	  var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth();//得到月份
    var date = now.getDate();//得到日期
    var day = now.getDay();
    var hour = now.getHours();//得到小时
    var minu = now.getMinutes();//得到分钟
    var sec = now.getSeconds();//得到秒
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    if (hour < 10) hour = "0" + hour;
    if (minu < 10) minu = "0" + minu;
    if (sec < 10) sec = "0" + sec;
    var time = "";	 //精确到天
    if(format==1){
        time = year + "-" + month + "-" + date;
    }	  //精确到分
    else if(format==2){
        time = year +  month +  date+ "_" + hour + minu +sec;
    }
    return time;
}
var time=getCurrentDate(2)

fs.writeFileSync("./css/index.min."+time+".css", uglifyCode, 'utf-8');

总结

当然，还有一个最最最简单的方法，应能实现我上面岁提到的需求，不过这里就不放出来，用过复杂的才会学会用简单的，这里提一下最简单的一个文件bat。详细写法我会单独介绍。

写这篇东西是为了那些被其他人误导的人写的，也是写给我带的前端看的。多看文档，少看垃圾博文。