前言
在用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<params.length;i++){
let code1 = fs.readFileSync(params[i], 'utf-8')
data.push(code1)
}这样我们的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<params.length;i++){
let code1 = fs.readFileSync(params[i], 'utf-8')
data.push(code1)
}
let uglifyCode = UglifyJS.minify(data);
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("./js/index.min."+time+".js", uglifyCode.code, 'utf-8');
然后为了那些不懂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。详细写法我会单独介绍。
写这篇东西是为了那些被其他人误导的人写的，也是写给我带的前端看的。多看文档，少看垃圾博文。
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
