常用插件的使用—grunt入门指南（下）-CFANZ编程社区

less/sass/stylus预编译

在前端工程中使用css预编译器（less/sass/stylus）用于弥补css的语言缺陷，基本上是标配了，其中less和sass用的最多，但明河最喜欢使用的是stylus，grunt官方有对应的编译插件。

这里以grunt-contrib-stylus为例。

stylus: {
             options: {
                 //指定要扫描的目录（针对@import内的路径）
                 paths: [ 'src' ],
                 //指定将图片路径转成base64数据的函数（比如配置urlfunc:"embedurl"，扫描embedurl(test.png)）
                 urlfunc: 'embedurl' ,
                 import: [      //  @import 'foo', 'bar/moo', 每一个.styl文件
                     'foo' ,
                     'bar/moo'
                 ]
             },
             main: {
                 files: [
                     {
                         expand: true ,
                         cwd: 'src' ,
                         src: '*.styl' ,
                         dest: 'src' ,
                         ext: '.css'
                     }
                 ]
             }
         }

上述任务将src目录下的所有.styl文件编译成.css文件。

less，sass的编译插件用法类似，配置上有差异，sass推荐使用grunt-contrib-compass。

（PS:如果你使用webstrom或idea，其实不需要grunt来处理css的预编译，IDE已经内置处理了。）

如果每次修改完都要运行命令编译次，是非常麻烦的，所以我们还需要个实时监听插件grunt-contrib-watch，后面会讲到。

当然亲也可以使用一些编译工具，比如livereload（livereload非常强大，但win平台的软件很弱）和koala。

coffeescript编译

关于coffeescript的争议非常多，上次明河还听到facebook同学关于coffeescript的批评，在阿里技术论坛里也有过争论，不管如何coffeescript的确很诱人。

coffeescript有带了编译工具，可以满足实时编译需求，就是每次运行很麻烦，结合grunt使用，可以很好的消化coffeescript的编译成本（如果你使用webstrom，可以无视编译，已经自动处理鸟。）

grunt-contrib-coffee用法举例：

coffee: {
             compile: {
                 options: {
                     //去掉匿名函数包裹
                     bare: true ,
                     //当编译多个.coffee文件成单个.js时，先合并
                     join: true ,
                     //编译.coffee文件时生成个.map文件，用于链接到coffee源码文件
                     sourceMap: true
                 },
                 files:[
                     {
                         expand: true ,
                         cwd: 'src' ,
                         src: [ '**/*.coffee' ],
                         dest: 'src' ,
                         ext: '.js'
                     }
                 ]
             }
 
         }

实时监听插件

grunt-contrib-watch非常重要，它能监测文件的修改，触发指定任务，比如less、coffee编译等。

先来看个最简单的demo：

watch: {
     options: {
         spawn: false
     },
     scripts: {
         files: [ '<%= pkg.version %>/**/*.coffee' ],
         tasks: [ 'coffee' ]
     }
}

监听源码目录下所有的.coffee文件的修改，触发coffee任务（编译coffee文件）。

spawn配置一般禁掉，设置为true时，运行任务会开启子进程处理，可能会出现不稳定的问题。

files：监听哪些文件的修改

tasks：文件修改后触发哪些任务

coffee: {
             compile: {
                 options: {
                     //去掉匿名函数包裹
                     bare: true
                 },
                 files:[
                     {
                         expand: true ,
                         cwd: '<%= pkg.version %>' ,
                         src: [ '**/*.coffee' ],
                         dest: '<%= pkg.version %>' ,
                         ext: '.js'
                     }
                 ]
             }
 
         }

grunt.registerTask( 'w' ,[ 'watch:scripts' ]);

运行grunt w后，没有报错的情况下，随便修改个coffee文件，会出现类似如下结果：

（PS:registerTask的name不能和task的名称重复，不然会出现死循环，比如这里不能grunt.registerTask(‘watch’]);）

grunt-contrib-watch拥有丰富的配置，一般采用默认配置即可，grunt-contrib-watch可以结合livereload插件使用，可以实现文件发生改变后刷新页面，这个功能很有意思。

grunt.initConfig({
   watch: {
     options: {
       livereload: true ,
     },
     css: {
       files: [ 'public/scss/*.scss' ],
       tasks: [ 'compass' ],
     },
   },
});

livereload会开启个服务器，默认端口号为35729。

在页面中引入监控脚本：

< script src = "http://localhost:35729/livereload.js" ></ script >

或者安装livereload的浏览器插件。

图片压缩工具插件

grunt-contrib-imagemin，能够快速的压缩工程内的图片，非常实用的前端工具，用法非常简单：

imagemin: {
      dynamic: {
          files: [{
              expand: true ,
              cwd: 'src/' ,
              src: [ '**/*.{png,jpg,gif}' ],
              dest: 'dist/'               
          }]
      }
  }

yuidoc文档生成插件

grunt-contrib-yuidoc：基于YUIDOC生成js API文档

yuidoc: {
    compile: {
      name: '<%= pkg.name %>' ,
      description: '<%= pkg.description %>' ,
      version: '<%= pkg.version %>' ,
      url: '<%= pkg.homepage %>' ,
      options: {
        paths: 'path/to/source/code/' ,
        themedir: 'path/to/custom/theme/' ,
        outdir: 'where/to/save/docs/'
      }
    }
  }

paths：js源码位置；

themedir：文档模板位置；

outdir：文档输出位置。

karma单测回归插件

grunt-karma：是karma的grunt插件版，webstrom内置karma回归功能。

demo：

karma: {
   unit: {
     configFile: 'karma.conf.js'
   }
}

会寻找karma.conf.j配置文件。