Gulp.js TypeError: glob pattern string required

Question

I'm following this tutorial to set up gulp.js on Ubuntu. However, when I run gulp styles in the terminal I get the 'TypeError: glob pattern string required' error. I'm a complete gulp noob - could anyone point me in the right direction?

My gulpfile.js file:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename');

gulp.task('styles', function() {
  return gulp.src('sass/*.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
});

My file directory:

Edit:

I tried this in my gulp.js file:

gulp.task('styles', function () {
    return sass('sass/*.scss', {
      style: 'expanded'
    })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
});

and received this error output:

Is my syntax wrong?

Answer 1

The error being thrown by gulp is related to a post-css npm module. Since you are using sass, I'm not sure why this is there. Try removing it and post your package.json file.

According to the docs, you don't want to use pipe in that first declaration according to the gulp-ruby-sass. Try this instead:

// Styles Task
gulp.task('styles', function () {
    return sass(paths.sassSrcPath, {
            style: 'compressed',
            loadPath: [paths.sassImportsPath]
        })
    .pipe(gulp.dest(paths.sassDestPath));
});

More in-depth info

Use gulp-sass instead of gulp-ruby-sass. It's a much faster, better supported version of Sass at this point in it's dev cycle.

This is how I usually use gulp-sass in a styles build task (based off of Yeoman generator gulp-webapp):

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['last 1 version']}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

It's similar to yours but it outputs sourcemaps, which are super helpful when you are debugging compressed code. You'd have to add gulp-sourcemaps to your package.json to get this to work.