Search code examples
gulpbrowser-sync

How can I automatically run all gulp tasks?


I come to you for help. I am using the gulp and browser-sync to automate my tasks: compiling sass, restarting the development server on every change, and checking the changes in the browser. I just want to make it faster. The problem is when I run gulp (I also use gulp-nodemon) it just runs nodemon but browser-sync doesn't run and the other tasks don't run either. If I run each task separately, they work, but all together by default with gulp, they don't work. If you want to help me, I will always appreciate it.

This is my code

    const gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    nodemon = require('gulp-nodemon'),
    watch = require('gulp-watch');

gulp.task('scss', () => {

    let stream = gulp
        .src('./src/scss/*/*.scss')
        .pipe(sass({outputStyle: 'expanded',}))
        .pipe(autoprefixer({ versions: 'last 2 browsers', }))
        .pipe(gulp.dest('./src/public/css'))
        .pipe(browserSync.stream());

    return stream;
});

gulp.task('nodemon', cb => {
    let started = false;

    return nodemon({
        script: './src/index.js',
        ext: 'ejs js',
        ignore: ['gulpfile.js'],
    }).on('start', () => {
        if (!started) {
            cb();
            started = true;
        }
    });
});

gulp.task('browser-sync', gulp.series('nodemon'), () => {
    browserSync.init({
        proxy: 'http://localhost:3000',
        open: false,
        files: ['public/**/*.js'],
        browser: 'google chrome',
        port: 3000,
    });
});

gulp.task('default', gulp.series('browser-sync'), () => {
    gulp.watch('./src/views/*/*.ejs').on('change', browserSync.reload());
    gulp.watch('./src/public/*/*.js').on('change', browserSync.reload());
    gulp.watch('./src/public/css/*/*.css').on('change', browserSync.stream());
    gulp.watch('./src/scss/*/*.scss', gulp.series('scss'));
});

Solution

  • This has three arguments:

    gulp.task('browser-sync', gulp.series('nodemon'), () => {

    in gulp v4+ you can only have two arguments, so change that to

    gulp.task('browser-sync', gulp.series('nodemon', () => {

    and same with

    gulp.task('default', gulp.series('browser-sync', () => {

    • there will be a close paren ) to add to the ends of those functions too, like }));