常用Grunt任务

目的：自动化构建项目；完成压缩，编译，单元测试，代码检查以及打包发布的任务。

生成线上调试source map，代码行统计。

 

常用Grunt任务:

Cache      ：cache-breaker、usemin + rev

CSS         ：grunt-recess、less、cssmin、uncss、csslint(CSS检测)

JS            ：uglify（压缩JS，Beautify JS，生成线上调试source map）、 jshint（JS代码检测及检测规则配置）、sloc（代码行统计）、ng-min（Angular代码压缩）、plato（代码复杂度、可维护性）

HTML       ：html-validation、

测试         ：jasmine、qunit

基本任务  ：clean、concat、copy、watch

  

Cache清除缓存任务

 . usemin + rev

目的是清除浏览器缓存。

给静态文件重名后，再将html、css中的静态文件引用的名称替换成新文件名。

rev给静态文件重命名。usemin替换html、css中引用的静态文件名。

 

虽然usemin任务执行之前会自动执行 concat、uglify、cssmin任务。一般还是要自己定义任务：要先执行clean清除重命名的静态文件；concat合并文件；recess重新编译和压缩css文件；uglify重新压缩js文件。最后再执行useminPrepare，rev，usemin。

 

useminPrepare: {
      src: "<%= site.destination %>/{,*/   /*  }*.html",
      options: {
        dest: "<%= site.destination %>",
        root: "<%= site.destination %>"
      }
    },
    rev: {
      options: {
        algorithm: 'md5',
        length: 8
      },
      assets: {
        files: {
          src: [
            '<%= kui_css %>',
            '<%= kui_js %>',
            '<%= kuidoc_css %>',
            '<%= kuidoc_js %>',
            './images/{,*/  /*  }*.{png,jpg,jpeg,gif,webp}',
          ]
        }
      }
    },
    usemin: {
      html: ["<%= site.destination %>/{,*/     /*  }*.html" ],
      css: ["./css/*.css" ],
      options : {
        assetDirs: [
          '<%= site.destination %>',
          './css'
          ]
      }
    },

 

. cache-breaker 

这个任务也是清除静态文件的浏览器缓存，相对usemin简单些。但是，cache-breaker只替换head标签中的url，不替换body中的链接。一般都会有置底加载的JS文件，这个任务就不太适用。

 

// Turn these :
<script src="/js/dist/combined.min.js"></script>
<link href="/css/style.css"></link>

// Into these :
<script src="/js/dist/combined.min.js?rel=123456"></script>
<link href="/css/style.css?rel=123456"></link>

 

   cachebreaker: {
        kuidoc_js: {
          asset_url : '<%= kuidoc_js %>',
          files: {
            src : './_kui/*.html'
          }
        },
        kuidoc_css: {
          asset_url : '<%= kuidoc_css %>',
          files: {
            src : './_kui/*.html'
          }
        }
    },

 

. cacheBust

这个任务也是清除静态文件的浏览器缓存，支持的静态文件格式有：CSS, JavaScript, images 和 favicons。这个任务会忽略远程静态文件，因为一般这些远程文件是存储在CDN上的静态文件通常是很稳定的库文件，比如jQuery、Bootstrap...它们的url通常会有个版本标志，通过这个标识符来避免浏览器缓存。你的页面最好引用用这些标准的url，保证浏览器缓存的命中率。304总是比200快。也就是，类似以下的url会被忽略：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

 没有采用这个任务的理由：

1、项目中css和js独立部署和引用，静态文件引入的是绝对地址，我们也希望能够清除缓存，这个任务不适用。

2、cacheBust针对html文件中的静态文件寻址是相对于Grunt.js文件的，这就要求html文件和Grunt.js在同一个文件夹中。

3、任务执行后有漏掉的css。  

 

JS任务

 . Uglify

这个任务一直在更新增强：

1、压缩我们的JavaScript文件；

2、Beautify反压缩JS文件；

3、可以用它给多文件生成source-map。

注意：Angular压缩的时候会将$scope变成  a，压缩前要先执行ng-min任务。

 

    uglify: {    
      controller: {
        options: {
          banner: '<%= banner %>',
          report: 'min',
          // for Angular keyword $scope
          mangle: false,
          // except: ['jQuery', 'Angular', '$scope'],
          // for source map
          sourceMapRoot: '<%= doc_dir %>',
          sourceMap: '<%= doc_dir %>/js/kui-controller.min.js.map',
          sourceMapUrl: '<%= doc_dir %>/js/kui-controller.min.js.map'
        },
        src: '<%= doc_dir %>/js/kui-controller.ngmin.js',
        dest: '<%= doc_dir %>/js/kui-controller.min.js'
      }
    },

 

 

. ng-min
AngularJS控制器构造函数通常简写成

     $var SomeCtrl = function($scope, $element) {}

$scope, $element 是参数，但换个名字代码就不能正常运行了。也就是AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称。所以如果你要压缩控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。

 

为了克服压缩引起的问题，

第一种方法是在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组。

