前端工具箱--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'");
    });
};