Gulp.js类型错误：需要Glob模式字符串。

Question

我正在按照这篇教程在Ubuntu上设置gulp.js：《如何在VPS上开始使用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'));
});

我的文件目录：

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

我运行代码后，收到了以下错误输出：

我的语法有问题吗？

- VoA

---

你的问题已经有一个直接的答案在这里：https://dev59.com/YI_ea4cB1Zd3GeqPTM-z?rq=1。但作为一个gulp新手，我想试着教你一些钓鱼的技巧;) 希望能帮到你。 - serraosays

我看到了那个问题/答案，但是我不明白如何将其应用到我的特定gulp.js文件/文件结构上（现在仍然不明白）。抱歉，就像我说的，我是个新手。 - VoA

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

- serraosays

---

感谢这个建议！我肯定在更熟悉Gulp之后会采纳你的意见。但目前，我只想让它运行一个基本的脚本。你能帮我修复一下我当前的gulp.js文件吗？非常感谢！ - VoA

@VoA - 更新了答案并提供了一个快速修复方法。你不想在第一个声明中使用管道符。 - serraosays

感谢您的帮助 - 您引导了我正确的方向。我已经更新了我的问题，并提供了一个答案，以便其他人也可以看到。基本上，我简化了整个情况，让gulp执行一个基本任务（babel.js），以查看是否能够使其正常工作。 - VoA

很高兴听到这个消息 - 很好奇看到你的最终解决方案。 - serraosays

Answer 2

我曾经遇到过类似的问题。您需要直接使用Sass插件（而不是使用管道）。

- dip

---

请问您能否向我展示如何将其写入我的gulp.js文件中？有一个参考点会非常有帮助。 - VoA

Answer 3

请查看此处的文档，您需要使用gulp-ruby-sass而不是直接使用：

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

它可能会对你有所帮助。

- Harsh Sanghani

---

我尝试使用这个解决方案，但它抛出了另一个错误。请参阅我原帖的编辑以获取详细信息。基本上，我不确定如何将此解决方案应用于我的情况。 - VoA

Answer 4

虽然这不是直接解决我的初始问题的方法，但以下是我如何让最基本的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'));
});

这是我的文件结构：

基本上，它正在利用这个 gulp babel.js 插件，将我在 js/dev/main.js 中的 (ECMA6) JavaScript 转换为 ECMA5 JavaScript，并创建一个 /js/main.js 文件，当输入 gulp 到终端时。从这里开始，您可以根据需要随意添加/删除自己的 gulp插件。希望这能帮到您。

- VoA