使用Nodejs和Grunt實現SASS的自動編譯

文章簡介：早前聽說Nodejs和Grunt很強大，特別是用來構建自動化的前端開發，更是強大無比。但一直礙於自己掌握的技術有限，不敢深入，也未曾深入下去。最近在開始學習SASS，也慢慢的接觸這方面的東西。為了能更好的讓SASS項目實現自動化編譯，打算使用Nodejs和Grunt來試試。

早前聽說Nodejs和Grunt很強大，特別是用來構建自動化的前端開發，更是強大無比。但一直礙於自己掌握的技術有限，不敢深入，也未曾深入下去。最近在開始學習SASS，也慢慢的接觸這方面的東西。為了能更好的讓SASS項目實現自動化編譯，打算使用Nodejs和Grunt來試試。

SASS的編譯的話題，在《SASS編譯》有進行過介紹，文中介紹的方法是在Ruby環境下，使用sass命令配合其各種不同的參數來實現SASS的編譯。那麼今天我們換過一種方式，使用Nodejs和Grunt來實現SASS的自動編譯。

簡述

作為一個開發人員（有很多人不認為前端人員不是開發人員，此處暫且不論），都希望在實際開發中偷懶。避免一些重複性，沒有意義的工作，當然也很想藉助一些工具，提高自己的開發效率，騰出更多的時間去做自己喜歡的事。

其實，有很多新的工具可以協助我們加速開發和簡化我們的工作流程。但作為一位前端人員來說，往往這些工具又令人生畏。這回我也是為了能更好的整會SASS，所以也硬著頭皮開始接觸這些新東東。那麼今天我們就一起來嘗試在Nodejs、Grunt和SASS配合，實現SASS項目的自動化編譯。

Nodejs是一個伺服器端 JavaScript 解譯器，它將改變伺服器應該如何工作的概念。它的目標是協助程式員構建高度可伸縮的應用程式，編寫能夠處理數萬條同時串連到一個（只有一個）物理機的串連代碼。

Grunt 是一個應用程式構建、任務管理工具。它可以實現生產自動化，避免大理繁瑣單調重複的工作。目的就是為了自動化，減少你重複做的工作。當你配置好了一個Grunt任務管理之後，它可以幫你減少很多重複性工作，按照配置使用並減少出錯可能。

SASS是對CSS（層疊樣式表）的文法的一種擴充，也是最成熟的一款CSS前置處理器語言，它可以使用變數、常量、嵌套、混入、函數等功能，可以更有效有彈性的寫出CSS。

其中Grunt是一個JavaScript命令列選手，而SASS是一個CSS前置處理器程式，兩者結合起來，就是一個很強大的自動化工具。可以快速將SASS編譯成CSS。

環境需求

在開始之前，我們需要改變以前一些觀念。對於一位前端人員來說，以前在大家心中的概念就是如何將PSD圖轉換成HTML和CSS，再加上Javasctrip處理一些互動效果，完成瀏覽器安全色就OK。如此一來，大家拿到設計，有個編輯器（強大一點的就會配個IDE）開始工作了。然而，我們應該超著強大的未來向前走一步，適合一些自動化功能，協助我們解決一些重複性的工作。

如果您有瞭解過SASS的話，你肯定會知道，SASS需要Ruby環境；而Grunt又離不開Nodejs的npm。所以您在使用Grunt和SASS之前，您需要先安裝一些東西，也就是環境需求吧：

• Ruby環境
• SASS安裝
• Nodejs環境
• Grunt安裝

安裝Ruby和SASS

首先我們需要在電腦上安裝Ruby和SASS。如果您使用的是Mac，您就沒必要安裝Ruby。如果您使用的是Window系統，你需要安裝Ruby。

當你確認你的電腦裝好了Ruby，你可以在你的命令終端運行：

$ gem install sass 

或者

$ sudo gem install sass 

你也可以使用：

$ gem install sass --pre 

安裝SASS的pre-release版本。這樣在你的電腦中就可以全域使用sass命令。

有關於SASS的安裝以及一些基本操作，可以參閱：《SASS編譯》和《SASS調試》相關介紹。

