Grunt简介

1.grunt安装

• node版本 v0.8+
• 版本号为偶数，稳定

1. 2.安装grunt-CLI

• • 命令行工具cli

1. 3.创建一个简单的网站

• • 注意 Gruntfile.js 文件的首字母大写！

1. 4.安装grunt

 

 

2.常用插件

   

•     Contrib-jshint——javascript语法错误检查；
•     Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
•     Contrib-clean——清空文件、文件夹；
•     Contrib-uglify——压缩javascript代码
•     Contrib-copy——复制文件、文件夹
•     Contrib-concat——合并多个文件的代码到一个文件中
•     karma——前端自动化测试工具

 

3.代码判断

 

使用 cssmin 插件（压缩css代码）

 

使用csslint插件（检查css语法错误）

 

 

https://www.npmjs.com/package/grunt-contrib-csslint

 

npm install grunt-contrib-csslint --save-dev

grunt.loadNpmTasks('grunt-contrib-csslint');

 

csslint: {

  options: {

    csslintrc: '.csslintrc',

    formatters: [

      {id: require('csslint-stylish'), dest: 'report/csslint_stylish.xml'}

    ]

  },

  strict: {

    options: {

      import: 2

    },

    src: ['path/to/**/*.css']

  }

}

 

 

jshint 配置

.jshintrc 文件, json格式

JSHint默认使用用户home目录下的.jshintrc文件（json格式）作为配置文件

参数小结：

http://www.cnblogs.com/tadini/p/5279335.html

 

4.自动化

 

第一步。配置watch将监控哪些文件的变化，以及这些文件一旦变化，要立即执行哪些插件功能。

如下图，watch将监控src文件夹下所有js文件和css文件的变化，一旦变化，则立即执行jshint和uglify两个插件功能。

 

npm install grunt-contrib-watch  --save-dev

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default',['jshint','uglify','watch']);

 

5.批量安装插件

先写好配置文件

再执行命令

npm install