前端工具箱--grunt

大概在今年4月份的时候听到这个牛逼哄哄的东西，grunt，那时候没什么特别的概念，只是有个模糊的印象--自动化。

后来，一直没有时间去了解这个自动化到底TM是个什么样的神奇玩意。直到前几天，忽然又想到这个小东西，便开始了我的学习之路。

首先说说，grunt到底是什么，没错，标题说的很清楚，这小东西，就是一个前端的工具箱，可以把我们使用的一大堆插件集合起来，

使用命令的方式，实现代码 自动的 优化。

grunt的项目中必不可少的两个小兄弟：一个名字叫 Gruntfile.js，他的另一个小伙伴叫 package.json。有了这个两个小东西，要实现

代码 自动化的优化，就靠谱了。

package.json，这个小东西是用来 存储已经作为npm模块发布的项目元数据（也就是依赖模块）如：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "jquery": "^1.11.1"
  }
}

 

Gruntfile.js，这个小伙伴是grunt的核心配置文件，要用到的插件什么的都需要在这里面配置，可以使用

npm install <moduleName> --save-dev 来自动的将依赖添加到package.json

Gruntfile.js 内容被包含在wrapper函数中，下面一个完整点的例子：

//wrapper function
module.exports = function(grunt){
    //project configuration
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat:{
            options:{
                //定义一个用于插入合并输出文件之间的字符
                separator:';'
            },
            dist:{
                //将要被合并的文件
                src:['src/**/*.js'],
                //合并后的JS文件的存放位置
                dest:'dist/<%= pkg.name %>.js'
            }
        }
    });

    //加载grunt插件
    grunt.loadNpmTasks('grunt-contrib-concat');

    //设置grunt的task
    grunt.registerTask('test',['concat']);
    //设置默认的task
    grunt.registerTask('default',['concat']);

    grunt.registerTask('myTask','my task test',function(){
        grunt.log.writeln("this is my test of 'grunt'");
    });
};