在前端开发中，CSS 预处理器是一个非常重要的工具。其中，Compass 是一款基于 Sass CSS 预处理器的框架，旨在简化 CSS 的编写并提供一些有用的工具和库。gulp-compass 是一个基于 Gulp 构建的 Compass 编译器。
安装
在开始使用 gulp-compass 之前，你需要先安装 Gulp 和 gulp-compass：
npm install gulp gulp-compass --save-dev
配置
在使用 gulp-compass 前，你需要在项目根目录下创建一个 gulpfile.js 文件。然后，你需要引入 gulp 和 gulp-compass：
var gulp = require('gulp');
var compass = require('gulp-compass');接下来，你需要配置 Compass。你可以创建一个 config.rb 文件，并将其放在 Compass 目录下。在配置文件中，你可以指定 Compass 的一些设置，例如输出目录、图片目录、字体目录等。
下面是一个示例配置文件：
css_dir = "css" sass_dir = "sass" images_dir = "img" javascripts_dir = "js" fonts_dir = "fonts"
最后，你需要在 gulpfile.js 中配置 gulp-compass。下面是一个简单的示例：
-- -------------------- ---- -------
-------------------- ---------- -
----------------------------
---------------
------------ --------------
---- ------
----- ------
---
--------------------------
---上述代码想必看起来有些头疼，其中用到的函数较多，请耐心看完，接下来一步步分析。首先，我们创建了一个名为 compass 的 Gulp 任务。在这个任务中，我们使用 gulp-compass 的 API 编译 Sass 文件。
首先，使用 gulp.src() 方法找到 Sass 文件，然后将其导入通过 pipe 经过处理。.pipe() 方法是 Gulp 中非常重要的一个组件，意是将文件通过管道传给下一个操作，一直传递到输出流为止。
在我们的示例代码中，我们使用 .pipe(compass({...})) 方法调用 gulp-compass。这个方法接受一个对象作为参数，其中包含编译 Compass 需要用到的配置信息。在我们的示例代码中，我们指定了配置文件、CSS 和 Sass 目录的位置。如果你有其他的 Compass 配置选项，也可以在此处指定。最后，我们将编译后的 CSS 文件输出到 ./css 目录下。
完成了以上步骤之后，我们可以执行 gulp compass 命令编译 Sass 文件了。
gulp-compass 的其他特性
gulp-compass 还提供了许多其他有用的功能，如自动补全、代码压缩、图像优化等。下面是一些例子：
自动补全
在 Compass 中，有一个自动补全的功能。你可以通过 gulp-compass 的 sass 选项启用它：
-- -------------------- ---- -------
-------------------- ---------- -
----------------------------
---------------
------------ --------------
---- ------
----- -------
------ -----------
------------ -
----------- -----
-------- ---------
--
--------- ------
-------- -----
----- -----
-------- --------
---
--------------------------
---在上面的代码中，我们添加了 sassOptions 选项，其中的 require: 'compass' 启用了自动补全功能。
代码压缩
当你想将编译后的 CSS 文件压缩时，可以使用 style 选项：
-- -------------------- ---- -------
-------------------- ---------- -
----------------------------
---------------
------------ --------------
---- ------
----- -------
------ ------------
---
--------------------------
---在上面的示例代码中，style: 'compressed' 指定了 Compass 的压缩选项。
图像优化
gulp-compass 还提供了图像优化功能。你可以使用 image 选项启用它：
-- -------------------- ---- -------
-------------------- ---------- -
----------------------------
---------------
------------ --------------
---- ------
----- -------
------- ------
------ ----
---
--------------------------
---在上面的示例代码中，我们添加了 images 和 image 选项，前者指定了图片输出目录，后者启用了图像优化。
结语
gulp-compass 是一个非常有用的 npm 包，它为前端开发者提供了一个快捷的 Compass 编译工具。通过仔细理解上述代码，你可以在使用 gulp-compass 时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66292