node下使用UglifyJS压缩合并JS文件的方法

现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程:

安装:

<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>

将uglifyjs安装为全局变量,方便我们在任何地方使用。

<span style="color:#006600;">下面是shell命令的中文解释:
* source-map [string],生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的网站访问地址。
* –source-map-include-sources,设置源文件被包含到source map中。
* –in-source-map,自定义source map,用于其他工具生成的source map。
* –screw-ie8, 用于生成完全兼容IE6-8的代码。
* –expr, 解析一个表达式或JSON。
* -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, –output [string], 输出到文件。
* -b, –beautify [string], 输出带格式化的文件。
* -m, –mangle [string], 输出变量名替换后的文件。
* -r, –reserved [string], 保留变量名,排除mangle过程。
* -c, –compress [string], 输出压缩后的文件。
* -d, –define [string], 全局定义。
* -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* –comments [string], 增加注释参数,如@license、@preserve。
* –preamble [string], 增加注释描述。
* –stats, 显示运行状态。
* –acorn, 用Acorn做解析。
* –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* –self, 把UglifyJS2做为依赖库一起打包。
* –wrap, 把所有代码合并到一个函数中。
* –export-all, 和–wrap一起使用,自动输出到全局环境。
* –lint, 显示环境的异常信息。
* -v, –verbose, 打印运行日志详细。
* -V, –version, 打印版本号。
* –noerr, 忽略错误命令行参数。</span>

# UglifyJS2 使用方法

> UglifyJS2使用包括2种方式

1. shell 指令调用

2. api 调用

shell命令:

合并压缩start.js、test.js这两个JS文件

~> uglifyjs start.js test.js -o new.min.js --source-map new.min.js.map

API调用:

var fs = require('fs');
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});

上面的一个基本核心方法 minify ,下面我们单独看下这个方法

这是一个非常智能的方法 ,共 2个参数

第一个参数 *

第一个参数可以是 字符串,路径,路径数组;

1.字符串参数

就是我们书写的 javascript 代码可以直接当做一个字符串参数参数函数,但是需要有第二个参数告诉函数,这是 javascript 源码字符串

var result = uglifyjs.minify("var fun=function(){ alert('itKingOne博客');};",{
 mangle:false,
 fromString:true,
});

上面的第一个参数传入了 javascript 源码,第二个参数中 formString : true ,就是告诉 minify 函数,前面的参数是 需要压缩的 javascript 源码.

字符串路径

这是函数默认支持的一种方式,可以单独的一个参数,直接给定一个 需要压缩的 javascript 文件路径, 当然也可以2个参数.

var result = uglifyjs.minify("../test.js");

上面的函数执行,会吧我的上级目录中的 test.js 进行压缩.默认一个参数时,表示文件路径

数组指定多个路径

可以一个参数,但是这个参数是一个数组 [ ‘路径1',‘路径2',‘路径3'] 类似这样结果就是把上面路径的所有 javascript 压缩后返回到了 result 对象中,稍后我们单独说下 result 返回值.

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);

第二个参数*

参数说明

romString属性 (default false) 指定第一个参数中的 字符串是 javascript 源码

mangle属性 默认为true;指定为false时,表示不进行混淆压缩

width和max-line-len属性 按照说明,这里应该是指压缩后的文件的长度

outSourceMap属性 用来指定函数返回值result.map字符串转化为Object后file属性的值

sourceRoot属性 用来指定函数返回值result.map字符串转化为Object后sourceRoot属性的值

返回值 result *

返回值 result 是一个对象.code 属性对应的是压缩后的脚本

{"code":"这里是压缩后的 javascript 脚本","map":null}

以上这篇node下使用UglifyJS压缩合并JS文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • gulp安装以及打包合并的方法教程
  • 小心!AngularJS结合RequireJS做文件合并压缩的那些坑
  • 使用GruntJS构建Web程序之合并压缩篇
(0)

相关推荐

  • 小心!AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • gulp安装以及打包合并的方法教程

    前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 安装.打包合并 1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=h

  • 使用GruntJS构建Web程序之合并压缩篇

    有如下步骤: 1.新建项目Bejs2.新建文件package.json3.新建文件Gruntfile.js4.命令行执行grunt任务 一.新建项目Bejs源码放在src下,该目录有两个子目录asset和js.js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们.这篇只关注asset目录,asset目录下放了一些图片和css文件.一会会把两个css资源reset.css和style.css合并,压缩到dest/asset目录.一个合并版本all.css,一个压缩版本

  • node下使用UglifyJS压缩合并JS文件的方法

    现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map

  • php实现压缩合并js的方法【附demo源码下载】

    本文实例讲述了php实现压缩合并js的方法.分享给大家供大家参考,具体如下: test.php文件如下: require_once('jsmin.php'); $files = glob("js/*.js"); $js = ""; foreach($files as $file) { $js .= JSMin::minify(file_get_contents($file)); } file_put_contents("combined.js",

  • php实现压缩多个CSS与JS文件的方法

    本文实例讲述了php实现压缩多个CSS与JS文件的方法.分享给大家供大家参考.具体实现方法如下: 1. 压缩css 复制代码 代码如下: <?php    header('Content-type: text/css');    ob_start("compress");    function compress($buffer) {        /* remove comments */        $buffer = preg_replace('!/\*[^*]*\*+(

  • Python格式化压缩后的JS文件的方法

    本文实例讲述了Python格式化压缩后的JS文件的方法.分享给大家供大家参考.具体分析如下: 该脚本可以把压缩后的js文件格式上进行些还原,当然不会百分百完美,暂不处理语法问题,只是为了方便阅读js代码 lines = open("unformated.js").readlines()[0].split(";") #一般压缩后的文件所有代码都在一行里 #视情况设定索引,我的情况时第0行是源代码. indent = 0 formatted = [] for line

  • webpack 单独打包指定JS文件的方法

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录,index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filen

  • C#实现rar压缩与解压缩文件的方法

    本文实例讲述了C#实现rar压缩与解压缩文件的方法.分享给大家供大家参考.具体分析如下: 此程序利用 WinRAR 程序对文件进行压缩,命令行语法可参考WinRAR中文帮助. /// 利用 WinRAR 进行压缩 /// </summary> /// <param name="path">将要被压缩的文件夹(绝对路径)</param> /// <param name="rarPath">压缩后的 .rar 的存放目录(

  • ThinkPHP模版中导入CSS和JS文件的方法

    本文实例讲述了ThinkPHP模版中导入CSS和JS文件的方法.分享给大家供大家参考.具体方法如下: 常用方法 1. css使用link 2. js使用src 用tp自己的导入标签import 导入Public文件夹下面的Js目录中的test.js文件,import标签可以省略type属性,默认就是js的文件 复制代码 代码如下: <import type='js' file='Js.test'> <import type='css' file='Css.test'> 不在Publ

  • Yii2框架加载css和js文件的方法分析

    本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */ na

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • vue引入静态js文件的方法

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件

随机推荐