CODEWITHSUNDEEP
javascriptnode.jsgulp
leaksterrr
leaksterrr

Reputation: 4167

Gulp 'Open' task doesn't correctly execute

Below are snippets from my gulpfile and basically the problem I'm experiencing is that open doesn't always open a new browser window whenever 'gulp' is executed from the CLI. For instance if I delete the generated 'dist' folder and execute 'gulp' then the 'dist' will scaffold out with the .html files and assets structure but it will fail to open the site in my browser window...

If I then cancel the gulp task that's currently running and execute it from the CLI again (with the 'dist' folder in place) then gulp will load the site in a new browser window as it should.

How do I set open up so that it executes every time no matter what? I'm thinking it's clashing with the 'clean' task somehow but I'm not quite sure.

Any help would be appreciated.

Clean task:

gulp.task('clean', function() {
    gulp.src(['./dist/**/*.*'], { read: true })
        .pipe(clean())
});

Open task:

gulp.task('open', function() {
    gulp.src(config.startpage)
        .pipe(open(config.startpage, { url: 'http://localhost:'+config.http_port }));
});

Default task:

gulp.task('default', ['html', 'scripts', 'styles', 'images', 'open', 'clean'], function() {
    server.listen(config.livereload_port);
    http.createServer(ecstatic({ root: 'dist/' } )).listen(config.http_port);
        // gutil.log(gutil.colors.yellow('HTTP Server running on port:'), gutil.colors.red(config.http_port));
    gulp.watch(config.src_sass, ['styles'])._watcher.on('all', livereload);
    gulp.watch(config.src_js, ['scripts'])._watcher.on('all', livereload);
    gulp.watch(config.src_html, ['html'])._watcher.on('all', livereload);
});

*Config.start_page points to dist/index.html

Upvotes: 0

Views: 2429

Answers (1)

OverZealous
OverZealous

Reputation: 39570

You have two related issues:

  1. You need to return the streams within your tasks, or gulp won't know that they've completed. If you don't return a stream, return a promise, or use the callback function, gulp assumes the task is synchronous.

    This is important, because it completely breaks task dependencies. gulp calls a task, sees that it's synchronous, and then immediately starts the next task.

    Simply change your tasks to look like this :

    gulp.task('clean', function() {
    return gulp.src(['./dist/**/*.*'], { read: true })
        .pipe(clean())
});

  2. gulp currently has no way to run non-dependent tasks in a specified order. In your default task, those dependencies are all going to be run simultaneously, unless they depend on each other.

    Since I doubt you want to force the clean task to run everytime you run the other tasks, the other solution is to use a 3rd party library to run tasks in sequence. (This is my library, written to solve this exact issue.) Eventually, hopefully, they will have a way to fix this natively.

    Note: you still need to fix problem 1 for run-sequence to work.

Upvotes: 2

Related Questions