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?

A direct answer for your question is already here: http://stackoverflow.com/questions/32967345/typeerror-glob-pattern-string-required?rq=1. But as a gulp-noob, I tried to teach you to fish a bit ;) Hope it helps. — serraosays, Jan 06 '16 at 14:17
I saw that question/answer but could not (and still do not) understand how to apply it to my specific gulp.js file/file structure. Sorry - as I say, I'm very new. — VoA, Jan 06 '16 at 22:29

serraosays · Answer 1 · 2016-01-06T22:57:21.527

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.

Thanks for the tip! I'm pretty sure I'll take you up on your advice when I get the hang of Gulp a little more. For now, however, I'd like to just get it firing a basic script. Any chance you could help me fix any issues in my current gulp.js file? — VoA, Jan 06 '16 at 22:39
@VoA - updated answer with a quick fix you can try. You don't want to use pipe in the first declaration. — serraosays, Jan 06 '16 at 22:57
Thanks for the help - you nudged me in the right direction. I have updated my question with an answer should anyone else stumble upon it. Basically I simplified the whole situation to get gulp to fire a basic task (babel.js) to see if I could get it working. — VoA, Jan 07 '16 at 05:57

score 3 · Answer 2 · answered Jan 06 '16 at 10:05

3

I faced similar issue in past. You need to use sass plugin directly ( instead of using with pipe)

answered Jan 06 '16 at 10:05

dip

1,241
2
18
32

Could you please show me how to write that into my gulp.js file? Having a point of reference would be a great help. – VoA Jan 06 '16 at 22:37

score 1 · Answer 3 · answered Jan 06 '16 at 10:09

1

Please look into DOC here , You have to use gulp-ruby-sass rather then using directly :-

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

It may help you.

answered Jan 06 '16 at 10:09

Harsh Sanghani

1,666
1
14
32

I tried to apply this solution but it threw another error. Please see the edit to my original post for details. Basically - I'm not sure how to apply this solution to my situation. – VoA Jan 06 '16 at 22:37

score 1 · Accepted Answer · answered Jan 07 '16 at 06:08

Although this isn't a direct fix to my initial question, here is how I got the most basic gulp script to work (almost all of the tutorials went above and beyond what I wanted so I had to figure it out myself through trial and error).

Here is my gulp.js file:

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function() {
  return gulp.src('js/dev/main.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('js'));
});

Here is my file structure:

Basically what it's doing is utilizing this gulp babel.js plugin and converting my (ECMA6) javascript in the js/dev/main.js to ECMA5 javascript in the form of a /js/main.js file it creates upon entering gulp into the terminal. From here, add/remove your own gulp plugins at will. Hope this helps.

Gulp.js TypeError: glob pattern string required

4 Answers4

More in-depth info