Gulp.js TypeError: glob pattern string required
Gulp.js TypeError: glob pattern string required
我正在跟随 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'));
});
并收到此错误输出：
我的语法有误吗？
我过去遇到过类似的问题。您需要直接使用 sass 插件（而不是使用管道）
请在此处查看 DOC，您必须使用 gulp-ruby-sass 而不是直接使用 :-
gulp.task('styles', function () {
return sass(paths.sassSrcPath, {
style: 'compressed',
loadPath: [paths.sassImportsPath]
})
.pipe(gulp.dest(paths.sassDestPath));
});
可能对你有帮助。
gulp 抛出的错误与 post-css npm 模块有关。由于您使用的是 sass，我不确定为什么会这样。尝试删除它和 post 你的 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));
});
更多in-depth信息
使用 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 文件：
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'));
});
这是我的文件结构：
基本上就是随意利用这个gulpbabel.js plugin and converting my (ECMA6) javascript in the js/dev/main.js to ECMA5 javascript in the form of a /js/main.js file it creates upon entering gulp into the terminal. From here, add/remove your own gulp plugins。希望这会有所帮助。
我正在跟随 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'));
});
并收到此错误输出：
我的语法有误吗？
我过去遇到过类似的问题。您需要直接使用 sass 插件（而不是使用管道）
请在此处查看 DOC，您必须使用 gulp-ruby-sass 而不是直接使用 :-
gulp.task('styles', function () {
return sass(paths.sassSrcPath, {
style: 'compressed',
loadPath: [paths.sassImportsPath]
})
.pipe(gulp.dest(paths.sassDestPath));
});
可能对你有帮助。
gulp 抛出的错误与 post-css npm 模块有关。由于您使用的是 sass，我不确定为什么会这样。尝试删除它和 post 你的 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));
});
更多in-depth信息
使用 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 文件：
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'));
});
这是我的文件结构：
基本上就是随意利用这个gulpbabel.js plugin and converting my (ECMA6) javascript in the js/dev/main.js to ECMA5 javascript in the form of a /js/main.js file it creates upon entering gulp into the terminal. From here, add/remove your own gulp plugins。希望这会有所帮助。