Search code examples
compilationgulpfrontendassetsgulp-sass

Gulp sass task not building properly


After I clone my team's repo on my local machine, I cannot get gulp to work properly. While gulp itself performs all tasks as it is supposed to, I get the following rails error in the browser:

Invalid CSS after "": expected selector, was ""[data-magellan..."
(in  /Users/my-user-name/workspace/name-of-my-app/app/assets/stylesheets/application.css.scss:1)

I know there is no error in the repo because other developers run it on their machines and it works fine. I observed that the error occurs after gulp sass task is run, which modifies files in vendor/assets/stylesheets.

Tried running gulp several times, clearing the cache and re-cloning the entire project. Running on master before making any changes. Still same issue. Can it be some other dependancies that I don't think of? Any help/direction would be GREATLY appreciated! :-)

Here is the Sass task:

var gulp         = require('gulp');
var ext          = require('gulp-ext');
var plumber      = require('gulp-plumber');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var fingerprint  = require('gulp-fingerprint');
var handleErrors = require('../util/handleErrors');
var config       = require('../config');

gulp.task('sass', function () {
  return gulp.src(['./gulp/assets/stylesheets/application.scss', './gulp/assets/stylesheets/life_widget.scss'])
    .pipe(plumber())
    .pipe(sass({outputStyle: 'compressed'}))
    .on('error', handleErrors)
    .pipe(autoprefixer({ browsers: ['last 2 version', 'ie 9'] }))
    .pipe(gulp.dest(config.sass.dest))
    .pipe(fingerprint('rev-manifest.json', {
      mode: 'replace',
      prefix: '/'
    }))
    .pipe(gulp.dest(config.sass.dest));
});

Solution

  • The issue was node version. Our repo required v0.12.7 and I was using the newer 5.5.5.