I'm having a hard time to understand on how to process multiple gulp sources in a single task. In a task like this:
gulp.task('task1', function (cb) {
gulp.src('src/js/**/*').pipe(gulp.dest('dist'));
gulp.src('src/css/**/*').pipe(gulp.dest('dist'));
...
});
I would like to process all the different source files and then mark the task as finished, so the others tasks can depend on it's completion.
I'm aware of the possibility, to using individual tasks for each individual source but this would make everything more complicated and bloat the orchestrator with a huge number of tasks that are actually not needed individually.
You can pass an array of globs to gulp.src if you are doing the same things to all files. For example,
gulp.task('task1', function () {
return gulp.src(['src/js/**/*', 'src/css/**/*']).pipe(gulp.dest('dist'));
});
Be sure to return the stream so the orchestrator knows when that task is complete.
If you are doing different things to the different sets of files, you can merge the streams like this in one task:
var es = require('event-stream');
gulp.task('fancy-task', function () {
return es.merge(
gulp.src('*.js').pipe(some-js-plugin()),
gulp.src('*.css').pipe(some-style-plugin))
.pipe(gulp.dest('dist'));
});
Related
I recently upgraded to gulp 4 and I am trying to solve a long standing issue of with my export process.
In short I have 3 (or more) independent folders in my project. By independent I mean that they each have their own bundle.js and global.css file. I have setup a target variable in my gulpfile which is used to create all the paths gulp needs for that target.
In the current situation when I want to export my entire project I need to manually change the target variable in the gulpfile and then run the export task.
I need something that works like the following (as the other_folders array can change)
/*---------- Exports current target ----------*/
gulp.task('export', gulp.series(to_prod,'export_files', 'export_scripts_and_styles', 'export_fonts', 'export_core'));
/*---------- Exports all targets ----------*/
gulp.task('export_all', function(done){
var needs_exporting = other_folders.concat("website");
needs_exporting.forEach(function(export_this){
target = export_this;
set_paths();
// Here it needs to fire the generic export task
gulp.series('export');
});
done();
});
The problem is that I cannot seem to find a way to call a gulp task in the forEach loop. Is there a way to do this or do I need a workaround?
Calling gulp.series('export') doesn't immediately start the export task. It just returns a function that you have to call in order to start the export task.
However calling the returned function doesn't start the export task immediately either. The function is asynchronous. Only later is the export task actually started.
The easiest way to run an asynchronous function for each element of a collection in series is to use the eachSeries() function that's provided by the async package:
var async = require('async');
gulp.task('export_all', function(done){
var needs_exporting = other_folders.concat("website");
async.eachSeries(needs_exporting, function(export_this, cb) {
target = export_this;
set_paths();
gulp.series('export')(cb);
}, done);
});
I have a Gulp build process that runs through roughly 10 tasks, including browserify and watch. It currently builds a common-bundle.js, and common-libs.js. It uses browser-sync to give me sub-second rebuilds.
Now I want to also build a project that depends on the common project. I want to retain the live rebuilds of both common and this project so that I could work on both of them at the same time. I want to keep the build process itself as DRY as possible and reuse the tasks i created to build common.
For example, a sample task:
var config = require('../config');
gulp.task('styles', function () {
return gulp.src(config.styles.src) // if i could tell it to get config elsewhere...
...
I can't pass a parameter into each task to tell it, go run the task but use:
var config = require('../config').common;
vs.
var config = require('../config').projectA;
I don't think tasks can take parameters.
Is there a different way to structure this?
git/gist link would be highly appreciated.
For now I am trying this approach - each task js file has 2 tasks defined, but at least the logic of the task is reused. I still wish for something cleaner.
./gulp/task/style.js:
function styles(config){
return gulp.src(config.styles.src)
...
}
}
gulp.task('styles', function () {
styles(config.common);
});
gulp.task('stylesProject1', function () {
styles(config.project1);
});
devTask.js:
runSequence(['styles', 'stylesProject1], 'watch', callback);
I'm having some trouble with a couple of gulp tasks. i've tried everything and followed the documentation but nothing seems to work. Hoping someone can help.
What i'm trying to do is have sass minification happen, then rsync the result to a local vagrant folder (NOT a remote server), then reload browser sync.
The problem i am having is that I'm fighting the fact that gulp wants to run all the tasks together. I need them to happen one after the other. All the tasks work on their own, i am just having trouble making them run sequentially. I've tried callbacks and playing with dependency but i'm obviously missing something.
My setup is complicated, all my tasks are in separate js files but i've tried to combine what i have into this single github gist so people can help. Thanks for any assistance.
https://gist.github.com/CodeStalker/9661725dcaf105d2ed6c
The only way I have got this to work is to pipe rsync onto the end of the sass magnification, and wrap it in gulp-if using a server: true variable so it only does the rsync if it knows its running on a VM. Not ideal.
This is a common issue people run into with Gulp, especially when coming from Grunt. Gulp is async to the max, it always wants to do as many things as it can all at the same time.
The first step to getting tasks to run sequentially is to let gulp know when your task ends, this can be done a couple different ways.
1) Return a stream, gulp will wait for the stream's "end" event as the trigger for that task being done. Example:
gulp.task( "stream-task", function(){
return gulp.src( srcGlob )
.pipe(sass())
.pipe(compressCSS())
.pipe(gulp.dest( destGlob ));
});
2) Return a Promise, gulp will wait for the promise to enter a resolved state before signaling the task as done. Example: (not perfect just to get the point across)
gulp.task( "promise-task", function() {
return new Promise(function(resolve, reject){
fs.readFile( "filename", function( err, data ){
if( err ){ return reject(err); }
return resolve( data );
});
});
});
3) Call the task callback, if the function doesn't return anything but the function signature takes an argument, that argument will be a callback function you can call to signal the task as done. Example:
gulp.task( "cb-task", function( done ){
fs.readFile( "filename", function( err, data ){
// do stuff, call done...
done();
});
});
Most often you are going to be returning a stream like example 1, which is what a typical gulp task looks like. Options 2 and 3 are more for when you are doing something that isn't really a traditional stream based gulp task.
The next thing is setting the "dependency" of one task for another. The gulp docs show this as the way you do that:
gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });
Now I don't know the current status but there were some issues with these dependency tasks not running in the proper order. This was originally caused by a problem with one of gulp's dependencies (orchestrator I believe). One kind gentleman out there in NPM land made a nice little package to be used in the interim while the bugs were being worked out. I started using it to order my tasks and haven't looked back.
https://www.npmjs.com/package/run-sequence
The documentation is good so I won't go into a lot of detail here. Basically run-sequence lets explicitly order your gulp tasks, just remember it doesn't work if you don't implement one of the three options above for each of your tasks.
Looking at your gist adding a couple missing return statements in your tasks may just do the trick, but as an example this is what my "dev" task looks like for my project at work...
gulp.task( "dev", function( done ){
runSequence(
"build:dev",
"build:tests",
"server:dev",
[
"less:watch",
"jscs:watch",
"lint:watch",
"traceur:watch"
],
"jscs:dev",
"lint:dev",
"tdd",
done // <-- thats the callback method to gulp let know when this task ends
);
});
Also for reference my "build:dev" task is another use of run-sequence
gulp.task( "build:dev", function( done ){
runSequence(
"clean:dev",
[
"less:dev",
"symlink:dev",
"vendor:dev",
"traceur:dev"
],
done // <-- thats the callback method to let know when this task ends
);
});
If the tasks need to be run in order the task name gets added as its own argument to runSequence if they don't conflict send them in as an array to have the tasks run at the same time and speed up your build process.
One thing to note about watch tasks! Typically watch tasks run indefinitely so trying to return the "infinite" stream from them may make gulp think that the task never ends. In that case I'll use the callback method to make gulp think the task is done even if it is still running, something like...
gulp.task( "watch-stuff", function( done ){
gulp.watch( watchGlob )
.on( "change", function( event ){ /* process file */ });
done();
});
For more on watch tasks and how I do incremental builds check out an answer I wrote the other day, Incremental gulp less build
Here you go, I believe it should work now. If not let me know, I might have made a typo.
Your gist fixed
I think you are hitting (i don't have enough reputation points to post link, google issues #96) which is fixed in 4.x which isn't out yet :-). That said, check this hack out: My post about Gulp v3.x bug
I am confused about gulp.src().
According to this thread I would assume that it is necessary to return gulp.src().
The examples on the gulp project always return gulp.src(). i.e. the gulp intro sample.
However many plugins do show documentation that do not return gulp.src(). i.e: gulp-less or gulp-angular-templatecache
How should I decide if my task should return gulp.src()?
You should always return gulp.src so that gulp can properly sink the stream for you. The stream may not complete otherwise, if you have a large number of files in it. Plus you get some other (minor) benefits such as that the correct task completion time will be logged by the runner.
Oftentimes I'll see people praising gulp for tasks that are reported as taking microseconds to complete, but all they did was not return the stream. The task took just as long to complete if we had returned the stream, however.
The other problem with not returning the stream is setting up dependent tasks. If you want some task to run before another task, you need to tell gulp that you're done processing. You either do this with a callback function for the task, or by returning the stream.
The only case in which I would not return the stream is if I have more than one stream in a single task; for that you can use merge-stream:
var merge = require('merge-stream');
gulp.task('task', function () {
var someOperation = gulp.src('./').pipe(gulp.dest('out'));
var someOtherOperation = gulp.src('./assets').pipe(gulp.dest('out/assets'));
return merge(someOperation, someOtherOperation);
});
So... while it is not mandatory, it is a best practice. I would suggest to pull request those plugin author's repositories to update their README files to indicate this.
If you do not return the stream, gulp will report the time it takes to build the pipe. If you return the stream, it will correctly report the time it takes to execute the task(s).
Gulp says it took 13ms to run my "js" command, but then it hangs for another 2 seconds or so after it's "complete".
So either my task didn't complete in 13ms, or gulp is twiddling its thumbs for an extra two seconds after it's done. Which is it? Is there a way to fix this? I'd like to know how long my tasks are really taking; maybe I can trim some fat off.
First, you need to have async tasks set up correctly. This usually means simply returning the stream, but you can also accept a callback or return a promise:
gulp.task('foo', function() {
return gulp.src()...
});
gulp.task('foo', function(cb) {
// use the callback however
doAsyncThing().on('done', cb);
});
Second, tasks are always run simultaneously, unless they have a dependency on each other. If you need to run tasks in a series, rather than parallel, and cannot use the built-in dependency resolution, then use my library, run-sequence, designed specifically for this scenario..