Question

我正在尝试从GruntJS切换到Gulp并且遇到了我的Gulp任务的问题，通过Compass处理我的SASS文件。这些文件在我的GruntJS实现中可以很好地编译到单个CSS文件中，但是我错过了显示CSS规则来源的行号注释，例如： / *第26行，.. / _ component /ass / _ 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'))
});

我错过了什么吗？

Answer 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中看到你可能有一些扩展需要一些image，我不确切知道它是做什么的，但是如果你的设置是强制性的，你最好直接调用指南针（命令）线工具）使用require('child_process').exec(...)

Answer 2

您应该添加 sass_options = {：line_numbers =＆gt; true} 到你的config.rb文件，即使gulp-compass模块不支持lineNumbers作为选项。

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/'));

Answer 3

我也无法使用 gulp-compass 生成行号注释。我尝试了很多东西，包括将所有插件版本与我用过的示例代码相匹配，甚至完全丢弃我的代码并使用完整的sample代替无效。

除了@ddprrt建议不遵守gulp标准之外， gulp-compass 现在似乎已被打破。除了在目标文件夹上生成样式表外，它还会在 {app_root} / css 文件夹下生成另一个样式表。我怀疑，后者是某种缓存，但目前该功能已被破坏。可以看到here，如果删除该样式表并重新运行任务，最终将显示行号注释。下面，我通过安装和使用 gulp-clean-dest 插件自动执行此操作。我没有尝试过使用其他插件，但这个黑客处理了这个问题。

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"))
});

指南针行号注释没有显示与Gulp

3 个答案: