写在前面的话:正式部署前端的时候,javascript文件一般需要压缩,并生成相应的sourcemap文件,对于一些小型的项目开发,这里提供一个简单的办法。

======正文开始======

1.下载google-closure-compiler文件:

  从这里下载:download

2.复制压缩包中的compiler.jar到需要压缩的javascript文件目录。

3.打开命令行cmd,cd到该目录,运行如下命令:

java -jar compiler.jar --js test.js --js_output_file test.min.js --create_source_map test-min.js.map

(1)需要安装java运行环境。

(2)-jar参数指定jar文件,这里是compiler.jar

   --js参数指定javascript源文件

   --js_output_file参数指定要生成的压缩后的javascript文件

   --create_source_map参数指定要生成的source map 文件

(3)这里是将test.js源文件压缩为test.min.js文件,并且生成source map文件test-min.js.map

4.在压缩后的文件(test.min.js)最后增加soure map引用说明。

//@ sourceMappingURL=test-min.js.map

备注:增加source map引用说明后,当前端引用压缩版的js文件,使用Chrome的开发者工具仍然能够定位到具体出错的行号,此时可以在未压缩文件中进行修改再压缩即可。

5.更多用法:

(1)编译多个javascript文件:

  --js参数指定多个javascript源文件,会进行合并。

(2)查看帮助

  java -jar compiler.jar --help

(完)

文档信息

压缩javascript文件方法的更多相关文章

  1. node.js 使用 UglifyJS2 高效率压缩 javascript 文件

    UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...

  2. 使用Ant命令压缩JavaScript文件

    压缩JavaScript文件可以减少代码尺寸,保护源代码,节省网络带宽,加快页面打开速度,甚至优化JS代码.Yahoo有一个压缩JS的工具叫做YUI compressor, Google也有一个工具叫 ...

  3. AlwaysOn环境下的压缩Log文件方法

    Step1.将DB脱离可用性组 Step2.修改为简单恢复模式>收缩文件>修改回完整恢复模式 -- Truncate the log by changing the database re ...

  4. 外部导入js(javascript)文件方法

    <script src="myScript.js"></script>

  5. 使用GruntJS链接与压缩多个JavaScript文件

    使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想 ...

  6. C#文件或文件夹压缩和解压方法(通过ICSharpCode.SharpZipLib.dll)

    我在网上收集一下文件的压缩和解压的方法,是通过ICSharpCode.SharpZipLib.dll 来实现的 一.介绍的目录 第一步:下载压缩和解压的 ICSharpCode.SharpZipLib ...

  7. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  8. JavaScript文件中调用AngularJS内部方法或改变$scope变量

    需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...

  9. CSS文件和Javascript文件的压缩

    像JQuery一样来压缩我们的CSS和JS 我们都知道一般JQuery新版本发布的时候往往会有几个不同类型文件,比如原始版本文件.最小文件以及其他配合IDE智能提示的各种版本文件,前期我们使用JQue ...

随机推荐

  1. less学习

    // 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...

  2. Hyper-V 激活Windows系统重启后黑屏的解决方法 + 激活方法

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...

  3. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  4. BAT“搅局”B2B市场,CIO们准备好了吗?

    "CIO必须灵活构建其所在企业的IT系统,深入业务,以应对日新月异的数字化业务环境."   BAT军团"搅局"B2B市场,CIO们准备好了吗? 庞大的企业级市场 ...

  5. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  6. MySQL,MariaDB:Undo | Redo [转]

    本文是介绍MySQL数据库InnoDB存储引擎重做日志漫游 00 – Undo LogUndo Log 是为了实现事务的原子性,在MySQL数据库InnoDB存储引擎中,还用Undo Log来实现多版 ...

  7. C#移动跨平台开发(1)环境准备

    C#依托于mono平台可以实现Unix平台服务器端开发已经不是什么新鲜事了,而Xarmain公司(初始成员大多来自原Mono.MonoTouch.Mono For Android成员)继续将C#的先进 ...

  8. Visual Studio Code 配置指南

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指 ...

  9. iOS开发系列--App扩展开发

    概述 从iOS 8 开始Apple引入了扩展(Extension)用于增强系统应用服务和应用之间的交互.它的出现让自定义键盘.系统分享集成等这些依靠系统服务的开发变成了可能.WWDC 2016上众多更 ...

  10. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...