标签：npm 文件 GRUNT uglify 压缩 grunt js Grunt

目标

Grunt是一个简单好用的js文件压缩和合并工具，当一个页面需要加载过个js文件时，合并多个js文件可以减少http请求次数，提高页面加载速度。另外，Grunt的uglify功能可以起到混淆和隐藏js代码逻辑作用。

安装nodejs和Grunt命令行

Grunt运行nodejs环境中，通过npm进行安装。Grunt 0.4.x 需要Node.js 版本 >= 0.8.0。
nodejs的安装这里不再赘述，可以根据使用的操作系统选择合适的方式进行安装。例如在Centos系统下可以用如下命令安装：

yum install -y nodejs

更新npm到最新版本：

npm update -g npm

然后安装Grunt命令行环境

npm install -g grunt-cli

配置Grunt工程环境

一个Grunt工程环境就是Grunt要在其中工作的目录，配置完毕后可以对该目录下的js进行压缩和合并。
假设我们的工程目录结构如下：

./
  ./js
  ./dist

./ 为我们的而工程根目录
js 目录下存放需要压缩合并的js文件
dist 目录存放我们稍后合并输出的文件。

在工程根目录下放置两个文件： package.json 和 Gruntfile.js。
这是两个必要的文件，也是最重要和容易出错的环节，一定要记着将你最新编辑的文件放置到工程根目录下。

package.json用于定义工程的名称、版本和所以来的Grunt插件信息，内容如下：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

name 和 version可以根据实际情况定义，其他原样保留。
编辑完package.json后，在工程根目录下运行命令：

npm install grunt --save-dev

这个命令的目的是安装最新的Grunt命令，并安装package.json中定义的依赖信息。

然后编辑Gruntfile.js 文件，这个文件定义Grunt工作的所有任务细节，格式如下：

module.exports = function(grunt) {

 //工程配置：输入、输出、选项等
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'js/*.js',
        dest: 'dist/output.min.js'
      }
    }
  });

  // 加载 "uglify" 插件.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 任务,可以是多项，这里只对代码进行压缩
  grunt.registerTask('default', ['uglify']);

};

uglify 代码压缩任务入口，可以并行执行多向任务，此文档仅仅演示代码压缩合并。
src 输入文件，支持使用通配符、正则表达式或文件列表，*.js表示压缩合并所有js文件。
dest 压缩后的文件输出位置。

执行Grunt命令

以上工作准备完毕后，在工程根目录下执行Grunt命令：

grunt

如果没有错误，将输出压缩结果文件。
有时候会出现缺少某些插件的错误，根据错误提示安装即可。例如出现：

Local Npm module "grunt-contrib-uglify" not found. Is it installed?

根据提示安装即可：

npm install grunt-contrib-uglify

...

By 云视睿博王工，转载请注明出处。

标签：npm,文件,GRUNT,uglify,压缩,grunt,js,Grunt
来源： https://blog.51cto.com/livestreaming/2581809

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。