CODEWITHSUNDEEP
csssassgulpcompass
Cedon
Cedon

Reputation: 627

Compass Line Number Comments Not Showing Up with Gulp

I am attempting to make the switch from GruntJS to Gulp and have run into a problem with my Gulp task for processing my SASS files via Compass. The files compile just fine into the single CSS file as they did under my GruntJS implementation, but I am missing the line number comments that show me where the CSS rules come from such as: /* line 26, ../_components/sass/_base.scss */

The code from my gulpfile.js for the task is:

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

Am I missing something?

Upvotes: 1

Views: 1000

Answers (3)

btargac
btargac

Reputation: 402

You should add sass_options = { :line_numbers => true } to your config.rb file even if gulp-compass module doesn't support lineNumbers as an option.

important part of config.rb file

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 }

And your gulp task should look like this

important part of gulpfile.js file

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

Upvotes: 1

Shapeous
Shapeous

Reputation: 11

I had trouble generating the line number comments using gulp-compass also. I tried a lot of things including matching all the plugin versions to the sample code I used to even completely discarding my code and use the full sample instead to no avail.

On top of its lack of compliance with gulp standards as @ddprrt suggested, gulp-compass seems to be broken now. Besides generating a stylesheet on the destination folder, it also generates another under the {app_root}/css folder. I suspect, the latter is some sort of caching, but that functionality is currently broken. As can be seen here, if you delete that stylesheet and re-run the task, the line number comments will finally show up. Below, I automated this by installing and using the gulp-clean-dest plugin. I have no tried using other plugins, but this hack handles the issue.

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

Upvotes: 0

ddprrt
ddprrt

Reputation: 7574

Be careful with gulp-compass, it is not a gulp plugin (albeit named so) and has been blacklisted by the Gulp community for quite a while. It does not what Gulp plugins are supposed to do (e.g. it's possible to run them without gulp.src and gulp.dest), and other plugins are already doing its work perfectly fine. One of those plugins is gulp-ruby-sass. This setup might work for you:

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

This uses gulp-ruby-sass which is able to run with the compass extension. You see that I activated lineNumbers here to give you said output.

I see from your Gulpfile that you might have some extension requiring some images, I don't know exactly what that does, but if it's mandatory to your setup, you might better call compass directly (the command line tool) using require('child_process').exec(...)

Upvotes: 3

Related Questions