grunt压缩js文件

浏览数：32 / 时间：2015年06月09日

使用grunt 工具管理js文件时有几个常用功能例如压缩合并等

首先安装node环境，安装grunt

在目录环境下建立自己的项目my_project

添加两个源文件

在项目根目录下创建package.json文件

{
  "name": "my_project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~*",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.6.0"
  }
}

　package.json 具体参数说明参见https://www.npmjs.org/doc/files/package.json.html

运行 npm install

根目录会出现 node_modules 文件夹以及相应的grunt插件。

如没有再 package.json中写明，使用npm安装也是可以的 npm install grunt-contrib-插件名称 -g(全局安装) --save-dev(写入package.json).

创建 Gruntfile.js

示例如下

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON(‘package.json‘);

  grunt.initConfig({
    pkg: pkg,
     concat: {
            domop: {
                src: [‘src/search.js‘, ‘src/searchbar.js‘,‘src/showimg.js‘],
                dest: ‘dest/domop.js‘
            }
        },
    uglify: {
      options: {
        banner:"\n",
        mangle:false
      },
      build:{
        src:‘dest/domop.js‘,
        dest:‘dest/dest.js‘
      }
    }
  });
  //载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

    //注册任务
    grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘]);
};

　　此时使用的是uglify压缩和concat合并

其中mangle 为是否替换变量，false时不替换变量，默认替换。还可为数组

 mangle: {
        except: [‘jQuery‘, ‘Backbone‘]
      }
此时文件中遇到jQuery,Backbone则不进行替换。
banner：为添加注释

 options: {
      banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +
        ‘<%= grunt.template.today("yyyy-mm-dd") %> */‘
    }
详情见 https://github.com/gruntjs/grunt-contrib-uglify
合并参数链接 https://github.com/gruntjs/grunt-contrib-concat

grunt官网地址为：http://www.gruntjs.org/docs/sample-gruntfile.html

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

grunt压缩js文件