grunt安装

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

先下载安装node.js

以下指令：mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令

安装grunt-cli

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

创建一个项目

 

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

复制以下到package.json

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

切换到当前项目文件夹

安装grunt

npm install grunt --save-dev

• Contrib-jshint——javascript语法错误检查；

• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；

• Contrib-clean——清空文件、文件夹；

• Contrib-uglify——压缩javascript代码

• Contrib-copy——复制文件、文件夹

• Contrib-concat——合并多个文件的代码到一个文件中

• karma——前端自动化测试工具

安装grunt的js压缩插件

npm install grunt-contrib-uglify --save-dev

配置Gruntfile.js

module.exports = function(grunt) { // Project configuration. 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' } } }); // 加载包含 "uglify" 任务的插件。 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认被执行的任务列表。 grunt.registerTask('default', ['uglify']); };

执行压缩
命令行：grunt

安装语法检查插件jshint

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

配置Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //js压缩
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %>-<%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/jquery.dtGrid.js',
        dest: 'build/<%= pkg.name %>-<%= pkg.version %>.min.js'
      }
    },
    //js语法检查，有语法错误后不会压缩，在根目录创建.jshintrc文件
    jshint:{
       build:['Gruntfile.js','src/*.js'],
       options:{
          jshintrc:'.jshintrc'
       }
    }


  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

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

  // 默认被执行的任务列表。
  //先后加载顺序，先检查后压缩，检查到错误不压缩
  grunt.registerTask('default', ['jshint','uglify']);

};

自定义任务

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

// Default task(s). grunt.registerTask('default', ['uglify']);

.jshintrc文件包括一些检查的配置（json格式）

{
    "bitwise": true,
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "es3": false,
    "forin": true,
    "freeze": true,
    "immed": true,
    "indent": 4,
    "latedef": "nofunc",
    "newcap": true,
    "noarg": true,
    "noempty": true,
    "nonbsp": true,
    "nonew": true,
    "plusplus": false,
    "quotmark": "single",
    "undef": true,
    "unused": false,
    "strict": false,
    "maxparams": 10,
    "maxdepth": 5,
    "maxstatements": 40,
    "maxcomplexity": 8,
    "maxlen": 120,

    "asi": false,
    "boss": false,
    "debug": false,
    "eqnull": true,
    "esnext": false,
    "evil": false,
    "expr": false,
    "funcscope": false,
    "globalstrict": false,
    "iterator": false,
    "lastsemic": false,
    "laxbreak": false,
    "laxcomma": false,
    "loopfunc": true,
    "maxerr": false,
    "moz": false,
    "multistr": false,
    "notypeof": false,
    "proto": false,
    "scripturl": false,
    "shadow": false,
    "sub": true,
    "supernew": false,
    "validthis": false,
    "noyield": false,

    "browser": true,
    "node": true,

    "globals": {
        "angular": false,
        "$": false
    }
}

命令行执行
grunt


其他插件安装类似，具体可参考各个插件的 github 项目