如何在Gulp中匹配和return各种扩展名的文件?
How to match and return files with various extensions in Gulp?
我正在尝试 return 扩展名为 .css 和 .styl 的文件,它们位于不同的文件夹中,并在 Gulp 任务中使用它们,但没有成功。我想知道我在这里做错了什么?这是我此时的代码:
var pattrn = /(styl|css)$/g;
var path1 = './dev/**/';
var paths = {
dev_styles: path1.match( pattrn ),
build: './build'
};
gulp.task( 'styles', function() {
var processors = [
csswring,
autoprefixer( { browsers: [ 'last 2 version' ] } )
];
return gulp
.src( paths.dev_styles )
.pipe( plugins.postcss( processors ) )
.pipe( plugins.rename( { suffix: '.min'} ) )
.pipe( gulp.dest( paths.build ) );
});
我收到这个错误:
Error: Invalid glob argument: null
好吧,你的问题是那不是 gulp 的工作方式。
检查关于 gulp.src 的 documentation,它指出:
gulp.src(globs[, options]) accept glob or array of globs to read.
这意味着您不需要进行花哨的(奇怪的)过滤,指定适当的 node-glob syntax 就足够了。
回到你的问题,这将解决它:
gulp.task( 'styles', function() {
var processors = [
csswring,
autoprefixer( { browsers: ['last 2 version' ] } )
];
return gulp
.src( 'root_to_styl_files/**/*.styl' ) // Will get all .styl files in the specified folder & subfolders
.pipe( plugins.postcss( processors ) )
.pipe( plugins.rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './build' ) );
});
数组 的 Glob 是解决方案。不需要正则表达式,正如上面 avcajaraville 所建议的那样。这是完成工作的片段:
.src(['./root_to_files/**/*.css', './root_to_files/**/*.styl']),
这将 return 与模式匹配的文件,并使它们可供您拥有的任何 gulp 插件进一步处理(管道传输)。它们最终将被放入目标文件夹 (dest),如果不进行进一步处理(如展平、清理等),将再现原始文件夹结构。
.pipe(gulp.dest('./build'));
我正在尝试 return 扩展名为 .css 和 .styl 的文件,它们位于不同的文件夹中,并在 Gulp 任务中使用它们,但没有成功。我想知道我在这里做错了什么?这是我此时的代码:
var pattrn = /(styl|css)$/g;
var path1 = './dev/**/';
var paths = {
dev_styles: path1.match( pattrn ),
build: './build'
};
gulp.task( 'styles', function() {
var processors = [
csswring,
autoprefixer( { browsers: [ 'last 2 version' ] } )
];
return gulp
.src( paths.dev_styles )
.pipe( plugins.postcss( processors ) )
.pipe( plugins.rename( { suffix: '.min'} ) )
.pipe( gulp.dest( paths.build ) );
});
我收到这个错误:
Error: Invalid glob argument: null
好吧,你的问题是那不是 gulp 的工作方式。
检查关于 gulp.src 的 documentation,它指出:
gulp.src(globs[, options]) accept glob or array of globs to read.
这意味着您不需要进行花哨的(奇怪的)过滤,指定适当的 node-glob syntax 就足够了。
回到你的问题,这将解决它:
gulp.task( 'styles', function() {
var processors = [
csswring,
autoprefixer( { browsers: ['last 2 version' ] } )
];
return gulp
.src( 'root_to_styl_files/**/*.styl' ) // Will get all .styl files in the specified folder & subfolders
.pipe( plugins.postcss( processors ) )
.pipe( plugins.rename( { suffix: '.min' } ) )
.pipe( gulp.dest( './build' ) );
});
数组 的 Glob 是解决方案。不需要正则表达式,正如上面 avcajaraville 所建议的那样。这是完成工作的片段:
.src(['./root_to_files/**/*.css', './root_to_files/**/*.styl']),
这将 return 与模式匹配的文件,并使它们可供您拥有的任何 gulp 插件进一步处理(管道传输)。它们最终将被放入目标文件夹 (dest),如果不进行进一步处理(如展平、清理等),将再现原始文件夹结构。
.pipe(gulp.dest('./build'));