javascript - Gulp.js 类型错误 : glob pattern string required

Question

我正在关注 this tutorial在 Ubuntu 上设置 gulp.js。但是，当我在终端中运行 gulp styles 时，出现“TypeError: glob pattern string required”错误。我是一个彻头彻尾的菜鸟 - 谁能指出我正确的方向？

我的 gulpfile.js 文件:

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'));
});

我的文件目录:

编辑:

我在我的 gulp.js 文件中试过这个:

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'));
});

并收到此错误输出:

我的语法有误吗？

Answer 1

gulp 抛出的错误与 post-css npm 模块有关。由于您使用的是 sass，我不确定为什么会这样。尝试删除它并发布您的 package.json 文件。

根据文档，根据 gulp-ruby-sass，您不想在第一个声明中使用 pipe。试试这个:

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

更深入的信息

使用gulp-sass而不是 gulp-ruby-sass。在它的开发周期的这一点上，它是一个更快、更好支持的 Sass 版本。

这就是我通常在 styles 构建任务中使用 gulp-sass 的方式(基于 Yeoman 生成器 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}));
});

它与您的类似，但它输出源映射，这在您调试压缩代码时非常有用。您必须添加 gulp-sourcemaps到你的 package.json 让它工作。