grunt-contrib-uglify

uglify是一个文件压缩插件,项目地址:https://github.com/gruntjs/grunt-contrib-uglify

本文将以一个DEMO来展示如何使用uglify插件。

DEMO环境

package.json:

{"name": "grunt-demo","version": "0.1.0","devDependencies": {"grunt": "~0.4.2","grunt-contrib-jshint": "~0.6.0","grunt-contrib-nodeunit": "~0.2.0","grunt-contrib-uglify": "~0.2.2"}
}

DEMO文件结构:

其中js文件夹就是用来测试的,Gruntfile.js稍后介绍,其中a.js内容如下:

(function() {//output hello gruntvar helloGrunt = "Hello Grunt!(From a.js)";console.log(helloGrunt);
})();

b.js内容如下:

(function() {//output hello worldvar helloWorld = "Hello World!(From b.js)";console.log(helloWorld);
})();

下面我们来配置四个任务:

  • 压缩a.js,不混淆变量名,保留注释,添加banner和footer
  • 压缩b.js,输出压缩信息
  • 按原文件结构压缩js文件夹内所有JS文件
  • 合并压缩a.js和b.js

Gruntfile.js

现在直接通过Gruntfile.js来看看这四个任务的配置:

module.exports = function(grunt){// 项目配置grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//添加banner},builda: {//任务一:压缩a.js,不混淆变量名,保留注释,添加banner和footeroptions: {mangle: false, //不混淆变量名preserveComments: 'all', //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)footer:'\n/*! <%= pkg.name %> 最后修改于: <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer},files: {'output/js/a.min.js': ['js/a.js']}},buildb:{//任务二:压缩b.js,输出压缩信息options: {report: "min"//输出压缩率,可选的值有 false(不输出信息),gzip},files: {'output/js/b.min.js': ['js/main/b.js']}},buildall: {//任务三:按原文件结构压缩js文件夹内所有JS文件files: [{expand:true,cwd:'js',//js目录下src:'**/*.js',//所有js文件dest: 'output/js'//输出到此目录下}]},release: {//任务四:合并压缩a.js和b.jsfiles: {'output/js/index.min.js': ['js/a.js', 'js/main/b.js']}}}});// 加载提供"uglify"任务的插件grunt.loadNpmTasks('grunt-contrib-uglify');// 默认任务grunt.registerTask('default', ['uglify:release']);grunt.registerTask('mina', ['uglify:builda']);grunt.registerTask('minb', ['uglify:buildb']);grunt.registerTask('minall', ['uglify:buildall']);
}

通过上面的代码,我们很容易就可以看到上面四个任务的配置方式。

运行结果

任务一:压缩a.js,不混淆变量名,保留注释,添加banner和footer

运行 grunt mina 命令,生成的a.min.js如下:

/*! grunt-demo 2013-11-29 */
!function(){//output hello grunt
var helloGrunt="Hello Grunt!(From a.js)";console.log(helloGrunt)}();
/*! grunt-demo 最后修改于: 2013-11-29 */

跟我们的目标一致。

任务二:压缩b.js,输出压缩信息

运行 grunt minb 命令,生成的b.min.js如下:

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello World!(From b.js)";console.log(a)}();

命令执行情况:

我们可以看到输出了压缩信息

任务三:按原文件结构压缩js文件夹内所有JS文件

运行 grunt minall 命令,生成目录结构如下:

其中a.min.js和b.min.js是任务一和任务二生成的,压缩后的output/js/a.js内容如下:

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}();

output/js/main/b.js内容如下:

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello World!(From b.js)";console.log(a)}();

任务四:合并压缩a.js和b.js

运行 grunt命令,生成的output/index.min.js内容如下:

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}(),function(){var a="Hello World!(From b.js)";console.log(a)}();

至此,本节uglify插件的介绍就结束了,对本文或使用过程中有任何问题,欢迎留言讨论。

转载于:https://www.cnblogs.com/liuxingwuhui/p/5942656.html