安裝Nodejs

由於使用Grunt需要Nodejs的支援，所以我們要確認自己的電腦已安裝了nodejs。安裝好以後看看在命令列下能不能執行node命令了，如果可以那麼就表示安裝成功了。

簡單點的安裝就是直接進入Nodejs官網中下載各系統所需的安裝包進行安裝。

如果你想挑戰一些更有意思的安裝方法，你可以使用命令安裝。有興趣的同學可以看看下面的教程：

• How to Install Node.js
• Installing and running node.js on Mac OS X
• Setting up Node.js and npm on Mac OSX
• Installing node.js, npm, and redis on Mac OS X

安裝GRUNT

開始使用Grunt很簡單。如果你是第一次使用這個東東，首先需要安裝他。詳細的安裝過程可以參閱：Mac OS X下安裝Grunt和Window下安裝。在本文中，主要以Mac OS X環境做一個簡單的介紹。

在安裝Grunt之前，首先要確定你的電腦安裝好了Nodejs。在寫這篇教程之時，我的電腦安裝是：

$ node -v v0.10.13 

npm版本是：

$ npm -v 1.3.2 

接下來要安裝Grunt是v0.4.1版本。註：如果你的電腦之前安裝了Grunt其他版本，你需要先卸載之前版本，才能安裝Grunt的最新版本。

安裝grunt命令列介面（CLI）

在安裝grunt.js之前，需要先安裝Grunt的命令列介面。安裝方法也很簡單，開啟你的命令終端，在命令列中，輸入：

$ npm install grunt-cli -g 

這樣安裝，你有可能會安裝不成功，如下圖所示：

當你看到，命令終端提示您：

Please try running this command again as root/Administrator. 

此時，你需要在上面的命令前面加上sudo：

$ sudo npm install grunt-cli -g 

接下來輸入您的root許可權密碼，命令將會自動安裝。最終安裝後，會顯示相關的資訊，如下圖所示：

上面的命令將grunt命令選擇區安裝在你系統的路徑下，可以讓grunt運行在所有的目錄上。也就是說這是一個全域的安裝。

這樣Grunt的命令選擇區就安裝成功了，也可以開始使用Grunt了，如果你要卸載grunt的話，可以在你的終端直接輸入：

$ npm uninstall grunt -g 

建立項目

環境建立配置好，我們一起來建立一個測試專案，方便後續的內容繼續。我一般喜歡把項目放在Sites目錄下，比如，在這裡，我建立了一個"gruntSass"的項目，並放在了Sites下：

$ cd Sites $ mkdir gruntSass 

同時我喜歡將Grunt相關檔案放置在_build目錄下，因此，需要在gruntSass目錄中建立_build目錄，用來放置Grunt專案管理檔案：

$ mkdir _build 

建立好項目之後，接下來需要在項目的根目下建立package.json和Gruntfile.js兩個檔案：

$ cd gruntSass $ touch package.json Gruntfile.js 

接來將下面一段代碼複製粘貼到項目包管理檔案package.json中：

{   "name": "gruntSass",     "version": "0.0.1",     "devDependencies": {  

       "grunt": "0.4.1",         "grunt-contrib-watch": "0.4.3", 

        "grunt-contrib-sass": "0.4.0"     } } 

接著將下面的代碼複製粘貼到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: { 

                    sourcemap: "true" 

                }

             }

         },

         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"]); }; 

這個時候在Sites/_build下運行：

$ sudo npm install 

會看到終端跑一系列的東東，至於跑的是什麼，我也不懂，如下所圖所示：

終端命令跑完之後，就會自動在你的項目中建立一個node_modules目錄，裡面放置了一些模組功能檔案：

接著在終端中運行：

$ grunt watch 

命令終端顯示資訊：

Running "watch" task Waiting...OK 

只要你修改了你的SASS檔案，終端就會提供監控資訊，並同時轉譯你的Sass代碼：

>> File "../assets/sass/style.scss" changed. Running "sass:dist" (sass) task  Done, without errors.

 Completed in 0.701s at Mon Jul 22 2013 16:38:35 GMT+0800 (CST) - Waiting... 

