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

时间:2015-05-15 21:57:14

标签: css sass gulp compass

我正在尝试从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'))
});

我错过了什么吗?

3 个答案:

答案 0 :(得分:3)

小心gulp-compass,它不是一个gulp插件(尽管如此命名)并且已被Gulp社区列入黑名单已有一段时间了。它不是Gulp插件应该做的(例如,可以在没有gulp.srcgulp.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(...)

答案 1 :(得分:1)

您应该添加 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/'));

答案 2 :(得分:0)

我也无法使用 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"))
});