grunt使用使用插件uglify配置详解

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 grunt
    var helloGrunt = "Hello Grunt!(From a.js)";
    console.log(helloGrunt);
})();

b.js内容如下:

(function() {
    //output hello world
    var 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和footer
                options: {
                    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.js
                files: {
                    ‘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)}();
时间: 2024-10-01 05:18:47

grunt使用使用插件uglify配置详解的相关文章

maven常用插件配置详解

常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</project.build.name> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> project.build.name:  用来定义war包名称  proje

vue-cli3.0配置详解

这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

学习笔记——Maven settings.xml 配置详解

文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${user.home} 和和所有其他系统属性只能在3.0+版本上使用.请注意windows和Linux使用变量的区别. settings.xml详解 声明规范 <?xml version="1.0" encoding="UTF-8"?> <settings x

Activiti(一)--安装配置详解

有一段时间没有更新文章了,虽然有一直在写文章,可是一直没有更新到博客内,这段时间写的文章大多还是以技术为主.接下来的系列文章将会来讨论企业工作流的开发,主要是来研究开源工作流Activiti的使用. 该篇文章来详细了解下Activiti 5.15的安装配置全过程,其实安装的过程相当的简单,因为随着Activiti的版本升级安装就变得简单了很多,但是它的配置方法没有想象的那么简单,在配置时需要注意很多问题,这里就来详细的了解下Activiti 5.15的配置全过程. Note:文章都是读者经过实践

jQuery插件制作方法详解

jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一 个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jt

FTP服务器工作原理的及配置详解

FTP服务器工作原理的及配置详解 FTP工作原理概述 FTP:file transfer protocol 它也是一个C/S架构的服务.server:监听在套接字21/tcp端口.按照套接字监听工作状态可以分为两类: 命令连接:发送文件管理类命令,始终处于连接状态,始终监听在21/tcp端口. 数据连接:主要是实现数据传输,这种连接是按需连接的,而且在传输结束会立刻中断. 对于数据连接还有两种不同的工作模式: 主动工作的模式:服务器根据监听在21端口接收到的命令,使用自己的20号端口,将数据传输

【转】Maven pom.xml 配置详解

原文链接:https://yq.aliyun.com/articles/38271 pom.xml文件配置详解 --声明规范 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http:/

[转]阿里巴巴数据库连接池 druid配置详解

一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色的性能,也逐渐映入了大家的眼帘.接下来本教程就说一下druid的简单使用. 二.jar包下载.配置详解及配置示例 1.jar获取 可以从 http://repo1.maven.org/maven2/com/alibaba/druid/ 下载最新的jar包.如果想使用最新的源码编译,也可以从 http