CODEWITHSUNDEEP
compiler-errorssasscompilationgulp
Alex
Alex

Reputation: 11

Gulp Sass Compiling Error

Here is my current directory tree: Directory Tree

And here is my gulpfile.js code:

var gulp = require ('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-ruby-sass'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();

var jsSources = ['components/scripts/scriptOne.js',
                 'components/scripts/scriptTwo.js'
];

var sassSources = [
  'comptonents/sass/*.scss'
];

gulp.task('js', function() {
    gulp.src(jsSources)
              .pipe(uglify())
              .pipe(concat ('script.js'))
              .pipe(gulp.dest('js'));
});

gulp.task('sass', function() {
  gulp.src(sassSources)
    .pipe(sass({style: 'expanded', lineNumbers: true}))
    .on('error', gutil.log)
    .pipe(concat('style.css'))
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});


gulp.task('watch', function() {
  var server = livereload();
  gulp.watch(jsSources, ['js']);
  gulp.watch(sassSources, ['sass']);
  gulp.watch(['js/script.js', '*.html'], function(e) {
    server.changed(e.path);
  });
});



gulp.task('default', ['sass','js', 'watch']);

The error that I am getting is outputting the following command whenever I try to run gulp to compile my sass. 

       19:55:01] Using gulpfile ~/Desktop/coffeescript/gulpfile.js
[19:55:01] Starting 'sass'...
[19:55:01] 'sass' errored after 21 ms
[19:55:01] TypeError: glob pattern string required
    at new Minimatch (/Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/node_modules/minimatch/minimatch.js:116:11)
    at setopts (/Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/node_modules/glob/common.js:118:20)
    at new GlobSync (/Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:40:3)
    at Function.globSync [as sync] (/Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:26:10)
    at /Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/index.js:68:21
    at Array.forEach (native)
    at gulpRubySass (/Users/Aquinas/Desktop/coffeescript/node_modules/gulp-ruby-sass/index.js:67:10)
    at Gulp.<anonymous> (/Users/Aquinas/Desktop/coffeescript/gulpfile.js:27:11)
    at module.exports (/Users/Aquinas/Desktop/coffeescript/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/Aquinas/Desktop/coffeescript/node_modules/orchestrator/index.js:273:3)

Please help me out on figuring this out. Thank you.

Edit One: Changed the typo error in var SassSources. However , still output errors. I don't even have a log to check it. Sucks, I am sure I've enabled the log command. Anyways, if it helps here is the gulp plugins tree:

Gulp plugins tree

Edit Two: SOLVED!! I had to point the live reload number (provided from the xxx in my index.html). I had to make a few adjustments to my code, and viola! It's running like bread and butter.

Adjusted code: 

gulp.task('watch', function() {
  livereload.listen(35732);
  var server = livereload();
  gulp.watch(jsSources, ['js']);
  gulp.watch(coffeeSources, ['coffee']);
  gulp.watch(sassSources, ['sass']);
  gulp.watch(['js/script.js', '*.html'], function(e) {
    livereload.changed(e.path);
  });
});

The issue was the watch for livereload was not working because the code I was using was a little outdated.

Upvotes: 1

Views: 730

Answers (1)

Bruno Poeta
Bruno Poeta

Reputation: 521

This might be because gulp.src() expects a string and not an array as the entry file. Simply change that from array to a string and you might be good to go.

Upvotes: 1

Related Questions