我正在关注 this tutorial 在 Ubuntu 上设置 gulp.js。但是,当我在终端中运行 gulp styles 时,出现“TypeError: glob pattern string required”错误。我是一个完全 gulp 的菜鸟 - 任何人都可以指出我正确的方向吗?

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

我的文件目录:

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

编辑:

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

并收到此错误输出:

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

我的语法错了吗?

最佳答案

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 才能使其正常工作。

关于javascript - Gulp.js 类型错误 : glob pattern string required,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34629296/

10-15 18:01