0

This is the first time I use a Taskrunner but I've used Sass a lot and I really like the Sass syntax rather than the SCSS syntax. However, I want to use the Bourbon library in my new project and it's written with SCSS, so it doesn't compile for me if I don't have all of my CSS written in SCSS, since I only compile the files with the .sass ending. Is there a way to compile both or to use some other gulp plugin that does this? I've never had this problem using Compass, Codekit or the Sass compiler that's built into Jekyll. I attached my code and remember that I'm new to this, so feel free to point out if I've done some stupid decisions or if there's something that looks weird, I'd love to improve.

var gulp        = require('gulp'),
browserify      = require('gulp-browserify'),
sass            = require('gulp-sass'),
browserSync     = require('browser-sync'),
reload          = browserSync.reload;


//Tasks  regarding scripts--------------------------------------------------|
gulp.task('scripts', function(){
// Single entry point to browserify
       gulp.src('vendor/scripts/main.js')
        .pipe(browserify({
             insertGlobals : true,
                debug : !gulp.env.production
            }))
        .pipe(gulp.dest('./dist/js'))
        console.log("This is reloaded");
});

//Tasks regarding styles----------------------------------------------------|
gulp.task('sass', function(){
    gulp.src('vendor/styles/**/*.scss')
    .pipe(sass({
    outputStyle: 'nested',
    onError: console.error.bind(console, 'Sass error:')
    }))
    .pipe(gulp.dest('./dist/css'))
});

//Live reload--------------------------------------------------------------------|
gulp.task('serve', ['scripts','sass'], function () {
    gulp.watch([
        'dist/**/*'
    ]).on('change', reload);
    gulp.watch('vendor/styles/**/*.scss', ['sass']);
    gulp.watch('vendor/scripts/*.js', ['scripts']);


    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: ['.tmp', 'dist'],
            routes: {
                '/bower_components': 'bower_components'
            }
        }
    });
});
Daphen
  • 123
  • 6

2 Answers2

0

gulp-sass is based on libsass, the native C implementation of Sass, and libsass is well known to have issues with different syntaxes. I'd recommend using the plugin gulp-ruby-sass to fall back on the original Ruby implementation. The one you also use with Codekit, Compass, and so on. Be aware that gulp-ruby-sass has a different interface:

var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
    return sass('vendor/styles/**/*.scss')
        .pipe(gulp.dest('./dist/css'))
});

It's a lot slower that gulp-sass, but you won't come into such issues since there's still a huge difference between those implementations.

Btw: Good turn on your first Gulpfile! Just make sure to return streams in your subtasks so Gulp knows how to orchestrate them (just place a return statement before gulp.src)

ddprrt
  • 7,424
  • 3
  • 29
  • 25
  • Hey, thanks for the input. Will I be able to import scss Bourbon to my Sass files without any issues if I use the gulp-ruby-sass? Would you mind explaining that "return" part? Why should I return the source? What does this change? :) – Daphen Apr 18 '15 at 21:56
  • You are basically using the same Sass as Compass, Jekyll or Codekit did, so it should work totally fine! As for the return part: See that I put the return statement at the beginning of my function. With that I'm not only executing the stream, but passing it back to Gulp, which is able to plan parallel and serial executions because it knows when one stream's finished. – ddprrt Apr 19 '15 at 16:35
  • You're welcome :-) If the answer was helpful to you, please mark it as "solved" ;-) – ddprrt Apr 20 '15 at 06:27
  • The thing is that in Jekyll and compass, I don't have to specify that I'm looking for files that end with ".sass" or ".scss", so I get the feeling it wont compile files with ".scss" (The Bourbon files) if I don't specify it somewhere, is that incorrect? – Daphen Apr 20 '15 at 07:08
  • See... Jeykll, Compass, Codekit. They all don't compile Sass. Ruby's Sass implementation does. Jekyll, Compass, Codekit just call Ruby's Sass implementation. `gulp-ruby-sass` does exactly the same. It does not compile Sass for you, they call the same Ruby Sass implementation the other tools run. So if it runs in Jekyll, Compass, Codekit, it also runs with gulp-ruby-sass. No extra specification required ;-) – ddprrt Apr 20 '15 at 07:42
  • I'm going to try in a second and complain to you when it doesn't work. ;) But on the other hand, if it does work, I'll be back here to praise you, haha. :) – Daphen Apr 20 '15 at 07:45
  • Should it break, I'll be happy to help ;-) – ddprrt Apr 20 '15 at 07:46
  • It worked really smoothly. I can't thank you enough. However, I'd like to add sourcemaps to my Javascript and Sass and I have no idea how to go about to get it to work. Do you have any experience with this? :) – Daphen Apr 20 '15 at 10:13
  • Great to hear :-) As said: If you like the solution, feel free to mark it as solved :) – ddprrt Apr 20 '15 at 10:14
  • My reputation is too low, I can't, sorry.. Did you read my follow up question regarding sourcemaps? :) – Daphen Apr 20 '15 at 12:46
  • Sure... for sourcemaps, read the docs of gulp-sourcemaps and gulp-ruby-sass ... it's really good explained there – ddprrt Apr 21 '15 at 12:00
  • Just chiming in to add that CodeKit supports *both* Libsass and Ruby Sass. You can choose either one. In the next major release, Libsass will be turned on by default and you'll have to opt into using the older Ruby compiler. The original answer makes it sound like my app doesn't support Libsass, which it has since 2014. – Bryan May 25 '16 at 07:19
0

According to https://css-tricks.com/gulp-for-beginners/ You just need to change /*.scss to *.+(scss|sass)

The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.

This are my plugins:

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    haml = require('gulp-ruby-haml'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    coffee = require('gulp-coffee'),
    gutil = require('gulp-util'),
    slim = require("gulp-slim"),
    del = require('del');

This worked for me:

// Styles
gulp.task('styles', function() {
  return sass('src/styles/**/*.+(scss|sass)', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});
m0000g
  • 913
  • 6
  • 6