入门指南--grunt学习笔记（1）

1.构件化工具的诞生

软件开发会经历如下几个过程。

• 混沌阶段：混乱不堪的代码，重复代码漫天飞
• 模块化阶段：为了增强维护性，把代码模块化，增强复用
• 配置化阶段：代码变成一个个模块，复用性提高啦，但每次仍然需要编码来吧这些模块串起来。虽然开发量很低啦，但仍然需要开发。将这些把模块串起来的逻辑放到框架里，框架根据一个配置文件（一般为ini,xml,json文件类型）来决定如何串起来这些模块。

• 管理系统化阶段：对于程序员用户来说，做成可以配置的就基本ok啦。但对于计算机小白用户，修改配置文件的门槛还是太高啦。我们需要做一个图形界面出来，来修改配置文件。

  当然配置信息存储的形式，不一定非得是个文件，只要能存储的都可以啦。db，文件都行，各有优缺点，仔细权衡。

2.武器档案

grunt的工具就是一个处于配置化阶段的产物。它是一个小框架，负责把各种模块（grunt里称之为插件）串起来。支持了两个基本功能：1.能够容纳新的模块接入 2.模块间的关系配置化

名称：grunt
用途：构件化工具
使用文档：http://www.gruntjs.org/ 或http://www.gruntjs.com/

3.安装

第一步，安装grunt-cli

npm install -g grunt-cli

执行完这一步以后，grunt命令已经存在啦，只不过这个grunt命令依赖于模块还没有安装。所以这时执行grunt命令，提示错误如下。因此我们还需要下一步。

C:\模拟磁盘\projects\grunt\grunt-helloworld>grunt -v
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

第二步，安装grunt

npm install grunt

再当前目录下安装grunt模块，这次再执行grunt -v看看（注意：再当前目录下执行才可以）。

C:\模拟磁盘\projects\grunt\grunt-helloworld>grunt -v
Initializing
Command-line options: --verbose

Reading "???" Gruntfile...ERROR
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

可以看到第一步中的错误没有啦，但仍然有错误提示。根据提示我们知道，这个工具依赖的配置文件，我们没写。看样子还得再操作一步才行。

注意：grunt命令时安装grunt-cli模块时产生的，如果只是安装grunt模块是不会有grunt命令的。

第三步，写Gruntfile配置文件
在当前目录下新建一个文件，命名为Gruntfile.js,内容如下。

// 包装函数
module.exports = function(grunt) {
    // 任务配置
    grunt.initConfig({
        'hello-world':{}
    });
    // 自定义任务
    grunt.registerTask('hello-world', 'My "asyncfoo" task.', function() {
        grunt.log.writeln('hello world');
    });
    grunt.registerTask('default', ['hello-world']);
};

然后再当前目录执行下grunt命令，输出如下：

C:\模拟磁盘\projects\grunt\grunt-helloworld>grunt
Running "hello-world" task
hello world

Done, without errors.

这里自定义一个输出hello world的模块，然后让grunt框架使用它。具体api就不细说啦，参考上面提到的文档。