Gulp.js TypeError: glob模式字符串所需

Question

我跟踪本教程在Ubuntu上设置gulp.js。但是，当我在终端中运行gulp styles时，我会得到'TypeError: glob模式字符串所需‘错误。我是个彻头彻尾的暴饮暴食者--谁能给我指明正确的方向吗？

我的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脚本工作的方法(几乎所有的教程都超出了我想要的范围，所以我不得不通过尝试和错误来解决它)。

这是我的gulp.js文件：

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

以下是我的文件结构：

​

​

基本上，它所做的就是利用这个babel.js插件，并将js/dev/main.js中的my (ECMA6) javascript转换为ECMA5 javascript，这是它在将gulp输入终端时创建的一个/js/main.js文件。从这里开始，随意添加/删除您自己的吞咽插件。希望这能有所帮助。

Answer 2

gulp引发的错误与post-css npm模块有关。既然你用的是sass，我不知道为什么会有这个。尝试删除它并发布您的package.json文件。

根据文档，您不希望在第一个声明中使用pipe。试一试：

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

更深入的信息

用吞咽代替吞红宝石。在开发周期的这个阶段，它是一个更快、更受支持的Sass版本。

这就是我通常在styles构建任务(基于约曼生成器gulp-webapp)中使用gulp的方式：

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

它与您的相似，但它输出源代码，这在调试压缩代码时非常有用。您必须将吞咽源图添加到您的package.json中，才能使其正常工作。

Answer 3

我过去也遇到过类似的问题。您需要直接使用sass插件(而不是使用管道)。