Grunt JS构建环境搭建以及使用入门

Grunt JS构建环境搭建以及使用入门

1.应用场景

一种自动化任务处理工具，对于日常的需求（代码规则检查、代码合并）可以实现自动化执行，只需要保留package.json和Gruntfile.js便能用一句代码行进行依赖下载。

2.搭建步骤

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js，然后开始安装 Grunt。

2.1安装 Node.js

进入nodejs官网https://nodejs.org/en/download/，根据当前机型选择对应版本下载安装后，以管理员身份打开cmd命令行工具输入命令后便完成了nodeJs的配置：

npm config set registry=http://registry.npm.taobao.org

2.2安装Grunt

实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令：

npm install -g grunt-cli

注意:因为使用 -g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。

2.3生成 package.json 文件

package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下。

打开命令行，cd 项目文件夹目录下面，输入指令 npm init 之后，就出来很多信息，然后开始填写项目名称，填写好了之后回车即可。

2.4安装所需要的插件

对于目前最多需求的插件

语法检查：grunt-contrib-jshint

监听文件变动：grunt-contrib-watch

r.js插件：grunt-contrib-requirejs

命令行语法：

npm install <插件名> --save-dev

如安装语法检查插件：

npm install grunt-contrib-jshint --save-dev

表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。

运行完命令行后，项目目录会多了个node_modules 文件夹，里面保存了命令行所下载的依赖程序包。

注意grunt-contrib-watch是实现自动化执行任务的关键。

2.5配置 Gruntfile.js 的语法

配置代码包裹在

module.exports = function(grunt) {
    ...
};

里面，内部编写的主要有三块代码：任务配置代码、插件加载代码、任务注册代码。

2.5.6任务配置代码

例如下面代码：

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

任务配置代码以对象格式放在 grunt.initConfig 函数里面，其中先写了一句 pkg: grunt.file.readJSON('package.json') 功能是读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了 <%= pkg.name %> 来输出项目名称），这样可以提高灵活性。之后就是 uglify 对象，这个名字是固定的，表示下面任务是调用 uglify 插件的，首先先配置了一些全局的 options 然后新建了一个 build 任务。

2.5.7插件加载代码

由于上面任务需要用到 grunt-contrib-uglify，当 grunt-contrib-uglify 安装到我们的项目之后，写下下面代码即可加载：

grunt.loadNpmTasks('grunt-contrib-uglify');

2.5.8任务注册代码

注册一下任务，使用

grunt.registerTask('default', ['uglify']);

意思是在 default 上面注册了一个 Uglify 任务，default 就是别名，它是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。

当我们执行 grunt 命令的时候，uglify 的所有代码将会执行。我们也可以注册别的 task，例如：

grunt.registerTask('compress', ['uglify:build']);

如果想要执行这个task，我们就不能只输入 grunt 命令了，我们需要输入 grunt compress 命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。

这里需要注意的是，task 的命名不能与后面的任务配置同名，也就是说这里的 compress 不能命名成 uglify，这样会报错或者产生意外情况。

基本配置完成后，再配置 watch 来监听文件变动，当文件变化了（我们编写保存了），自动执行某些任务，这样子就能够实现了自动化任务节约了不断输入grunt命令的工作。

完整配置代码：

module.exports = function(grunt) {
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    watch: {
      scripts: {
        files: ['src/**/*.js','src/*.js'],
        tasks: ['uglify'],
        options: {
          spawn: false,
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
};