第二种方法使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数，就像AMD声明一样，写成

     $var SomeCtrl = ['$scope', '$element', function(s, e) {}  

 

 ng-min采用的是第二种方法，来避免压缩引起的依赖注入系统不能识别服务问题。

 

    ngmin: {
      controllers: {
        src: ['<%= doc_dir %>/js/kui-controller.js'],
        dest: '<%= doc_dir %>/js/kui-controller.ngmin.js'
      }
    },

  

 . sloc

计算代码行。

    sloc: {
      options: {
        reportType: 'json',
        reportPath: '<%= doc_dir %>/sloc-v<%= pkg.version %>.json',
      },
      files: {
        './': '<%= doc_dir %>/js/kui-controller.js',
        './': [ 'kui.js' ]
      }
    },

 

CSS任务

 . grunt-recess

包括less编译和css压缩。

    recess: {
      options: {
        compile: true,
        banner: '<%= banner %>'
      },
      kui: {
        src: ['./less/kui.less'],
        dest: './css/kui.css'
      },
      kui_min: {
        options: {
          compress: true
        },
        src: ['./less/kui.less'],
        dest: '<%= kui_css %>'
      }
    },

 

 

. Less 

less编译

 

. cssmin

css压缩（有时压缩后浏览器无法载入）

 

验证和测试任务

 

. jshint 

检查js代码错误。通过.jshintrc 来定义检测项。

 

    jshint: {
        //JSHint (http://www.jshint.com/docs/options/)
        options: {
          jshintrc: 'js/.jshintrc',
          globals: {
            jquery: true
          }
        },
        kui: {
          src: ['<%= js_dir %>/modal.confirm.js']
        },
        controller: { 
          src: ['<%= doc_dir %>/js/controller/*.js']
        },
        kuidoc: { 
          src: ['<%= doc_dir %>/js/<%= pkg.name %>.min.js', '<%= doc_dir %>/js/<%= pkg.name %>.js']
        }
    },

  

{
  /* https://gist.github.com/haschek/2595796 */
  "asi"      : true,  // Tolerate Automatic Semicolon Insertion (no semicolons).
  "boss"     : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
  "browser"  : true,  // Standard browser globals e.g. `window`, `document`.
  "curly"    : false, // Require {} for every new block or scope.

  "debug"    : true,  // Allow debugger statements e.g. browser breakpoints.
  "devel"    : true,  // Allow development statements e.g. `console.log();`.

  "eqeqeq"   : false, // true: Require triple equals (===) for comparison
  "eqnull"   : true,  // true: Tolerate use of `== null`
  "expr"     : true,  // Tolerate `ExpressionStatement` as Programs.
  "laxbreak" : true,  // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
  "laxcomma" : true,  // Suppress warnings about comma-first coding style.
  "validthis": true,  // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function.
}

 

 . html-validation

检查HTMlL。

options.relaxerror定义需要忽略的报错，可以基于正则表达式匹配。比如，AngularJS中需要忽略HTML标签中的“ng-”开头的属性： 'Attribute ng-[a-z]+ not allowed on element [a-z]+ at this point.'这个配置项非常有用。

 

    validation: {
      options: {
        reset: true,
        relaxerror: [
          'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
          'Element link is missing one or more of the following attributes: itemprop, property, rel.',
          'Attribute srcset not allowed on element img at this point.',
          'Attribute ng-[a-z]+ not allowed on element [a-z]+ at this point.',
          'document type does not allow element [a-z]+ here',
          '& did not start a character reference. *',
          'Element xmp not allowed as child of element div in this context. *'
        ]
      },
      files: {
        src: ["_kui/*.html"]
      }
    },

 

. uncss

 检测HTML中没有使用到的css，并去除多余的css。

uncss: {
  dist: {
    files: {
      'dist/css/tidy.css': ['app/index.html','app/about.html']
      }
    }
},

  

. jasmine

前端单元测试 

 

基本grunt任务

 . clean

清除文件，每次编译，需要清除旧文件。

 

. concat

合并文件。注意：如果concat后的文件不清除，会不停的在该文件内容的最前concat内容。

 

. copy

拷贝代码到build路径。

 

. watch

使用grunt watch来运行这个任务。监视特定目录中的变化，然后把代码编译/打包。

  

注意：clean任务第一个执行，copy任务最后执行。

 

 

安装命令

//安装Grunt的命令行接口(CLI)
npm install -g grunt-cli

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-recess --save-dev
npm install grunt-html-validation --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-cache-bust --save-dev
npm install grunt-cache-breaker --save-dev
npm install grunt-jekyll --save-dev
npm install grunt-ngmin --save-dev
npm install grunt-sloc --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jasmine --save-dev

 

 

加载所需要的Grunt插件 

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-ngmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');  
  grunt.loadNpmTasks('grunt-recess');
  grunt.loadNpmTasks('grunt-html-validation');
  grunt.loadNpmTasks('grunt-jekyll');
  grunt.loadNpmTasks('grunt-cache-breaker');
  grunt.loadNpmTasks('grunt-rev');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sloc'); 

 

 

 参考资料：http://www.gruntjs.com/

http://24ways.org/2013/grunt-is-not-weird-and-hard/

http://mikemclin.net/configuring-package-json-and-gruntfile-js/

Semantic Versioning Specification  http://semver.org

NPM | package.json  https://npmjs.org/doc/json.html