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..
Related
I'm trying to set up a Gulp task for eslint (System: OS Windows 10). But it seems that the src is not being evaluated correctly:
gulp.task('lint-app-basic-an', function() {
gulp.src('src/main/webapp/app-basic-an/**/*.js')
.pipe(eslint({
configFile: '.eslintrc.js'
}))
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
There are several subfolders underneath src/main/webapp/app-basic-an, e.g.
src/main/webapp/app-basic-an/components/page-header/page-header.component.js
If I create a lint error in said JS-File, it is ignored by the linter. If I specify the path 1 level more in the tasks .src-function like
gulp.src('src/main/webapp/app-basic-an/components/**/*.js')
It suddenly works, which makes no sense to me, I thought "**/" meant zero or more subdirectories?
Gulp executes its tasks in an asynchronous manner. For gulp to be able to know that some task has finished, the tasks needs to do one of the following:
return stream (e.g. the one created by gulp.src) on which gulp can listen for end event,
return q promise or
call callback function passed as task function argument
If the task does not accept arguments and does not return promise or stream, gulp considers that task synchronous (i.e. it is finished once the function call returns). Once all tasks are finished, the execution stops... hence if you have some async processing, it will never finish (or worse - it might end at a random point).
I've specified some Gulp tasks in a gulpSequence like this:
gulp.task('default', function(done){
gulpSequence(
'private:clean',
'private:copy-app-package-file',
'private:copy-app-main-file',
'private:copy-libs',
'private:copy-app-files',
'private:copy-css-files',
'private:build-html',
'private:package-app',
done);
});
I thought that they should run one after another. The build-html tasks needs the libs, app-files and css-files, because they get included within one html file.
But if I run the default task, the build-html task is missing some files. For example the task can only inject 10 files in the html file but there are 16 files.
Is there another way to specify dependent tasks. I thought the gulpSequence will handle this.
You're on the right lines, but the npm package you are trying to use is depreciated. Might be worth considering checking out run-sequence (https://www.npmjs.com/package/run-sequence) which waits for a previous task to complete before starting.
So in your instance, this would become
gulp.task('default', function( cb ) {
$.runSequence(
'private:clean',
'private:copy-app-package-file',
'private:copy-app-main-file',
'private:copy-libs',
'private:copy-app-files',
'private:copy-css-files',
'private:build-html',
'private:package-app',
cb
)
});
You specified that all tasks should run in sequence with no parallelism at all. A new task starts as soon as a former task shows completion.
Probably you have some issues in a task before the build-html task. Do they handle the completion (done() callback) correctly? In most cases I saw there was some async action triggered and the callback was called before the async task finished. So the sequence continues before the task is really over...
I have a gulpfile, it uses run sequence and gulp.watch().
Here is an example task that uses run sequence.
gulp.task('rebuild', function (callback) {
runSequence('clean',
'lint',
['process-js', 'process-styles', 'move-fonts', 'move-static-content']);
});
When I make a change to a file, the watch task will run the task I specified exactly once. In this case, the task that should be executed is "run", which is the same as the default task except it doesn't run the dev server and watch task again. Nothing happens when I make further edits, whether in the same file or a different one.
If I pass gulp.watch a plain gulp task (without run sequence), for example the clean task, then the watch will run the clean task every time.
I'm sure I'm doing something wrong, but I don't understand what. I think something might be silently erroring and disconnecting the stream, but I can't figure out how to debug this.
You aren't passing the callback into run-sequence, therefore the task never completes. - OverZealous
So the run sequence task needs to look like this:
gulp.task('rebuild', function (callback) {
runSequence('clean',
'lint',
['process-js', 'process-styles', 'move-fonts', 'move-static-content'],
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'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'));
});