不是这世界变化快，是我一直没关注。这几年js发展这么快是我怎么也想不到的，今天研究的是js界高大上的Grunt构建工具，因为发现很多老外的开源项目都在用这个。研究一下，还挺方便的。

首先看一下我的目录结构

ProjectA
    |-----build //编译后的all.js等文件放在这里
    |-----core  //typescript项目,里边若干.ts文件
    |-----test  //用编译后的all.js做测试,里边有若干js和html文件

我的需求是这样的，core文件夹里有多个.ts文件，需要按照我指定的顺序编译成一个all.js文件，为什么要指定顺序，是因为js是从上到下执行，没执行到的就是不存在的。如果顺序不对的话运行时会报各种找不到类的错误。除了这个还有以下需求：

• 编译的all.js放到build/目录
• 需要生成build/all.js.map
• 需要生成build/all.d.ts
• 需要生成build/all.min.js
• 基于ES5，Commonjs编译
• 编译后的文件删除注释
• 编译后将build目录下的所有文件复制到test文件夹里做测试

估计已经涵盖大部分typescript开源项目的需求了，我不知道其他人是怎么做这些的，我自己之前一直使用WebStorm来写TypeScript，WebStorm里有一个叫做File Watcher的功能，可以把它配置成每次发现文件改动自动调用编译器tsc来编译TypeScript，它有一个Arguments的文本框，可以添加tsc的编译参数。

我都是这么填的：

--sourcemap E:\ProjectA\core\reference.ts -d --out E:\ProjectA\test\all.js --target ES5 --removeComments

我在reference.ts里指定了ts文件的顺序，所以只编译这一个文件，就达到了按指定文件顺序全部编译的目的。
我写了绝对路径，这样就可以在任何目录里编译了。
因为不能复制文件，就只能把core项目直接编译到test文件夹里做测试了。

测试完后，我还要手动手动把all.js复制回build文件夹，想办法生成min.js等一堆麻烦事。。。直到发现了Grunt。

用Grount实现需求

安装cli

npm install -g grunt-cli

来到项目路径

npm init 命令来创建一个 package.json 文件，回答问题会自动创建package.json，其实一路回车就行了，都有默认答案
好多属性，不知道有什么用的，删掉！看官网教程好像只需要一个name ，一个 version就行，其他删掉了。

{
  "name": "gruntTest",
  "version": "1.0.0",
  "description": "just a test"
}

装第一个依赖项目，必然是grunt本身

npm install grunt --save-dev

安装完成，目录里多了一个node_modules目录，这是nodejs模块安装到的目录。

修改gitignore

.gitignore文件里加入这两个目录，不然被传到github上就不好了

/node_modules
.tscache

现在package.json变成这样了

{
  "name": "gruntTest",
  "version": "1.0.0",
  "description": "just a test",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

因为安装grunt时时加了--save-dev参数，所以会被自动加进依赖里

安装今天的主角，TypeScript的编译器插件grunt-ts

npm install grunt-ts --save-dev

再看package.json如下:

{
  "name": "gruntTest",
  "version": "1.0.0",
  "description": "just a test",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.12.1"
  }
}

安装生成all.min.js的插件

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

安装copy插件

npm install grunt-contrib-copy --save-dev

现在看一眼package.json应该变成这样了

{
  "name": "gruntTest",
  "version": "1.0.0",
  "description": "just a test",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-ts": "^1.12.1"
  }
}

ok ，全部安装完毕，现在可以看grunt-ts官网介绍各种参数怎么用吧

添加一个Gruntfile，基于官网的例子直接修改的

module.exports = function (grunt) {
    "use strict";

    grunt.initConfig({
        ts:  //用来编译typescript的任务
        {
            options: 
            {
                comments: false,               // 删除注释
                target: 'es5',                 // es5,默认为es3
                module: 'commonjs',            // 居然默认是amd?
                declaration: true,             // 生成.d.ts
            },

            build: 
            {
                src: ["core/reference.ts"],  
                // reference: 'core/reference.ts',  //第一次生成reference.ts,之后手动修改顺序,之后注释掉
                out: './build/all.js', 
            }
        },


        uglify: //uglify插件用来代码压缩,生成min.js
        {
            min: 
            {
              files: {'build/all.min.js': ['build/all.js']}
            }
        },

        //copy插件把build目录下的所有文件复制到test文件夹
        copy:
        {
           builds: {expand: true, cwd: 'build/', src: '*', dest: 'test/'}
        }

    });

    //加载之前命令行安装的3个插件
    grunt.loadNpmTasks("grunt-ts");     
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-uglify");

    //任务顺序: 编译typescript -> 生成min.js -> 复制build目录里的文件到ProjectA_Test
    grunt.registerTask("default", ["ts:build" , "uglify:min" , "copy:builds"]);
};

可以编译了，打开命令行，输入grunt ，应该是这样的

E:\ProjectA> grunt

Running "ts:build" (ts) task
Compiling...
Cleared fast compile cache for target: build
Fast compile will not work when --out is specified. Ignoring fast compilation
Using tsc v1.0.1

TypeScript compilation complete: 4.51s for 1 typescript files

Running "uglify:min" (uglify) task
>> 1 file created.

Running "copy:builds" (copy) task
Copied 4 files

Done, without errors.

Done了，没有错误！