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

來源:互聯網
上載者:User

文章簡介:早前聽說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


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。