自从用了GRUNT以后腰不疼了，腿不酸了，前端打包都自动化了，省去了不少的重复手工操作。GRUNT给人的感觉就是各种高端、牛逼、好使呀，下面我就来介绍一下GRUNT常用的一些插件grunt-contrib-unglify   用于javascript文件的压缩和合并的，在第一篇我们讲过grunt-contrib-concat   用于合并js代码，在第二篇讲过

grunt-contrib-jshint   用于检测文件中的js语法问题

jshint用来检查语法错误，比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。

jshint: {
    options: {
        eqeqeq: true,
        trailing: true
    },
    files: ['Gruntfile.js', 'lib/**/*.js']
},

上面代码先指定jshint的检查项目，eqeqeq表示要用严格相等运算符取代相等运算符，trailing表示行尾不得有多余的空格。然后，指定files属性，表示检查目标是Gruntfile.js文件，以及lib目录的所有子目录下面的JavaScript文件。

grunt-contrib-copy   用于复制文件到你想要的文件夹处

copy: {
  main: {
    src: 'src/*',
    dest: 'dest/',
  },
},

 

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: {
  main: {
    expand: true,
    cwd: 'src/',
    src: '**',
    dest: 'dest/',
    flatten: true,
    filter: 'isFile',
  },
},

 

grunt-contrib-clean  用于删除文件或目录的插件

clean: {  
  build: {  
    src: ["path/to/dir/one","path/to/dir/two"]  
  }  
}  

 

grunt-contrib-watch 用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: {
   scripts: {
    files: '**/*.js',
    tasks: 'jshint',
    options: {
      livereload: true,
    },
   },
   css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: true,
    },
   },
},

grunt-contrib-cssmin  用于压缩CSS文件

  cssmin: {
      minify: {
        expand: true,
        cwd: 'css/',
        src: ['*.css', '!*.min.css'],
        dest: 'css/',
        ext: '.min.css'
      },
      combine: {
        files: {
          'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
        }
      }

需要查询更多的grunt插件，请猛击这里，不过以上几款插件应该能解决大部分前端人员的打包问题