CODEWITHSUNDEEP
rubysassnpmgulp-sass
redplanet
redplanet

Reputation: 158

Can't get gulp-ruby-sass or gulp-sass to work at all

I'm trying to use gulp-ruby-sass and/or gulp-sass but neither are working for me and think i've got it all set up correctly. I've looked at a bunch of other SO posts but nothing works for me as yet.

I've got another gulp task which is recursively copying an assets directory and index.html from src to dist and this works every time.

To test the sass setup is correct i run a vanilla sass compile and then run gulp; the sass changes work and render via the recursive copy. Here's the commands for that sass test:

$ sass ./sass/main.scss ./src/assets/css/main.css
$ gulp

Forgetting the vanilla sass test and back to the gulp sass issue here - in my gulpfile i'm running the gulp sass task before i run the recursive copy task, so if it worked then the sass changes should be applied and copied. At least that's what i thought.

Here's my dir structure showing relevant files:

    ├── src
    │    ├── index.html
    │    └── assets
    │           ├── css
    │           │    └── main.css
    │           ├── js
    │           │    └── app.js
    │           └── img
    │                └── etc.jpg
    │   
    ├── dist
    │    └── index.html ( from ./src via recursive copy)
    │    └── assets
    │           └── (same as ./src/assets via recursive copy)
    │   
    ├── sass
    │    ├── main.scss
    │    ├── _partial1.scss
    │    ├── _partial2.scss
    │    └── etc ...
    │
    ├── gulpfile.js
    │
    ├── node_modules
    │    └── etc ...
    │
    └── bower_components
         └── etc ...

In gulpfile.js there are a couple of file mapping objects which work fine for the recursive copy of src/assets/. But for the sake of testing the gulp-ruby-sass task i'm hard-coding the sass/css paths to remove the possibility of the file mapping as an error.

For the record I'm running on OSX Maverics 10.9.5 and think i have the correct environment setup:

$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
$ sass -v
Sass 3.4.9 (Selective Steve)

Here's my gulpfile.js showing approaches that i've tried so far, with gulp-sass related task commented-out:

    var gulp = require('gulp');
    var watch = require('gulp-watch');
    var gsass = require('gulp-ruby-sass');
    // var gsass = require('gulp-sass');
    var gutil = require('gulp-util');

    // Base paths:
    var basePaths = {
        srcRoot: './src/',
        distRoot: './dist/',
        bowerRoot: './bower_components/'
    };

    // File paths:
    var filePaths = {
        sassRoot: basePaths.srcRoot + 'sass/',
        assetsBuildRoot: basePaths.srcRoot + 'assets/',
        jqMin: basePaths.bowerRoot + 'jquery/dist/jquery.min.js',
        html: basePaths.srcRoot + 'index.html'
    };

    // With gulp-ruby-sass
    gulp.task('compile-sass', function() {
            gulp.src('./sass/main.scss')
            .pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
            .on('error', function (err) { console.log(err.message); })
            .pipe(gulp.dest('./src/assets/css'));
    });

    // With gulp-sass
    // gulp.task('gsass', function () {
    //  gulp.src('./sass/*.scss')
    //      .pipe(gsass())
    //      .pipe(gulp.dest('./src/assets/css'));
    // });

    // Assets directory copied recursively from /src to /dist:
    gulp.src(filePaths.assetsBuildRoot + '**/*.*', {base : basePaths.srcRoot})
        .pipe(gulp.dest(basePaths.distRoot));

    // Copy index.html from /src to /dist:
    gulp.src(filePaths.html)
        .pipe(gulp.dest(basePaths.distRoot));

    gulp.task('default', function() {

        // With gulp-ruby-sass
        // return gulp.src('./sass/main.scss')
        //  .pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
        //  .on('error', function (err) { console.log(err.message); })
        //  .pipe(gulp.dest('./src/assets/css'));

        // gulp.watch('compile-sass');

        console.log('You reached the finishing line');
    });

I have tried allsorts to bugfix, e.g.: Removing all of the vanilla sass compiled .css files and running the gulp compile, but no .css is produced. Also tried removing all of the *.map files generated by the vanilla sass compile then running gulp but no dice.

Can anyone see anything glaringly and obviously wrong?

Thanks in advance.

Upvotes: 3

Views: 6176

Answers (1)

philipb3
philipb3

Reputation: 279

If you are using Sass >= 3.4, you will need to install gulp-ruby-sass version 1.0.0-alpha:

npm install --save-dev [email protected]

In this new version, gulp-ruby-sass is a gulp source adapter and the syntax has changed slightly. Instead of:

gulp.task('compile-sass', function() {
        gulp.src('./sass/main.scss')
        task code here
});

The new syntax is:

gulp.task('compile-sass', function() {
       return sass('./sass/main.scss')
        task code here
});

You can find more info in the new version documentation including the new syntax for sourcemaps. https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0

Upvotes: 1

Related Questions