Javascript 我可以使用具有多个源和多个目标的 Gulp 任务吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26784094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use a Gulp task with multiple sources and multiple destinations?
提问by David Angel
I have the following in my gulpfile.js:
我的 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(???));
});
I'm wanting to output my minified css files to the following paths:
我想将我缩小的 css 文件输出到以下路径：
./httpdocs-site1/media/css
./httpdocs-site2/media/css
./httpdocs-site3/media/css
Am I misunderstanding how to use sources/destinations? Or am I trying to accomplish too much in a single task?
我是否误解了如何使用来源/目的地？还是我试图在一项任务中完成太多？
Edit: Updated output paths to corresponding site directories.
编辑：更新了相应站点目录的输出路径。
回答by Ghidello
I guess that the running tasks per folderrecipe may help.
Update
更新
Following the ideas in the recipe, and oversimplifying your sample just to give the idea, this can be a solution:
遵循配方中的想法，并过度简化您的样本只是为了给出想法，这可以是一个解决方案：
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);
});
回答by ckross01
you are going to want to use merge streams if you would like to use multiple srcs but you can have multiple destinations inside of the same one. Here is an example.
如果您想使用多个 src，但您可以在同一个内部有多个目的地，那么您将想要使用合并流。这是一个例子。
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);
});
I assumed you wanted different paths piped here so there is site1 and site2, but you can do this to as many places as needed. Also you can specify a dest prior to any of the steps if, for example, you wanted to have one dest that had the .min file and one that didn't.
我假设您希望在此处通过管道传输不同的路径，因此有站点 1 和站点 2，但是您可以根据需要在任意多个位置执行此操作。您还可以在任何步骤之前指定一个 dest，例如，如果您想要一个 dest 包含 .min 文件而另一个没有。
回答by Heikki
You can use gulp-renameto modify where files will be written.
您可以使用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('.'));
});
Important bit: use baseoption in gulp.src.
重要一点：base在gulp.src.
回答by Anwar
For the ones that ask themselves how can they deal with common/specifics css files (works the same for scripts), here is a possible output to tackle this problem :
对于那些问自己如何处理常见/特定 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) )
});
});
All you have to do now is to add your sheets as the object notation is constructed.
您现在要做的就是在构造对象符号时添加您的工作表。
If you have additionnal commons scripts, you can map them by name on the object common, then add them after materialize for this example, but before the file.src + '.css'as you may want to override the common files with your customs files.
如果您有其他公共脚本，您可以按名称在 object 上映射它们common，然后在本示例的 materialize 之后添加它们，但在file.src + '.css'您可能希望用您的海关文件覆盖公共文件之前。
Note that in the srcattribute you can also put path like this :
请注意，在src属性中，您还可以像这样放置路径：
'public/css/**/*.css'
'public/css/**/*.css'
to scope an entire descendence.
范围整个后代。
回答by xsilen T
Using gulp-ifhelps me a lot.
使用gulp-if对我有很大帮助。
The gulp-if first argument. is the gulp-match second argument condition
gulp-if 第一个参数。是 gulp-match 第二个参数condition
gulp-if can be found in gulp-if
gulp-if 可以在gulp-if 中找到
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')))
});
回答by Carles Alcolea
I had success without needing anything extra, a solution very similar to Anwar Nairi's
我不需要任何额外的东西就成功了，一个与Anwar Nairi 的解决方案非常相似的解决方案
const p = {
dashboard: {
css: {
orig: ['public/dashboard/scss/style.scss', 'public/dashboard/styles/*.css'],
dest: 'public/dashboard/css/',
},
},
public: {
css: {
orig: ['public/styles/custom.scss', 'public/styles/*.css'],
dest: 'public/css/',
},
js: {
orig: ['public/javascript/*.js'],
dest: 'public/js/',
},
},
};
gulp.task('default', function(done) {
Object.keys(p).forEach(val => {
// 'val' will go two rounds, as 'dashboard' and as 'public'
return gulp
.src(p[val].css.orig)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoPrefixer())
.pipe(cssComb())
.pipe(cmq({ log: true }))
.pipe(concat('main.css'))
.pipe(cleanCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest(p[val].css.dest))
.pipe(reload({ stream: true }));
});
done(); // <-- to avoid async problems using gulp 4
});
