CODEWITHSUNDEEP
javascriptgulpglob
VoA
VoA

Reputation: 503

Gulp.js TypeError: glob pattern string required

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:

file pathing

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:

enter image description here

Is my syntax wrong?

Upvotes: 3

Views: 7756

Answers (4)

VoA
VoA

Reputation: 503

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:

enter image description here

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.

Upvotes: 1

serraosays
serraosays

Reputation: 7859

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.

Upvotes: 4

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

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.

Upvotes: 1

dip
dip

Reputation: 1261

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

Upvotes: 3

Related Questions