grunt入门 出处:http://artwl.cnblogs.com相关推荐

  1. grunt入门讲解1:grunt的基本概念和使用

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...

  2. Grunt 入门指南3:创建Tasks

    创建tasks Tasks 是grunt最重要的组成部分.使用率最高,像 jshint 或 nodeunit. 每次Grunt执行,你可以告诉Grunt指定的一个或者多个tasks会运行. 如果你没有 ...

  3. DWR入门教程(http://www.cnblogs.com/cyjch/archive/2012/02/16/2353758.html)

    文章转载自<http://www.cnblogs.com/cyjch/archive/2012/02/16/2353758.html>,多谢大牛分享! DWR入门教程 DWR(Direct ...

  4. Grunt 入门指南5:项目脚手架

    Project Scaffolding 项目脚手架 grunt-init Grunt-init 是一个用来生成项目的脚手架工具. 它将基于当前环境以及命令的问答结果创建完整的项目目录结构.实际生成的项 ...

  5. Grunt 入门教程一:开始使用Grunt(翻译自官方教程)

    关于Grunt翻译: 用了Grunt一段时间,确实极大提高了前端开发效率,所以决定翻一下官方文档,方便英文基础不太好的童鞋们(本人英文也不怎么样).虽然在github上找到了一个中文的翻译,但是翻译质 ...

  6. grunt 入门教程五:完整示例(完结篇)

    getting started 四章翻译完之后中断了好久,这段期间对grunt有了更多的使用经验,直到最近把总结了之前经验了一下,才能给这个系列画上一个句号. 我们用grunt干什么? grunt作为 ...

  7. grunt从入门到自定义项目模板

    文章还可在我的github上找到,排版更友好一点:grunt从入门到自定义项目模板 一.Grunt入门介绍 1. Grunt是神马 基于任务的命令行构建工具(针对JavaScript项目) 链接:ht ...

  8. 使用Grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...

  9. [转]ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调

    本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...

最新文章

  1. 《C++游戏编程入门(第4版)》——1.8 Lost Fortune简介
  2. python【蓝桥杯vip练习题库】ALGO-79删除数组零元素
  3. [poj 2001] Shortest Prefixes (字典树)
  4. 大系统观:第2章 系统论概述
  5. Linux 适用硬件平台/系统架构(i386 / i586 / i686 / x86 / x86_64)名词理解和区别
  6. mybatis入门(七)之日志
  7. 前端学习(576):margin无效情形之内联特性导致无效
  8. 感染新冠后为啥会丧失​嗅觉?最新《细胞》论文终于搞明白了!
  9. JavaEE实战班第19天
  10. CV之Harris特征点检测器-兴趣点检测(详解)
  11. Mongodb入门安装
  12. [Python3] 初识py, 一个简单练手的小玩意. 快递查询
  13. 基于php的超市仓库管理系统
  14. 传智播客python培训视频教程下载
  15. 新中大财务软件虚拟化解决方案
  16. iOS 签名机制与证书
  17. wex5链接mysql_【WeX5学习】 后端服务之访问数据库表
  18. 【WebFace260M】《WebFace260M:A Benchmark Unveiling the Power of Million-Scale Deep Face Recognition》
  19. 【计算机图形学实验二——实现圆的中点算法、椭圆的中点算法】
  20. 从文艺到抠脚-我的程序7年之痒

热门文章

  1. php文件操作基本使用方法
  2. 每日一问:LayoutParams 你知道多少?
  3. Flask-SocketIO 简单使用指南
  4. Python爬虫框架Scrapy学习笔记原创
  5. 为什么我从 Git Flow 开发模式切换到了 Trunk Based 开发模式?
  6. activiti 5.22的demo运行
  7. MySQL数据库和ACID模型
  8. Windows Azure 之服务总线中继服务
  9. 期待已久的VS2008 SP1 和.NET FRAMEWORK 3.5 SP1都出来了
  10. r a/b 测试_R中的A / B测试