這樣就開啟了Grunt 監控SASS。也就完成了我們Grunt轉譯SASS的功能。

SASS轉譯CSS

經過前面的介紹，我們現在可以在項目中通過Grunt來管理和轉譯SASS項目，現在我們回過頭來簡單的瞭解一些關鍵處。

通過前面的介紹，一旦在項目中運行：

$ sudo npm intsall 

如果上面命令運行成功之後，Grunt JS packages就會以node_modules目錄的形式添加進來，並且放置在你的安裝目錄之下，此教程是在Sites/gruntSass/_build下面。這樣SASS就可以轉譯成CSS。你查看Gruntfile.js檔案就可以看到：

sass: {

   dist: {

     files: { 

      "<%= meta.deployPath %>style.css": "<%= meta.srcPath %>style.scss"

     },

     options: {

        sourcemap: "true"     }   } }, 

就這麼一段代碼，能讓style.scss以及通過@import匯入進來的.scss轉譯成style.css。當然，我們需要在_build目錄下運行：

$ grunt 

命令列中會顯示提示資訊：

Running "sass:dist" (sass) task  Done, without errors. 

其實大家可以回憶一下，這裡的grunt命令就相當於sass命令一樣。

當然grunt命令能讓.scss轉譯成.css，主要是因為人我們在Gruntfile.js中將預設任務設定為：

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

SASS Watch命令

在sass命令中配置--watch參數，我們可以將.scss時時監控，一旦有進行過任何的修改，就會自動轉譯成對應的.css。這個讓我們的工作變得更加的簡便。其實在Grunt中，我們同樣可以實作類別似的功能。

在項目的_build目錄下，我們建立了一個package.json檔案，在這個檔案中，你可以看到類似於下面的一段代碼：

{   "name": "Test-SASS-To-CSS",   "version": "0.1.0",   "devDependencies": { 

    "grunt": "~0.4.1",     "grunt-contrib-sass": "*"   } } 

我們只需要在這個基礎上添加"grunt-contrib-watch":"*"添加到package.json檔案中：

{     "name": "Test-SASS-To-CSS",     "version": "0.1.0",

     "devDependencies": {         "grunt": "~0.4.1",

         "grunt-contrib-sass": "*",

         "grunt-contrib-watch": "*"     } } 

在本教程中使用的樣本，其package.json檔案內容類別似於：

{   "name": "gruntSass", 

    "version": "0.0.1",

     "devDependencies": {

         "grunt": "0.4.1",

         "grunt-contrib-watch": "0.4.3",

         "grunt-contrib-sass": "0.4.0"     } } 

通過下面的命令將watch package安裝到_bluid目錄之下：

$ npm install 

這樣基本上完成了。如果你這個項目按這樣的方法建立，我相信你建立下一個項目的時候會非常的快。不過別忘了，你同樣需要在Gruntfile.js檔案中加入：

watch: { 

   scripts: {

       files: [

         "<%= meta.srcPath %>/**/*.scss"

       ],       tasks: ["sass"]    } } 

grunt.loadNpmTasks("grunt-contrib-watch"); 

這個時候在命令終端運行：

$ grunt watch 

運行後出現提示資訊：

Running "watch" task Waiting...OK 

一量你修改了任何.scss檔案，就會監控到，並自動轉譯：

>> File "../assets/sass/style.scss" changed.  

Running "sass:dist" (sass) task  Done, without errors. Completed in 0.692s at Mon Jul 22 2013 16:36:27 GMT+0800 (CST) - Waiting... 

其實這裡的grunt watch就想當於sass --watch。

如果你跟著上面的內容走到這裡，我想你也可以順利的使用Nodejs+Grunt搞定SASS項目的轉譯。那麼以後每一個項目你都可以這樣操作，如果你對Grunt的熟悉的話，他還可以協助你構建其他自動化，一句話，就是強大的讓你嚇倒很多小同學。

擴充閱讀

• Getting started with Grunt and Sass
• Compile SASS files into one CSS file Grunt JS Tutorial
• Get Up And Running With Grunt.js
• Import a Whole Directory with Sass (Using Grunt)
• Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt