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

它与您的类似，但它会输出源图，这在您调试压缩代码时非常有用。您必须向package.json添加gulp-sourcemaps才能使其生效。

Answer 2

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

Answer 3

请在这里查看DOC，您必须使用union all而不是直接使用： -

gulp-ruby-sass

它可能对你有帮助。

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文件{ {1}}进入终端。在此处，随意添加/删除您自己的gulp plugins。希望这会有所帮助。

Gulp.js TypeError：需要glob模式字符串

4 个答案:

更深入的信息