关于在Gruntfile中配置compass的问题

　　前两天，在做项目的时候，我使用了在Gruntfile.js配置compass，通过compass来编译我的sass文件。开始sass文件编译一切OK，但是到后面我使用了compass的sprites这个功能，本来图片整合这些都没有什么问题。可是我在页面里怎么都看不见整合的图片，查看之后原来是图片的路径生成问题。compass把这个自动生成的sprite image 在编译后的css文件中是绝对路径，这样就导致了我在页面中看不见这个图片。

　　由于之前我使用compass是用koala来自动编译，也是使用koala自动生成一个config.rb配置文件。所以就没有遇到这个输出相对路径和绝对路径的问题。

　　查询之后在Gruntfile.js中的compass 任务里配置上使用相对路径输出（relativeAssets:true）这个参数，然后一切都正常了。下面使用github上面的代码块来说明一下：

grunt.initConfig({
  compass: {                  // Task
    dist: {                   // Target
      options: {              // Target options
        sassDir: 'sass',           //sass文件目录
        cssDir: 'css',             //输出css的目录
        environment: 'production'，//生产环境
　　　　 relativeAssets: true      //使用相对路径输出
      }
    }
  }
});

以防下次再遇到因为参数配置而导致一些问题，所以我就在参考了一些文章之后，将在Gruntfiel.js中配置compass任务的一些参数做了一些总结，以下多数为翻译过来的内容

Dependencies(依赖关系)

首先你需要安装node.js, grunt.js, Ruby, SASS 和 Compass

Installation&Option(安装和选项)

　　1.首先需要安装这个插件

$  npm install grunt-compass --save-dev

　　

　　2.在Gruntfile.js中调用这个插件

grunt.loadNpmTasks( 'grunt-compass' ) 

　　

　　3.在Gruntfile.js配置watch任务，当在命令行输入grunt watch 命令来监听sass文件时，如果sass文件有改变就会运行这个tasks

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

下面就是配置compass任务

　　4.设置sass和css路径

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
    }
}

参考文章来源

https://github.com/gruntjs/grunt-contrib-compass

https://www.npmjs.com/package/grunt-compass