Grunt快速使用笔记

本篇文章由：http://xinpure.com/grunt-quick-note/

http://www.gruntjs.net/getting-started Grunt中文网

安装 Grunt 命令行

npm install -g grunt-cli

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

Grunt 会在具体的工作目录中进行安装

添加 Gruntfile.js/Gruntfile.coffee

Grunt 官方案例:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/**/*.js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        },
        qunit: {
            files: ['test/**/*.html']
        },
        jshint: {
            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
                options: {
                //这里是覆盖JSHint默认配置的选项
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            }
        },
        watch: {
            files: ['<%= jshint.files %>'],
            tasks: ['jshint', 'qunit']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat'); //文件合并模块
    grunt.loadNpmTasks('grunt-contrib-uglify'); //文件压缩模块
    grunt.loadNpmTasks('grunt-contrib-qunit');  //文件测试模块
    grunt.loadNpmTasks('grunt-contrib-jshint'); //文件检测模块
    grunt.loadNpmTasks('grunt-contrib-watch');  //文件监听模块

    grunt.registerTask('test', ['jshint', 'qunit']); //grunt test命令 执行此任务

    grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);  //grunt命令，执行的默认任务

};

根据具体的工作目录，对以上配置进行调整(主要就是修改文件路径)，按需求调整 grunt 任务。

添加 package.json

方式一：手动创建 package.json 文件

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-qunit": "^0.7.0",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

可通过 npm install 命令，直接安装 devDependencies 中的所有模块

方式二：使用 npm init 创建(步骤略繁琐，但自我感觉思路更清晰)

此命令会创建一个基本的 package.json 文件(一种命令行的配置方式)

input:

npm init

output:

name: (grunt_test) 
version: (1.0.0) 
description: This is grunt test
entry point: (Gruntfile.js) 
test command: grunt
git repository: 
keywords: test
author: xinpureZhu
license: (ISC) 
About to write to /Project/grunt_test/package.json:

{
  "name": "grunt_test",
  "version": "1.0.0",
  "description": "This is grunt test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "grunt"
  },
  "keywords": [
    "test"
  ],
  "author": "xinpureZhu",
  "license": "ISC"
}

这样 package.json 文件就创建好了，接下来就是一个一个模块的安装(相对方式一的一次性安装，略麻烦的地方)

input:

npm install grunt --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-qunit --save-dev

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

npm install grunt-contrib-concat --save-dev

npm install <module> --save-dev 在安装模块的同时，还会自动将其添加到 package.json 文件的 devDependencies 配置段中

开始使用 Grunt

package.json 和 Gruntfile 都必须存放在项目的根目录下

执行 grunt 命令，就会执行 Gruntfile 文件里配置的 default 任务

使用过程中可能会存在 warnings, 可以使用 grunt --force 忽略这些警告。

在写项目的过程中，可以执行 grunt watch 监听文件，当文件被修改时，自动执行 文件合并、文件压缩等操作(按需求配置 watch tasks)