關於在Gruntfile中配置compass的問題

時間 2019-11-29

標籤關於 gruntfile 配置 compass 問題欄目 Node.js 简体版

原文原文鏈接

　　前兩天，在作項目的時候，我使用了在Gruntfile.js配置compass，經過compass來編譯個人sass文件。開始sass文件編譯一切OK，可是到後面我使用了compass的sprites這個功能，原本圖片整合這些都沒有什麼問題。但是我在頁面裏怎麼都看不見整合的圖片，查看以後原來是圖片的路徑生成問題。compass把這個自動生成的sprite image 在編譯後的css文件中是絕對路徑，這樣就致使了我在頁面中看不見這個圖片。css

　　因爲以前我使用compass是用koala來自動編譯，也是使用koala自動生成一個config.rb配置文件。因此就沒有遇到這個輸出相對路徑和絕對路徑的問題。node

　　查詢以後在Gruntfile.js中的compass 任務裏配置上使用相對路徑輸出（relativeAssets:true）這個參數，而後一切都正常了。下面使用github上面的代碼塊來講明一下：git

grunt.initConfig({
  compass: {                  // Task
    dist: {                   // Target
      options: {              // Target options
        sassDir: 'sass',           //sass文件目錄
        cssDir: 'css',             //輸出css的目錄
        environment: 'production'，//生產環境
　　　　 relativeAssets: true      //使用相對路徑輸出
      }
    }
  }
});

以防下次再遇到由於參數配置而致使一些問題，因此我就在參考了一些文章以後，將在Gruntfiel.js中配置compass任務的一些參數作了一些總結，如下多數爲翻譯過來的內容github

Dependencies(依賴關係)

首先你須要安裝node.js, grunt.js, Ruby, SASS 和 Compassnpm

Installation&Option(安裝和選項)

　　1.首先須要安裝這個插件緩存

$  npm install grunt-compass --save-dev

　　2.在Gruntfile.js中調用這個插件sass

grunt.loadNpmTasks( 'grunt-compass' )

　　3.在Gruntfile.js配置watch任務，當在命令行輸入grunt watch 命令來監聽sass文件時，若是sass文件有改變就會運行這個tasksruby

watch: {
    files: [ 'assets/scss/*.scss' ],
    tasks: [ 'compass:dev', 'compass:prod' ]
}

下面就是配置compass任務koa

　　4.設置sass和css路徑grunt

src: 'assets/scss', //sass文件所在目錄
dest: 'assets/css'  //編譯後輸出css的目錄

　　5.指定你想編譯的某一個文件

單個文件：

specify: 'assets/scss/base.scss'

使用通配符來匹配文件：

specify: 'assets/scss/*.scss' // 匹配全部 `assets/scss` 目錄下的以.scss後綴名結尾的sass文件，可是不匹配子目錄下的sass文件
specify: 'assets/scss/**/*.scss' // 匹配全部'assets/scss'目錄下的全部以.scss後綴名結尾的sass文件，包括其子目錄的全部.scss文件

注意：.sass/.scss文件會忽略文件名如下劃線 _ 開頭的文件。全部的文件都必須在你在 src 指定的目錄下面

　　6.使用 bathPath 指定運行compass的位置，這對多個項目分開的文件夾結構使用grunt很是有用。

basePath: 'path/to/project/'

　　7.像這樣設置你本身輸出css的習慣:

outputstyle: 'compressed' //壓縮的格式。其餘的輸出風格還有：nested、expanded、compact

　　8.取消行註釋

noLineComments：false  //這是個Boolean類型

　　9.運行命令以前須要一個Ruby庫，這個一般是用於一個沒有項目配置文件的compass 插件

require: 'animate-sass'

或者

require: [
  'animate-sass',
  'mylib'
]

　　10.設置compass 幫助器生成一個相對路徑的資源（例如使用compass的sprites）

relativeassets: true

　　11.若是你有compass的配置文件能夠直接使用，還能夠在Gruntgile.js從新設置配置文件裏面的配置，或者新加其餘的配置項

config: '/path/to/config'

重寫配置文件裏面的配置

config: '/path/to/config'，// css_dir = 'dev/css'
cssDir: 'dist/css'   //重寫輸出css目錄

注意：若是你不使用絕對路徑，要使用相對路徑的話，那就是相對於包含Gruntfile.js的目錄。

　　12.若是有你compass配置文件，那你能夠在config.rb文件中設置環境變量

environment: 'production'

而後在config.rb文件中像這樣用：

output_style = ( environment == :production ) ? :compressed : :expanded

　　13.你能夠添加一個本身定製的 importPath 文件夾，讓在sass文件中的 @import 指令可以找到

importPath: '/path/to/importPath'

　　14.移除已經生成的文件和sass的緩存

有時候須要爲生產環境從新編譯一次，執行 compass clean就比用 --force 編譯更快一些。如今你就能夠開始 grunt compass-clean 任務，gruntfile文件中還能夠這樣：

grunt.registerTask( 'prod', [ 'compass-clean', 'compass:prod' ] );

一個例子

compass: {
    dev: {
        src: 'assets/scss',
        dest: 'assets/dev/css',
        linecomments: true,
        forcecompile: true,
        require: [
          'animate-sass',
          'mylib'
        ],
        debugsass: true,
        images: '/path/to/images',
        relativeassets: true
    },
    prod: {
        src: 'assets/scss',
        dest: 'assets/prod/css',
        outputstyle: 'compressed',
        linecomments: false,
        forcecompile: true,
        require: [
          'animate-sass',
          'mylib'
        ],
        debugsass: false,
        images: '/path/to/images',
        relativeassets: true
    }
}