javascript - Gulp.js TypeError: glob pattern string required - Stack Overflow

admin管理员组

文章数量:1287647

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 plete 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?

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 plete 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?

• javascript
• gulp
• glob

Share Improve this question Follow edited Jan 6, 2016 at 22:34 VoA asked Jan 6, 2016 at 9:10 VoAVoA 50311 gold badge66 silver badges1616 bronze badges 2

• 1 A direct answer for your question is already here: stackoverflow./questions/32967345/…. But as a gulp-noob, I tried to teach you to fish a bit ;) Hope it helps. – serraosays Commented Jan 6, 2016 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 Commented Jan 6, 2016 at 22:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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: 'pressed',
            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 pressed code. You'd have to add gulp-sourcemaps to your package.json to get this to work.

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

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: 'pressed',
            loadPath: [paths.sassImportsPath]
        })
        .pipe(gulp.dest(paths.sassDestPath));
});

It may help you.

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.

本文标签： javascriptGulpjs TypeError glob pattern string requiredStack Overflow