How to run gulp tasks on execute

Question

I currently only have gulp working, but need to make a change to a file before any update is done. Is there a way to run the build tasks then watch for changes?

This is my gulp file:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');


gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('css/'));
});

gulp.task('scripts', function() {
    browserify('js/main.js')
        .transform(babelify,{presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('.'))
        .pipe(buffer())
});

gulp.task('default', function() {
    gulp.watch('sass/**/*.scss',['styles']);
    gulp.watch('js/*.js',['scripts']);
});

peteb · Accepted Answer · 2016-11-29 23:25:27Z

1

Add them as dependent tasks that are run prior to your task.

gulp.task('default', ['styles', 'scripts'], function() {
    gulp.watch('sass/**/*.scss',['styles']);
    gulp.watch('js/*.js',['scripts']);
});

The tasks 'styles' and then 'scripts' will be run, then the callback function for 'default' will be fired calling the two gulp.watch() statements.

answered Nov 29, 2016 at 23:25

peteb

19.5k9 gold badges58 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dileet Over a year ago

Thanks! Worked perfectly. Was wondering if you knew how to deal with javascript cache as well? Whenever I make a change to the js file everything builds perfectly, but I have to refresh a few times (or clear cache) before I see any changes.

Collectives™ on Stack Overflow

How to run gulp tasks on execute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related