Nodejs是服務端的，用於併發處理事件。

Grunt是應用程式構建，任務管理工具，能夠自動化地許多繁瑣的工作。

sass是css語言的一種拓展，用於更高效更規範寫出css。

環境：node與ruby

grunt的使用需要安裝grunt與nodejs環境，而sass的使用需要安裝sass和ruby環境。

現在安裝好node.js後，可在cmd中輸入node -v檢視是否安裝成功，若成功則會顯示版本號。

安裝好後，在cmd中輸入npm update -g npm，該命令執行後將會把npm配置到系統路徑中。可用npm -v來檢視是否成功

接著輸入 npm install -g grunt-cli（cli是command line interface），將grunt命令配置到系統路徑中。

之後再專案的根目錄下建立好package.json和Gruntfile.js兩個檔案

package.json：該檔案用來儲存一下專案相關的資訊，以及grunt的使用所需要以來的庫。

Gruntfile.js：該檔案是用來配置和定義任務的，這些任務中的一部分依賴於package.json中grunt外掛。

由於本文章主要講述的是sass的自動編譯的實現，故package.json和Gruntfile.js也是以此為例的。（在配置好這兩檔案後使用npm install，便可在專案中安裝相應的外掛）

此為package.json的內容：
{
  "name": "gruntSass",
  "version"
 
: "0.0.1",
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-watch": "*",
    "grunt-contrib-sass": "*"
}
}
在cmd中使用 npm install <模組名> --save-dev便可在其依賴庫中加入相應的模組了。


此為Gruntfile.js的內容：

module.exports = function(grunt) {

    // Project configuration.
grunt.initConfig({

        //Read the package.json (optional)
 
pkg: grunt.file.readJSON('package.json'),

        // Metadata.
meta: {
            basePath: '../',
            srcPath: '../assets/sass/',
            deployPath: '../assets/css/'
},

        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
        '* Copyright (c) <%= grunt.template.today("yyyy") %> ',

        // Task configuration.
sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>style.css': '<%= meta.srcPath %>style.scss'
},
                options: {                       // Target options
style: 'expanded'
}
            }
        },
        watch: {
            scripts: {
                files: [
                    '<%= meta.srcPath %>/**/*.scss'
],
                tasks: ['sass']
            }
        }
    });

    // These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-sass'); 
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
grunt.registerTask('default', ['sass']);
};

Gruntfile.js是實現grunt工具的核心，這檔案中包括了所有配置和索要執行的任務。

想要弄明白Gruntfile.js檔案中的程式碼，我就要從頭開始重新構建它：

module.exports = function（grunt）{

      grunt.initConfig({

            pkg:grunt.file.readJSON('package.json')

   });

};

上述程式碼啟動了配置的初始化函式，把package.json中的設定放到了快取中，這樣就可以在Gruntfile.js檔案中的其他位置引用這些值了

接著是配置一個合併程式中指令碼的任務：

module.exports = function（grunt）{

    grunt.initConfig({

        pkg:grunt.file.readJSON('package.json')，

        concat：{

            options：{
                separetor:';'
            },
            dist:{
                src:['src/**/*.js'],
                dest:'dist/<%= pkg.name %>.js'
            }

        }

    });

};

這段程式碼是讓Grunt從src/目錄中拉出。js檔案，把他們合併後用在package.json中定義的名字保存於dist/目錄下。

sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>style.css': '<%= meta.srcPath %>style.scss'
},
                options: {                       // Target options
style: 'expanded'
}
            }
        }