Grunt 入门使用

grunt 好处

grunt是一种自动化构建工具，类似java的maven。
一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作

grunt 安装

1.在开始使用grunt之前，需要安装Grunt Command Line Interface（CLI），以便能够全局性的在本地机器上的任何文件夹中使用grunt命令行工具。Grunt CLI 工具可以使你在不同的项目文件夹中运行不同版本的Grunt任务运行器。（以下命令只针对win和linux系统，linux系统执行一般需要sudo提升权限）。
npm install -g grunt-cli
npm参见npm具体使用 -g 安装在本地库。
2. Grunt CLI工具、Grunt任务运行器以及它的每个插件任务都是Node.js软件包，部署于npm目录。要下载Grunt任务运行器工具在具体项目中使用，请在项目所在的文件夹中执行以下命令（若文件夹中没有package.json文件，请运行npm init 创建一个）。
npm install grunt --save-dev
参数 –save-dev 的使用会把下载的特定版本的Grunt软件包的引用自动保存在package.json文件的devDependencies属性下。这是为了表明，Grunt用于开发，而不是项目本身运行所需要的软件包。
3. 安装插件示例。插件名称中的“contrib”部分表示此插件是Grunt的一个官方插件。
npm install grunt-contrib-jshint --save-dev
JSHint用于对JavaScript文件的静态代码分析。

Grunt 任务配置

Grunt 配置通过一个配置文件实现，必须命名为Gruntfile.js,并应该放在项目的根目录下，即与package.json文件在同一目录位置。

Gruntfile 是一个标准的JavaScript文件。 应该将其作为Node.js模块进行配置。对于要能从Gruntfile外部访问Gruntfile内的代码，必须将其设置在Gruntfile的module.exports 属性内。
1. Gruntfile.js 大体结构，应该以一个包裹函数进行初始化，通过grunt参数提供对Grunt API的访问，然后通过module.exports属性实现公共访问。所有的Grunt配置必须设定放在此函数体中。这里以Grunt中配置JSHint为例。

module.exports = function(grunt){
    //这里是配置内容，grunt参数包含着Grunt API的方法
}

2.使用Grunt API中的initConfig()方法配置具体的插件任务。在该方法中插入的每一个JavaScript对象对应一个插件任务，对象的属性内容是对该插件任务的配置信息。对于JSHint插件，使用属性名称为jshint。琐事多用的准确任务名称会在所选择的插件的文档中进行详细说明。有时插件设置会改动，以插件官档最新配置为准。JSHint 文档

grunt.initConfig({
    jshint: {
        options: {
            strict:true,
        },
        src: ["Gruntfile.js","script/**/*.js"]
    }
});

3.在配置文件中，加载插件任务。
grunt.loadTasks("grunt-contrib-jshint")
4.管理任务列表。在执行Grunt命令时，要指定运行任务的别名（不加别名，则默认执行别名为“default”的任务）。要简单管理任务列表（如执行顺序），可以通过定义别名任务名称并关联到一系列任务来实现。别名在Grungfile中使用Grunt API中的registerTask()方法进行注册。一般在文件末尾注册别名。
grunt.registerTask("default",["jshint",])

简单Gruntfile.js示例。

module.exports = function(grunt){
    //这里是配置内容，grunt参数包含着Grunt API的方法
    grunt.initConfig({
        jshint: {
            options: {
                strict:true,
            },
            src: ["Gruntfile.js","script/**/*.js"]
        }
    });
    grunt.loadTasks("grunt-contrib-jshint") ;
    grunt.registerTask("default",["jshint",])
}

运行grunt

• 运行default别名的任务：
  grunt
• 运行单独任务或别名任务（一个或多个单独任务的组合），直接在命名行指定任务或别名任务。
  grunt jshint 或 grunt default

扩展grunt配置

grunt 支持json数据文件导入、以可替代的配置设定来适应不同需求的多任务。如把package.json文件的内容加载至Gruntfile，把返回值设定配置对象中的pkg属性，并把pkg插入initConfig()方法中使用。

grunt.initConfig(){
    pkg:grunt.file.readJSON("package.json");
    jshint: {
            options: {
                strict:true,
            },
            //package.json有name和version属性
            src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"]
        }
};

多任务和多目标

Grunt 支持吧每一个任务的配置信息划分至若干个单独的配置内容中，已实现不同的任务具体配置选项，来适应不同的使用场合。例如，对不同的文件应用不同的设定，此特性称作多任务。具体实现实在每一个插件配置中增加一个额外的命名对象属性。每一个这样的多任务配置对象称作一个目标。

grunt.initConfig(){
    pkg:grunt.file.readJSON("package.json");
    jshint: {
            options: {
                strict:true,
            },
            grunt:{
                src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"],
            }
            project:{
                options:{
                    trailing:true,
                },
                 src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"],
            }
        }
};

运行多目标

grunt jshint:project

编写Grunt插件

暂时用不着，仅提供参考网址。Grunt 插件参考

引用

grunt 中文网

精通javascript开发