I'd like to watch multiple files, when they change I'd like to run MsBuild and fire a reload with BrowserSync when the build is finished. So far I've got this "watcher":
gulp.watch([config.templatePath+'/**/*','!'+config.templatePath+'/assets/stylesheets/**/*'],['build']).on('change', function(file) {
browsersync.reload(file);
});
And this build task:
gulp.task('build', function() {
return gulp
.src(config.projectFile)
.pipe(msbuild({
toolsVersion: 12.0
}));
});
This is working fine, but the browser is reloaded before the build is finished. First I thought is was a problem with gulp-msbuild but I was forgotten the return, see: https://github.com/hoffi/gulp-msbuild/issues/8.
The build task is fired before the reload, but it's not waiting until it's completed. Any ideas how to fix this?
Thanks in advance!
you'll need a separate task for that, like build_reload:
gulp.task('build_reload', function() {
return gulp
.src(config.projectFile)
.pipe(msbuild({
toolsVersion: 12.0
}))
.on('end', function() {
browsersync.reload();
}));;
});
then change the watch task to:
gulp.watch([config.templatePath + '/**/*', '!' + config.templatePath + '/assets/stylesheets/**/*'], ['build_reload']);
this way it's only going to reload after everything finished.
Related
I need to build a sequence of Gulp tasks like this:
Task1 -> Task2A, Task2B, Task2C -> Task3,
where tasks 2A,2B,2C run in parallel(but task1 should be completed before, and completed just once).
What I tried:
gulp.task('Task1', []);
gulp.task('Task2A', ['Task1']);
gulp.task('Task2B', ['Task1']);
gulp.task('Task2C', ['Task1']);
gulp.task('Task3', ['Task2A', 'Task2B', 'Task2C']);
Looks like it's working, but I'm not sure, does it guarantee that Task1 will be executed only 1 time, or it can be triggered multiple times?
Thank you.
Perhaps the simplest way to do this (without using gulp4.0) is the run-sequence plugin.
For your case:
var runSequence = require('run-sequence');
gulp.task('build', function(callback) {
runSequence( 'Task1',
['Task2A', 'Task2B', 'Task2C'],
'Task3',
callback);
});
Make sure you have return statements in all your tasks.
Please Note
This was intended to be a temporary solution until the release of gulp 4.0 which should have support for defining task dependencies similarly.
Given that Gulp 4 appears to never be fully released, take that for what you will. Be aware that this solution is a hack, and may stop working with a future update to gulp.
Try this structure
gulp.task('Task1', []);
gulp.task('Task2A', ['Task1']);
gulp.task('Task2B', ['Task2A']);
gulp.task('Task2C', ['Task2B']);
gulp.task('Task3', ['Task2C']);
Also, you can run task inside another task, like this:
gulp.task('task1', function(){
gulp.start('task2');
})
Everytime I rename a file in srcDir, build-task get triggered twice, and they run concurrently too.
While the first build-task-instance run, the second instance clean-task triggered, causing weird errors and crash the gulp process entirely.
How can I stop this from happening ?
Here's the code:
// Clean task
gulp.task('clean', function () {
return gulp.src(dstDir)
.pipe(plugins.clean({ read: false }));
});
// Build task
gulp.task('build', ['clean'], function() {
gulp.src(srcDir)
.pipe(plugins.imagemin()) // Just for example, not neccessary exactly the same
.gulp.dest(dstDir);
});
// Watch task
gulp.task('watch', function() {
gulp.watch(srcDir, ['build']);
});
The plugin I used for cleaning is gulp-clean
Consider this example given on the BrowserSync + Gulp page regarding Browser Reloading, especially this part:
// use default task to launch BrowserSync and watch JS files
gulp.task('default', ['browser-sync'], function () {
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js', browserSync.reload]);
});
As task dependencies are run asynchronously (here: the js and browserSync.reload) couldn't it happen that the reload finishes before the js task?
Yes, according to the documentation, that's a possibility.
Off that same page...
(make sure you return the stream from your tasks to ensure the browser is reloaded at the correct time)
If it's an async task it will just fire and not return anything, and the watcher will not know to refresh. Or it may reload before the process is done.
To get around this, you should be adding callbacks to your tasks.
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
Just return the stream so Gulp knows what is up. Then set the watch for the task you want:
gulp.task('default', ['browser-sync'], function () {
// Watched tasks are run in parallel, not in series.
gulp.watch(['*.js'], ['somename', browserSync.reload]);
});
This is all included in the documentation:
https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
gulpfile.js
gulp.task('browser-bundle', ['react'], function() {
...
});
gulp.task('react', function(){
gulp.src(options.JSX_SOURCE)
.pipe(react())
.pipe(gulp.dest(options.JSX_DEST))
});
As you can see I have the browser-bundle task depending on the react task. I believe this works as expected because in the output I see this:
[gulp] Running 'react'...
[gulp] Finished 'react' in 3.43 ms
[gulp] Running 'browser-bundle'...
However, although the react task is finished, the files its supposed to write to the operating system are not quite there yet. I've notice that if I put a sleep statement in the browser bundle command then it works as expected, however this seems a little hacky to me.
If I want the react task to not be considered finished until the files (from gulp.dest) have been synchronously written to disk how would I do that?
You need a return statement:
gulp.task('react', function(){
return gulp.src(options.JSX_SOURCE)
.pipe(react())
.pipe(gulp.dest(options.JSX_DEST))
});
With this all my write operations are done before the next task processed.
back to 2019: if some one come here with similar problem
In gulp 4.*, at least, gulp wait for promise to resolve but ignore the result.
so... if you use async await pattern and return the result of gulp.src('...') you got a surprise. the task not wait for stream finish before it continue! somthing that can result to serious bug and waist of time. the solution is "promisify" gulp.src
example:
gulp.task( async function notWaitingTask(){
// the return stream are ignored because function return promise not stream
return gulp.src('file.js')
.pipe(gulp.dest('new-location'))
})
gulp.task( async function waitingTask(){
// the return stream are respect
await promisifyStream(
gulp.src('file.js')
.pipe(gulp.dest('new-location'))
)
})
function promisifyStream(stream) {
return new Promise( res => stream.on('end',res));
}
The accepted answer is spot on, but as per https://github.com/gulpjs/gulp/issues/899, in the 3.x branch of gulp, you cannot do this with dependencies without a bit of extra special sauce:
var run = require('run-sequence');
var nodeunit = require('gulp-nodeunit');
var babel = require('gulp-babel');
var gulp = require('gulp');
/// Explicitly run items in order
gulp.task('default', function(callback) {
run('scripts', 'tests', callback);
});
/// Run tests
gulp.task('tests', function() {
return gulp.src('./build/**/*.tests.js').pipe(nodeunit());
});
// Compile ES6 scripts using bable
gulp.task('scripts', function() {
return gulp.src('./src/**/*.js')
.pipe(babel())
.pipe(gulp.dest('./build'));
});
Notice specifically the use of the 'run-sequence' module to force the tasks to run one after another, as well.
(Without run, rm -rf build && gulp will result in OK: 0 assertions (0ms) because the tests task will not find the files created by the scripts task because it starts before the scripts task is completely resolved)
Met same issue here. Let's say there are 2 tasks, First and Second. Second runs after First.
The First task generates some files, which are to be read by the Second task. Using dependency doesn't make sure the Second task can find the files generated.
I have to explicitly using the done callback on the pipeline to let Second only starts after First truly done.
//This approach works!
gulp.task('First', function(done)) {
var subFolders = fs.readdirSync(somefolder)...
var tasksForFolders = subFolders.map(function(folder) {
return gulp.src('folder/**/*').sthtogeneratefiles();
});
tasksForFolders[tasksForFolders.length-1].on('end',done);
return tasksForFolders;
}
gulp.task('Second', ['First'],function() {
return gulp.src('generatedfolders/**/*').doth();
}
Without the done trick, the Second never finds the files generated by First. Below shows what I tried, the Second task can find the files generated by calling gulp First by hand, and then calling gulp Second subsequently.
//This is the WRONG approach, just for demonstration!!
gulp.task('First', function()) {
var subFolders = fs.readdirSync(somefolder)...
var tasksForFolders = subFolders.map(function(folder) {
return gulp.src('folder/**/*').sthtogeneratefiles();
});
return tasksForFolders;
}
gulp.task('Second', function() {
return gulp.src('generatedfolders/**/*').doth();
}
I'm using grunt to have some tasks done every time I change my code ( jshint for example ) and I want to reload a phantomJs process every time I have changes.
The first way I found is to use grunt.util.spawn to run phantomJs the first time.
// http://gruntjs.com/api/grunt.util#grunt.util.spawn
var phantomJS_child = grunt.util.spawn({
cmd: './phantomjs-1.9.1-linux-x86_64/bin/phantomjs',
args: ['./phantomWorker.js']
},
function(){
console.log('phantomjs done!'); // we never get here...
});
And then, every time watch restarts, another task uses grunt.util.spawn to kill the phantomJs process, which is of course VERY ugly.
Is there any better way to do it?
The thing is that the phantomJs process is not teminating because I use it as a webserver to server a REST API with JSON.
Can I have a grunt callback or something whenever watch kicks in so I can close my previous phantomJs process before I re-run the task to create a new one?
I used grunt.event to make a handler, but I cannot see how to access the phantomjs process in order to kill it.
grunt.registerTask('onWatchEvent',function(){
// whenever watch starts, do this...
grunt.event.on('watch',function(event, file, task){
grunt.log.writeln('\n' + event + ' ' + file + ' | running-> ' + task);
});
});
This entirely untested code could be a solution for your problem.
Node's native child spawning function exec immediately returns a reference to the child process, which we can keep around to later kill it. To use it we can create a custom grunt task on the fly, like so:
// THIS DOESN'T WORK. phantomjs is undefined every time the watcher re-executes the task
var exec = require('child_process').exec,
phantomjs;
grunt.registerTask('spawn-phantomjs', function() {
// if there's already phantomjs instance tell it to quit
phantomjs && phantomjs.kill();
// (re-)start phantomjs
phantomjs = exec('./phantomjs-1.9.1-linux-x86_64/bin/phantomjs ./phantomWorker.js',
function (err, stdout, stderr) {
grunt.log.write(stdout);
grunt.log.error(stderr);
if (err !== null) {
grunt.log.error('exec error: ' + err);
}
});
// when grunt exits, make sure phantomjs quits too
process.on('exit', function() {
grunt.log.writeln('killing child...');
phantomjs.kill();
});
});