使用Grunt.js管理项目自动化任务

Grunt.js简介与核心价值

Grunt.js是一个基于Node.js的JavaScript任务运行器（Task Runner），主要用于自动化构建、测试以及生成文档等项目管理工作。

Grunt.js不仅仅是一个构建工具，其核心角色是任务运行器，负责管理各个子任务的自动化执行流程，利用它可以实现更多复杂的项目管理需求。

使用Grunt.js的核心目的是实现自动化。在前端项目中，这种自动化需求尤为常见，例如：

为了明确模块分工，JavaScript代码常被拆分为多个细小的js文件。然而，浏览器加载过多js文件会引发大量的HTTP请求，不利于页面性能优化，因此需要工具来合并这些文件。为了减小客户端请求的文件体积，需要对HTML、JavaScript等文件进行压缩处理。此外，项目可能还需要对源代码执行单元测试和回归测试，或者通过源码注释自动生成文档，以避免手动编写文档的工作量。显然，虽然存在各种小工具能完成上述单项任务，但开发者更希望只需输入一条命令、启动一个程序，或在保存文件后自动触发所有这些操作。

过去开发者可能需要使用Node.js自行编写构建程序，而现在Grunt.js提供了所需的全套解决方案。

Grunt.js的安装与配置

从Grunt.js 0.4版本开始，安装策略发生了变化：不再全局安装整个Grunt.js，而是全局安装Grunt命令行客户端（Grunt CLI），并在当前项目中局部安装Grunt。这种设计旨在避免不同项目之间因依赖不同版本的Grunt而产生冲突。

如果之前安装了旧版本，可以使用npm命令将其卸载。

执行以下命令卸载全局Grunt：

npm install -g grunt-cli

接下来需要配置package.json文件。这是项目的核心配置文件，用于存储项目依赖信息、作者信息及版本号等。首先创建一个简单的package.json文件。

{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
  }
}

其中name属性表示项目名称。

version属性指定项目的版本号。

devDependencies属性列出了项目的开发依赖项，目前仅包含grunt及其版本0.4.1。在终端中进入包含该package.json的目录，执行以下命令：

npm install

使用Grunt.js压缩JavaScript代码

执行后，该目录下会生成一个node_modules文件夹，其中包含grunt文件夹，这表示Grunt.js已成功安装到当前项目中。

grunt-contrib-uglify是Grunt.js的一个任务模块，它基于著名的js压缩工具UglifyJS，专门用于执行JavaScript代码压缩任务。

{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
  }
}

随后再次执行安装命令：

npm install

即可完成grunt-contrib-uglify的安装。

配置代码如下：
module.exports = function(grunt) {
 // 配置grunt参数
 grunt.initConfig({
 uglify: {
 options: {
 banner: '/*! 版权所有，这里乱写 */\n'
 },
 build: {
 src: 'src/core.js', // 源文件，也可使用通配符如'src/*.js'
 dest: 'dst/core.js' // 压缩后的输出路径
 }
 }
 });
// 加载 'uglify' 插件任务
 grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册默认执行的任务
 grunt.registerTask('default', ['uglify']);
};

Gruntfile.js文件用于定义具体任务及任务组的执行顺序。上述配置定义了将src/core.js文件压缩后输出至dst/core.js。此时在终端输入命令：

grunt