Gulp 不显示指南针行号注释答案

【问题标题】：Compass Line Number Comments Not Showing Up with GulpGulp 不显示指南针行号注释
【发布时间】：2016-03-15 21:08:19
【问题描述】：

我正在尝试从 GruntJS 切换到 Gulp，但在通过 Compass 处理我的 SASS 文件的 Gulp 任务中遇到了问题。这些文件可以像在我的 GruntJS 实现下那样编译成单个 CSS 文件，但是我缺少显示 CSS 规则来自何处的行号 cmets，例如： /* 第 26 行，../_components/sass/_base.scss */

我的 gulpfile.js 中用于该任务的代码是：

gulp.task('compass', function() {
   gulp.src(sassSources)
     .pipe(compass({
        comments: true,
        sass: '_components/sass', 
        image: 'builds/dev/images',
        style: 'nested'
   })
   .on('error', gutil.log))
   .pipe(gulp.dest('builds/dev/css'))
});

我错过了什么吗？

【问题讨论】：

标签： css sass gulp compass

【解决方案1】：

小心gulp-compass，它不是一个 gulp 插件（尽管如此命名）并且已经被 Gulp 社区列入黑名单很长一段时间了。这不是 Gulp 插件应该做的（例如，可以在没有 gulp.src 和 gulp.dest 的情况下运行它们），并且其他插件已经完美地完成了它的工作。其中一个插件是gulp-ruby-sass。此设置可能适合您：

var sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
   return sass(sassSources, {
     compass: true,
     lineNumbers: true
   }).on('error', gutil.log))
   .pipe(gulp.dest('builds/dev/css'))
});

这使用gulp-ruby-sass，它可以使用compass 扩展名运行。你看我在这里激活了lineNumbers给你说的输出。

我从您的 Gulpfile 中看到，您可能有一些扩展名需要一些 images，我不知道具体是做什么的，但如果这是您的设置所必需的，您最好直接调用 compass（命令行工具) 使用require('child_process').exec(...)

【讨论】：

图像设置只是从教程视频中复制而来，我一直将其放入指南针配置中，无论是在 Grunt/Gulp 文件中还是在 config.rb 中。谢谢您的帮助。我将对 gulpfile.js 进行更改并继续我的转换。

【解决方案2】：

即使 gulp-compass 模块不支持 lineNumbers 作为选项，您也应该将 sass_options = { :line_numbers => true } 添加到 config.rb 文件中。

config.rb 文件的重要部分

css_dir = 'app/assets/style/'
sass_dir = 'app/assets/style/sass/'
images_dir = 'app/assets/image/'
javascripts_dir = 'app/assets/script/'
sass_options = { :line_numbers => true }

你的 gulp 任务应该是这样的

gulpfile.js 文件的重要部分

return gulp.src('./app/assets/style/sass/*.scss')
    .pipe(plugins.compass({
      config_file: './config.rb', // if you don't use a config file , you should start using immediately
      css: './app/assets/style/',
      sass: './app/assets/style/sass/',
      image: './app/assets/image/',
      line_comments: true,
      sourcemap: true
    }))
    .pipe(gulp.dest('./app/assets/style/'));

【讨论】：

【解决方案3】：

我也无法使用 gulp-compass 生成行号 cmets。我尝试了很多方法，包括将所有插件版本与我曾经使用的示例代码进行匹配，甚至完全丢弃我的代码并使用完整的sample，但无济于事。

除了不符合 @ddprrt 建议的 gulp 标准之外，gulp-compass 现在似乎被打破了。除了在目标文件夹上生成样式表外，它还在 {app_root}/css 文件夹下生成另一个样式表。我怀疑，后者是某种缓存，但该功能目前已被破坏。可以看到here，如果你删除那个样式表并重新运行任务，行号 cmets 最终会出现。下面，我通过安装和使用 gulp-clean-dest 插件自动化了这个。我没有尝试过使用其他插件，但是这个 hack 可以解决这个问题。

var gulp      = require("gulp")
  , compass   = require("gulp-compass")
  , cleanDest = require("gulp-clean-dest")
  ;

gulp.task("compass", function() {
  gulp.src("components/sass/style.scss")
    .pipe(compass(
      {  "sass":  "components/sass"
      ,  "image":  "builds/development/images"
      ,  "style":  "expanded"
      ,  "comments":  true
      })
      .on("error", gutil.log)
    )
    .pipe(gulp.dest("builds/development/css"))
    .pipe(cleanDest("css"))
});

【讨论】：