本文在上一篇文章Grunt打造前端自动化工作流(一):Grunt安装基础上介绍一些常用插件的功能以及参数配置。

啰嗦一句,所有插件的安装方法:进入项目所在文件夹,启动命令行工具,输入npm install xxx --save-dev。

grunt-contrib-uglify

常见两种使用场景:

1.压缩指定的文件,

     uglify:{
          build:{
               files:{
                    'build/js/a.min.js':'js/a.js',
                    'build/js/bc.min.js':['js/b.js','js/c.js']    //这种形式将把 b.js 和 c.js 压缩后合并
               }

          }
     }

将js/a.js压缩至build/js/a.min.js,将js/b.js和js/c.js压缩合并至build/bc.min.js

2.将多文件按原文件夹结构压缩

     uglify:{
          build:{
               files:[{
                    expand:true,
                    cwd:'js',
                    src:'**/*.js',
                    dest:'build/js',
                    ext:'.min.js'
               }]
          }
     }

将js文件夹下的所有Js文件均同名压缩至build/js目录下,且以.min.js为后缀名。

grunt-contrib-jshint

     jshint:{
          files:{
               src:['js/*.js']
          },
          options:{
               globals:{
                    sub:true,    //对于属性使用a.b而不是a['b']
                     eqeqeq:true,  //对于简单类型,使用===和!==,而不是==和!=
                    }
          }
     }

对js文件夹下的所有Js文件进行语法检查。关于检查的标准在options里设置。还有更多的标准设置一搜一大把,我就不详述了。

grunt-contrib-concat

     concat:{
          build:{
               src:['js/a.js','js/b.js'],
               dest:'build/js/ab.js'
          }
     }

将js/a.js和js/b.js合并为build/js/ab.js,这个插件不仅可以合并JS文件,任意类型文件都可以合并。

grunt-contrib-imagemin

1.压缩指定图片

        imagemin:{
                build:{
                       fils:{
                             'img/a.min.js':'img/a.js'
                       }
                }
       }

2.将多张图片按原文件结构压缩

          imagemin:{
               build:{
                    files:[{
                              expand:true,
                              cwd:'img',
                              src:['**/*'.{jpg,png,jpeg}],
                              dest:'build/img'
                     }]
               }
          }

将img文件夹下的所有图片(包括jpg,png,jpeg)同名压缩至build/img下。

grunt-contrib-cssmin

      cssmin:{
      }

同样有两种方式,和grunt-contrib-uglify的功能同为压缩,不同的是压缩CSS文件。具体代码我就不复述了。

grunt-contrib-connect

这个插件常见的用法是和grunt-contrib-watch和connect-livereload结合起来,实现页面的实时刷新。这个功能是我非常喜欢的,具体怎么实现的呢?

因为实现实时刷新这个功能比其他的功能稍微复杂些,所以我写的较详细,下面的这种方式不用在浏览器上装插件,也不需要配置服务器环境。

还有另外一种需要装插件,需要配置服务器环境的方法,今天因为一些原因不能实现了。以后会再更新。

          var lrPort = 35729;
          var lrSnippet = require('connect-livereload')({port:lrPort});
          var lrMiddleware = function(connect,options){
               return [lrSnippet,connect.static(String(options.base)),connect.directory(String(options.base))]
          }
          grunt.initConfig({
               connect:{
                        options:{
                                    port:8000,
                                    hostname:'localhost',
                                    base:'.'
                         },
                         livereload:{
                                options:{
                                        middleware:lrMiddleware
                                }
                         }
               },
              watch:{
                      client:{
                             options:{
                                       livereload:lrPort
                              },
                             files:['html/*.html']
                       }
              }
         });
         grunt.loadNpmTasks('grunt-contrib-connect');
         grunt.loadNpmTasks('grunt-contrib-watch');
         grunt.registerTask('live',['connect','watch']); 

在命令行输入grunt live后,用浏览器进入localhost:8000就能看到html文件夹下的所有html文件,如果其中有index.html文件,会直接显示index.html,没有的话会显示目录。这个时候你在某个html文件下修改一些元素,html元素或者CSS之类的。你在按下ctrl+s的同时,页面也就刷新了,无需再手动刷新。这也是为什么我很喜欢这个功能的地方。

要注意connect-livereload这个插件和其他的插件写法是不同的。是因为以grunt-contrib开头的插件都是官方开发并支持的。这里并不影响使用。

grunt-contrib-watch

watch插件一般都是和其他插件配合使用。比如grunt-contrib-connect,还有其他的我没有实际用过,就不说了。以后我用到的话,会再补充。

参考文章:besteric的GitHub