我可以使用具有多个来源和多个目的地的Gulp任务吗？

我在我的gulpfile.js中有以下内容：

var sass_paths = [ './httpdocs-site1/media/sass/**/*.scss', './httpdocs-site2/media/sass/**/*.scss', './httpdocs-site3/media/sass/**/*.scss' ]; gulp.task('sass', function() { return gulp.src(sass_paths) .pipe(sass({errLogToConsole: true})) .pipe(autoprefixer('last 4 version')) .pipe(minifyCSS({keepBreaks:true})) .pipe(rename({ suffix: '.min'})) .pipe(gulp.dest(???)); }); 

我想输出我缩小的CSS文件到以下path：

 ./httpdocs-site1/media/css ./httpdocs-site2/media/css ./httpdocs-site3/media/css 

我误解如何使用来源/目的地？ 还是我想在一个任务中完成太多？

编辑：更新输出path到相应的站点目录。

Answer 1

我想每个文件夹配方的运行任务可能会有所帮助。

更新

遵循配方中的想法，并简单介绍一下您的示例，这可能是一个解决scheme：

 var gulp = require('gulp'), path = require('path'), merge = require('merge-stream'); var folders = ['httpdocs-site1', 'httpdocs-site2', 'httpdocs-site3']; gulp.task('default', function(){ var tasks = folders.map(function(element){ return gulp.src(element + '/media/sass/**/*.scss', {base: element + '/media/sass'}) // ... other steps ... .pipe(gulp.dest(element + '/media/css')); }); return merge(tasks); }); 

Answer 2

您可以使用gulp-rename来修改文件的写入位置。

 gulp.task('sass', function() { return gulp.src(sass_paths, { base: '.' }) .pipe(sass({errLogToConsole: true})) .pipe(autoprefixer('last 4 version')) .pipe(minifyCSS({keepBreaks:true})) .pipe(rename(function(path) { path.dirname = path.dirname.replace('/sass', '/css'); path.extname = '.min.css'; })) .pipe(gulp.dest('.')); }); 

重要的一点：在gulp.src使用base选项。

Answer 3

如果您想使用多个srcs，但您可以在同一个目录中有多个目标，则您将要使用合并stream。 这是一个例子。

 var merge = require('merge-stream'); gulp.task('sass', function() { var firstPath = gulp.src(sass_paths[0]) .pipe(sass({errLogToConsole: true})) .pipe(autoprefixer('last 4 version')) .pipe(minifyCSS({keepBreaks:true})) .pipe(rename({ suffix: '.min'})) .pipe(gulp.dest('./httpdocs-site1/media/css')) .pipe(gulp.dest('./httpdocs-site2/media/css')); var secondPath = gulp.src(sass_paths[1]) .pipe(sass({errLogToConsole: true})) .pipe(autoprefixer('last 4 version')) .pipe(minifyCSS({keepBreaks:true})) .pipe(rename({ suffix: '.min'})) .pipe(gulp.dest('./httpdocs-site1/media/css')) .pipe(gulp.dest('./httpdocs-site2/media/css')); return merge(firstPath, secondPath); }); 

我以为你想在这里有不同的path，所以有site1和site2，但你可以根据需要做到这一点。 你也可以在任何步骤之前指定一个dest，例如，如果你想让一个dest有.min文件，而另一个没有.min文件。

Answer 4

对于那些问自己如何处理common / specifics css文件（对于脚本来说是一样的），下面是一个可能的输出来解决这个问题：

 var gulp = require('gulp'); var concat = require('gulp-concat'); var css = require('gulp-clean-css'); var sheets = [ { src : 'public/css/home/*', name : 'home.min', dest : 'public/css/compressed' }, { src : 'public/css/about/*', name : 'about.min', dest : 'public/css/compressed' } ]; var common = { 'materialize' : 'public/assets/materialize/css/materialize.css' }; gulp.task('css', function() { sheets.map(function(file) { return gulp.src([common.materialize, file.src + '.css', file.src + '.scss', file.src + '.less']) .pipe( concat(file.name + '.css') ) .pipe( css() ) .pipe( gulp.dest(file.dest) ) }); }); 

你现在所要​​做的就是添加你的工作表作为对象符号构造。

如果你有另外的commons脚本，你可以通过名字把它们映射到common对象上，然后在这个例子的materialize之后，但是在file.src + '.css'之前添加它们，你可能想用你的习惯来覆盖这个common文件文件。

请注意，在src属性中，您也可以像这样放置path：

'public/css/**/*.css'

范围整个后裔。

Answer 5

使用吞咽，如果帮助我很多

如果第一个论点，一口吞下 是吞咽比赛第二个参数condition

吞咽，如果可以发现吞咽，如果

 import {task, src, dest} from 'gulp'; import VinylFile = require("vinyl"); const gulpif = require('gulp-if'); src(['foo/*/**/*.md', 'bar/*.md']) .pipe(gulpif((file: VinylFile) => /foo\/$/.test(file.base), dest('dist/docs/overview'))) .pipe(gulpif((file: VinylFile) => /bar\/$/.test(file.base), dest('dist/docs/guides'))) });