Questions tagged [gulp-ruby-sass]

gulp-ruby-sass is a gulp plugin to compile Sass files (.scss) to CSS files using Ruby Sass gem.

Basic usage example:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
    return sass('source/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('result'));
});

Sophisticated usage example (used with gulp-sourcemaps and gulp-livereload):

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
var sass = require('gulp-ruby-sass');

// Compile public Sass task
gulp.task('sass_site', function () {
  return sass('public/_sources/sass/main.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

// The watch task
gulp.task('watch', function () {
  livereload.listen();

  // Use this for logging in terminal
  gulp.watch('public/_sources/sass/**/*.scss', ['sass_site']).on('change', function (file) {
    livereload.changed(file.path);
    gutil.log(gutil.colors.yellow('Public CSS changed' + ' (' + file.path + ')'));
  });

  // Or this if you don't need logging
  // gulp.watch('public/_sources/sass/**/*.scss', ['sass_site']);
});

To run the example issue gulp sass_site or gulp watch command in terminal.