grunt入门 出处:http://artwl.cnblogs.com
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相关推荐
- grunt入门讲解1:grunt的基本概念和使用
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...
- Grunt 入门指南3:创建Tasks
创建tasks Tasks 是grunt最重要的组成部分.使用率最高,像 jshint 或 nodeunit. 每次Grunt执行,你可以告诉Grunt指定的一个或者多个tasks会运行. 如果你没有 ...
- 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 ...
- Grunt 入门指南5:项目脚手架
Project Scaffolding 项目脚手架 grunt-init Grunt-init 是一个用来生成项目的脚手架工具. 它将基于当前环境以及命令的问答结果创建完整的项目目录结构.实际生成的项 ...
- Grunt 入门教程一:开始使用Grunt(翻译自官方教程)
关于Grunt翻译: 用了Grunt一段时间,确实极大提高了前端开发效率,所以决定翻一下官方文档,方便英文基础不太好的童鞋们(本人英文也不怎么样).虽然在github上找到了一个中文的翻译,但是翻译质 ...
- grunt 入门教程五:完整示例(完结篇)
getting started 四章翻译完之后中断了好久,这段期间对grunt有了更多的使用经验,直到最近把总结了之前经验了一下,才能给这个系列画上一个句号. 我们用grunt干什么? grunt作为 ...
- grunt从入门到自定义项目模板
文章还可在我的github上找到,排版更友好一点:grunt从入门到自定义项目模板 一.Grunt入门介绍 1. Grunt是神马 基于任务的命令行构建工具(针对JavaScript项目) 链接:ht ...
- 使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
- [转]ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调
本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...
最新文章
- 《C++游戏编程入门(第4版)》——1.8 Lost Fortune简介
- python【蓝桥杯vip练习题库】ALGO-79删除数组零元素
- [poj 2001] Shortest Prefixes (字典树)
- 大系统观:第2章 系统论概述
- Linux 适用硬件平台/系统架构(i386 / i586 / i686 / x86 / x86_64)名词理解和区别
- mybatis入门(七)之日志
- 前端学习(576):margin无效情形之内联特性导致无效
- 感染新冠后为啥会丧失​嗅觉?最新《细胞》论文终于搞明白了!
- JavaEE实战班第19天
- CV之Harris特征点检测器-兴趣点检测(详解)
- Mongodb入门安装
- [Python3] 初识py, 一个简单练手的小玩意. 快递查询
- 基于php的超市仓库管理系统
- 传智播客python培训视频教程下载
- 新中大财务软件虚拟化解决方案
- iOS 签名机制与证书
- wex5链接mysql_【WeX5学习】 后端服务之访问数据库表
- 【WebFace260M】《WebFace260M:A Benchmark Unveiling the Power of Million-Scale Deep Face Recognition》
- 【计算机图形学实验二——实现圆的中点算法、椭圆的中点算法】
- 从文艺到抠脚-我的程序7年之痒