常用插件的使用—grunt入门指南（下）

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配置文件。