sassgulpbrowser-syncpostcssgulp-4

How stop gulp after doing the task?


I need help, I use gulp4 and have a task build scss:

export const Style = () => src(path.style.src)
    .pipe(sourcemaps.init())
    .pipe(postcss([
        require('postcss-nested'),
        require('autoprefixer')
     ], {syntax: require('postcss-scss')}))
     .pipe(concat('style.min.css'))
     .pipe(sourcemaps.write('../maps'))
     .pipe(dest(path.style.dist))
     .pipe(browserSync.reload({stream: true}));

and watching files this task:

export const WatchFiles = () =>
    watch(path.style.watch, Style);

This works wonderfully when I execute a default task, which is a task for development.

let RunServer = parallel(
    WatchFiles,
    Serve
);

let Build = series(
    Style,
    RunServer
);

Also, just in case, I will add a server task, maybe it will help

export function Serve(done) {
    browserSync.init({
        server: {
            baseDir: path.build,
            index: 'index.html'
        },
        ghostMode: true,
        notify: false,
        host: '0.0.0.0',
        port: 9000
    });

    done();
};

But if I just perform the "Style" task, it will not stop watching my files and will not complete the task. How to make so that when performing task, without task "WatchFiles", to stop builder?

terminal

link gitlab project


Solution

  • I think a callback (done) in your style-function would solve the stopping problem.

    export const Style = (done) => {
      src(path.style.src)
        .pipe(sourcemaps.init())
        .pipe(postcss([
          require('postcss-nested'),
          require('autoprefixer')
        ], { syntax: require('postcss-scss') }))
        .pipe(concat('style.min.css'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(dest(path.style.dist))
        .pipe(browserSync.reload({ stream: true }));
    
        done();
    }