Gulp.js TypeError：需要全局模式字符串答案

【问题标题】：Gulp.js TypeError: glob pattern string requiredGulp.js TypeError：需要全局模式字符串
【发布时间】：2016-04-10 07:36:57
【问题描述】：

我正在关注this tutorial 在 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'));
});

并收到此错误输出：

我的语法错了吗？

【问题讨论】：

您的问题的直接答案已经在这里：stackoverflow.com/questions/32967345/…。但作为一个新手，我试着教你钓鱼；）希望它有所帮助。
我看到了该问题/答案，但无法（并且仍然不）理解如何将其应用于我的特定 gulp.js 文件/文件结构。抱歉 - 正如我所说，我是新手。

标签： javascript gulp glob

【解决方案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 才能使其正常工作。

【讨论】：

感谢您的提示！我敢肯定，当我对 Gulp 有了更多了解时，我会采纳你的建议。但是，现在，我只想让它触发一个基本脚本。你有没有机会帮我解决我当前 gulp.js 文件中的任何问题？
@VoA - 更新了答案，您可以尝试快速修复。您不想在第一个声明中使用管道。
感谢您的帮助 - 您将我推向了正确的方向。如果其他人偶然发现它，我已经用答案更新了我的问题。基本上我简化了整个情况，让 gulp 启动一个基本任务（babel.js），看看我是否可以让它工作。
很高兴听到您的最终解决方案。

【解决方案2】：

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

【讨论】：

你能告诉我如何将它写入我的 gulp.js 文件吗？有一个参考点会很有帮助。

【解决方案3】：

请在此处查看 DOC，您必须使用 gulp-ruby-sass 而不是直接使用：-

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

也许对你有帮助。

【讨论】：

我尝试应用此解决方案，但它引发了另一个错误。有关详细信息，请参阅对我的原始帖子的编辑。基本上 - 我不确定如何将此解决方案应用于我的情况。

【解决方案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 转换为在将 gulp 输入终端时创建的 /js/main.js 文件形式的 ECMA5 javascript。从这里，随意添加/删除您自己的gulp plugins。希望这会有所帮助。

【讨论】：