我正在关注 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'));
});
我的文件目录:
编辑:
我在我的
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'));
});
并收到此错误输出:
我的语法错了吗?
最佳答案
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/