罗盘行号评论未显示 Gulp

Question

我正在尝试从 G运行tJS 切换到 Gulp，运行处理我的 SASS 任务时出现问题=] 文件通过指南针。这些文件可以很好地编译成单个 CSS 文件，就像它们在我的 G运行tJS 实现中所做的那样，但是我缺少行号注释，这些注释告诉我 CSS 规则来自哪里作为： /* 第 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'))
});

我是不是漏掉了什么？

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给你说的输出。

我从你的 Gulp 文件中看到你可能有一些扩展需要一些 image ，我不知道它到底做了什么，但如果它对你的设置是强制性的，你可能最好使用 require('child_process').exec(...)

直接调用指南针（命令行工具）

Answer 2

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

除了@ddprrt 所建议的不符合 gulp 标准之外，gulp-compass 现在似乎已损坏。除了在目标文件夹中生成样式表外，它还会在 {app_root}/css 文件夹下生成另一个样式表。我怀疑，后者是某种缓存，但该功能目前已损坏。可以看出here，如果删除那个样式表并重新运行任务，行号注释最终会显示出来。下面，我通过安装和使用 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"))
});

Answer 3

您应该将 sass_options = { :line_numbers => 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/'));

罗盘行号评论未显示 Gulp

Compass Line Number Comments Not Showing Up with Gulp

css

sass

gulp

compass