Gulpjs将两项任务合并为一项任务

我目前有两个任务，都编译sass文件。 我仍然希望将这两个目录连接成单独的文件，但是如果我可以简单地创build一个“sass”任务来负责所有的sass编译，那么它似乎更易于维护。

// Compile Our Sass gulp.task('bootstrap-sass', function() { return gulp.src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(contact('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }); gulp.task('site-sass', function() { return gulp.src('./public/app/scss/*.scss') .pipe(sass()) .pipe(contact('site.css')) .pipe(gulp.dest('./public/dist/css')); }); 

更新：

我试过这个：

 // Compile Our Sass gulp.task('sass', function() { var bootstrap = function() { return gulp .src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(concat('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }; var site = function() { return gulp .src('./public/src/scss/*.scss') .pipe(sass()) .pipe(concat('site.css')) .pipe(gulp.dest('./public/dist/css')); }; return Promise.all([bootstrap, site]); }); 

但现在看来，没有文件正在编译。 任何build议，我在做什么错？

Answer 1

我认为这样做的正确方法是使用任务依赖。

在gulp中，您可以定义在给定任务之前需要运行的任务。

例如：

 gulp.task('scripts', ['clean'], function () { // gulp.src( ... }); 

在terminal中执行gulp scripts时，在脚本任务之前运行clean。

在你的例子中，我有两个独立的SASS任务作为一个普通的SASS任务的依赖。 就像是：

 // Compile Our Sass gulp.task('bootstrap-sass', function() { return gulp.src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(contact('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }); gulp.task('site-sass', function() { return gulp.src('./public/app/scss/*.scss') .pipe(sass()) .pipe(contact('site.css')) .pipe(gulp.dest('./public/dist/css')); }); gulp.task('sass', ['bootstrap-sass', 'site-sass']); 

您可以阅读关于Gulp食谱部分的任务依赖关系的更多信息： https ： //github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

Answer 2

有用。

 var task1 = gulp.src(...)... var task2 = gulp.src(...)... return [task1, task2]; 

Answer 3

解决scheme1：

 gulp.task('sass', function() { gulp.start('bootstrap-sass', 'site-sass'); }) 

gulp.start并行运行任务。 而且它是asynchronous的，这意味着'bootstrap-sass'可能会在'site-sass'之前完成。 但不推荐，因为

gulp.start是无意的，因为它可能会导致复杂的构build文件，我们不希望人们使用它

见https://github.com/gulpjs/gulp/issues/426

解决scheme2：

 var runSequence = require('run-sequence'); gulp.task('sass', function (cb) { runSequence(['bootstrap-sass', 'site-sass'], cb); }); 

run-sequence是一个gulp插件。

按指定顺序运行一系列吞吐任务。 此函数旨在解决您定义运行顺序的情况，但不select或不能使用依赖关系。

 runSequence(['bootstrap-sass', 'site-sass'], cb); 

这一行同时运行“boostrap-sass”和“site-sass”。如果你想连续运行任务，你可以

 runSequence('bootstrap-sass', 'site-sass', cb); 

Answer 4

我只是find了一个叫做gulp-all的gulp插件，然后试了一下。 使用起来很简单。

https://www.npmjs.com/package/gulp-all

包的文件说：

 var all = require('gulp-all') var styl_dir = 'path/to/styles/dir' var js_dir = 'path/to/scripts/dir' function build() { return all( gulp.src(styl_dir + '/**/*') // build Styles .pipe(gulp.dest('dist_dir')), gulp.src(js_dir + '/**/*') // build Scripts .pipe(gulp.dest('dist_dir')) ) } gulp.task('build', build); 

你也可以把子任务放在一个数组中：

 var scriptBundles = [/*...*/] function build(){ var subtasks = scriptBundles.map(function(bundle){ return gulp.src(bundle.src).pipe(/* concat to bundle.target */) }) return all(subtasks) } 

Answer 5

原来， site()函数返回一个错误。 为了解决它，我需要确保bootstrap()第一次运行，所以我结束了这个：

 // Compile Our Sass gulp.task('sass', function() { var bootstrap = function() { return gulp .src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(concat('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }; var site = function() { return gulp .src('./public/src/scss/*.scss') .pipe(sass()) .pipe(concat('site.css')) .pipe(gulp.dest('./public/dist/css')); }; return bootstrap().on('end', site); }); 

Answer 6

你有没有尝试过使用合并stream ？

 merge = require('merge-stream'); // Compile Our Sass gulp.task('sass', function() { var bootstrap = gulp .src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(concat('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); var site = gulp .src('./public/src/scss/*.scss') .pipe(sass()) .pipe(concat('site.css')) .pipe(gulp.dest('./public/dist/css')); return merge(bootstrap, site); }); 

有关更多详细信息，请参阅https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams

Answer 7

在gulp4 （仍然是阿尔法），我们有平行的，所以你可以做：

 // Compile Our Sass gulp.task('bootstrap-sass', function() { return gulp.src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(contact('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }); gulp.task('site-sass', function() { return gulp.src('./public/app/scss/*.scss') .pipe(sass()) .pipe(contact('site.css')) .pipe(gulp.dest('./public/dist/css')); }); gulp.task('sass', gulp.parallel('bootstrap-sass', 'site-sass')); // Combine 

你也可以把它作为一个单独的任务来做：

 gulp.task('sass', gulp.parallel( function() { return gulp.src('./public/bower/bootstrap-sass/lib/*.scss') .pipe(sass()) .pipe(contact('bootstrap.css')) .pipe(gulp.dest('./public/dist/css')); }, function() { return gulp.src('./public/app/scss/*.scss') .pipe(sass()) .pipe(contact('site.css')) .pipe(gulp.dest('./public/dist/css')); })); 

我更喜欢第一种方法，因为它更容易维护

Answer 8

也可以通过传递一个如下所示的任务名称来创build另一个任务来编译其他任务：

 gulp.task('sass-file-one', function () { console.log('compiled sass-file-one') }); gulp.task('sass-file-two', function () { console.log('compiled sass-file-two') }); gulp.task('compile-all-sass', ['sass-file-one','sass-file-two']); 

那么你可以简单地运行gulp compile-all-sass

Answer 9

解决scheme：调用function！

 return Promise.all([bootstrap(), site()]) 

注意parens bootstrap（） ， site（），所以他们返回一个承诺:)