Grunt:JavaScript 世界的构建工具。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。

运行Grunt构建工具需要依赖以下两个文件:

  • package.json
  • Gruntfile.js。
// 初始化生成package.json
npm init
// 安装grunt至package.json中的devDependencies内
npm install grunt --save-dev
// 安装需要支持的第三方grunt插件
npm install grunt-contrib-uglify grunt-contrib-concat
// 新建Gruntfile.js
touch Gruntfile.js

如果在npm install安装过程中,如果安装过程一直在等待,那就是访问国外网站不稳定的问题,可以使用国内淘宝NPM镜像!

//使用淘宝定制的 cnpm  命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org

常用的插件:

  • 实现监控:grunt-contrib-watch
  • 语法检查:grunt-contrib-jshint
  • 压缩:grunt-contrib-uglify
  • 合并:grunt-contrib-concat
  • 编译less:grunt-contrib-less
  • 编译jade:grunt-contrib-jade
  • 同时运行多个任务:grunt-contrib-concurrent

Gruntfile文件的组成部分:

  1. “wrapper”函数:module.exports=function(grunt){}
  2. 项目与任务配置:grunt.initConfig
  3. 加载grunt插件和任务:grunt.loadNpmTasks
  4. 自定义任务

下面我们来配置一个实时编译jade和less的Gruntfile文件,代码如下:

module.exports = function(grunt) {
  // 项目与任务配置
  grunt.initConfig({
    watch: {
      html: {
        files: ['main.jade'],
        tasks: ['jade'],
        options: {
          livereload: true
        }
      },
      css: {
        files: ['less/main.less'],
        tasks: ['less'],
        options: {
          livereload: true
        }
      },
      less:{
          files: ['less/*.less']
      }
    },
    less: {
      development: {
        options: {
          compress: false,
          optimization: 2
        },
        files: {
          'css/main.css': 'less/main.less'
        }
      }
    },
    jade: {
      development: {
        options: {
          pretty: true
        },
        files: {
          'main.html': 'main.jade'
        }
      }
    },    
    concurrent: {
      tasks: ['watch', 'jade', 'less'],
      options: {
        logConcurrentOutput: true
      }
    }
  })
  // 加载grunt插件和任务
  grunt.loadNpmTasks('grunt-contrib-watch')  
  grunt.loadNpmTasks('grunt-contrib-jade')
  grunt.loadNpmTasks('grunt-contrib-less')
  grunt.loadNpmTasks('grunt-concurrent')
  // 注册自定义的grunt任务
  grunt.registerTask('default', ['concurrent'])
}

小结:把机械化重复性的工作,交给机器去做。使用自动化工具可以减轻你的劳动,简化你的工作。