nodejs編譯sass模塊包 node-compass，與gulp包gulp-sass使用方法

簡介：node express或者就是node項目中，要自動編譯sass方法很多，比如gulp 比如考拉，比如今天我想說的這個包node-compass。

編譯sass的三種方法：

前提條件： 都需要電腦中安裝好ruby和compass.

• 方法一： 命令行編譯sass:
• 方法二：gulp-sass
• 方法三：node-compass

方法一： 命令行編譯sass:

compass compile

回車確認即可生成對應的css代碼。新生成的css文件與sass文件在同一目錄下。這是最基礎的sass編譯方法。

方法二：gulp-sass

(一).前提條件：

電腦中安裝有ruby,compass;

項目中已經安裝與配置好基本的gulp（配置與安裝本文不介紹。gulp基本用法也不介紹，不會的先去學gulp基礎）

(二).下載gulp-sass包：

npm install gulp-sass --save-dev

 

(三).基礎用法：

在你的gulpfile.js中加入以下代碼：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task("sass", function() {
    return gulp.src("test/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("public/css"));
});

gulp.task('watch', function () {
    gulp.watch("test/*.scss", ["sass"]);
});

  ------------------------------------------------------------------------------------------

解釋：頭兩句引入模塊，沒啥可說的。

第5句：gulp.src() 里面參數為你的sass文件路徑，比如"test/a.scss"--表示自動編譯test文件夾下的a.scss。如果需要編譯該文件夾下的所有scss文件，則用*表示所有：test/*.scss.

第6句： 照着寫。具體參數解釋我也不曉得，readme里沒寫，我暫時也不想去找是啥意思。

第7句： gulp.dest()中的參數為編譯好的css文件所在的文件夾，不需要具體指定到文件名。因為gulp會自動生成一個與對應sass同名的css放在這個文件夾中,所以也不需要你事先手工創建css文件。

第10~12句： 我們當然要用watch來監視所有改動的sass文件。[watch不會用的，先去看看gulp基礎吧]。watch()的第一個參數，放入所有需要被監視的sass,一般來說，與第5句的參數一樣

------------------------------------------------------------------------------------

 (四).啟動gulp 監視：

項目根目錄下命令行： 

gulp watch

啟動成功后，命令行中會顯示如下信息：

 

然后，我在test文件夾中新建一個a.scss。並寫入如下代碼：

a.scss

div{
  background:red;
  span{
    color:green;
  }
}

同步的，gulp自動在public/css文件下新建一個a.css並生成對應的css代碼。

 

(五).其他：

gulp-sass的readme中還有這么一句：

You can also compile synchronously, doing something like this:

你也可以同步編譯，如下做：

```javascript
'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

無非就是把之前的sass().on()變成了sass.sync().on;然而依舊需要打開gulp watch才能自動編譯。

我並沒有發現2種寫法在node express項目中的區別。。。。所以問題暫留,反正我目前的express網站都是用的第一種寫法，gulp watch之后，都是同步編譯sass。

方法三：node-compass

下文例子，皆為express generator 生成的express項目作為示范，可能由於版本不同，部分代碼有所出入。若有不同自行參考修改。

(一).前提條件：

電腦中安裝有ruby,compass;

如果沒有，可以通過如下命令安裝：

$ gem update --system
$ gem install compass

(二).下載node-compass包：

    npm install node-compass

(三).用法：

官方readme寫的最簡單的用法是：

var compass = require('node-compass');
app.configure(function() {
    app.use(compass());
});

 

這里，我用webstorm 創建了一個新node express項目，使用express generator生成的項目，並且在最初就設置了css 為compass,所以自動在app.js中生成了相關代碼：

app.use(require('node-compass')({mode: 'expanded'}));

 

 

(四).配置

默認：

node-compass需要你的資源文件夾名為“public”,你的所有 `*.scss` 和 `*.css` 文件都需要位於  '/public/stylesheets/'.中。

其實，我們只需要創建sass文件就夠了，會自動創建同名css的。

例如這個項目結構：我手工創建了style.scss文件，項目將會自動生成了style.css:（注意這里，我說的是‘將會’）

需要注意的是：不同於gulp的那種同步編譯。雖然會自動生成和編譯對應的css文件，但我們需要先正常的啟動express項目，然后去瀏覽器里運行一次項目，項目中才會自動生成和編譯對應css文件。

 

如何自定義設置資源文件夾？

可以通過給中間件傳入一組設置信息的數據，改變根資源文件夾。

compass({
    project: path.join(__dirname, 'myAssets')
});

 

由於例子項目是通過express generator創建的，故參照上述代碼新增app.js中的如下代碼（黃色部分）（你的項目結構和express generator版本可能和我不同，所以僅作為參考）：

app.use(require('node-compass')({
    project: path.join(__dirname, 'myAssets'), 3     mode: 'expanded'
}));

 

再在項目根目錄下新建文件夾myAssets,再在其中新建文件夾stylesheets，里面新建一個s1.scss文件。重啟一下express項目，瀏覽器里刷新一道。現在stylesheets中已經自動新建了s1.css。

這樣，我就能自動編譯myAssets/stylesheets文件夾下的所有scss文件了。

例子：

 

需要注意的是：本例中，自定義設置了根資源文件夾為myAssets，它里面還需要新建一個名為stylesheets文件夾(至於為何要新建stylesheets文件夾，請看下面的參數解釋，不想看就記住必須要有stylesheets就夠了)，里面存放我們自己的scss文件。如果放在外面，是不會被自動編譯的。我這里新建的s0.scss（直接放在myAssets之下）就沒有被自動編譯成css。

(四-1).配置選項

 mode:

默認：compress

描述：你希望使用的輸出模式

值：expanded | nested | compressed | compact

 

 comments:

默認：false

描述：是否顯示line comments

 

relative:

默認：true

描述：Are assets relative

 

 css:

默認：stylesheets

描述：輸出css到項目中的哪個文件夾

 

 sass:

默認：stylesheets

描述：sass文件所在的文件夾

 

 project:

默認：public

描述：你所有的資源存放的位置

 

 cache:

默認：true

描述：允許/禁止 緩存

 

 logging:

默認：false

描述：允許/禁止 控制台打印編譯sass的信息。

例如：

　app.js(新增： 黃色部分。刪除：無。其他修改：無)

app.use(require('node-compass')({
    project: path.join(__dirname, 'myAssets'),
    mode: 'expanded',
    logging: true
}));

 

設為true后，你會在控制台看到如下信息：

 

 config_file:

默認：false

描述：使用有效的config.rb文件，來配置compass設置。

 

全文結束。