CODEWITHSUNDEEP
gulpbrowser-syncgulp-4
Pooria m
Pooria m

Reputation: 11

how to add browser-sync in gulp-4

//Importing gulp files to variables

    const { src , dest , watch , series , parallel } = require('gulp');
    const autoprefixer = require('autoprefixer');
    const cssnano = require('cssnano');
    const concat = require('gulp-concat');
    const postcss = require('gulp-postcss');
    const replace = require('gulp-replace');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const uglify = require('gulp-uglify');
    const browserSync = require ('browser-sync').create();

// File path variables in my projects folder

    const files = {
    scsspath:'assets/scss/**/*.scss' , 
    jspath:'assets/js/**/*.js'}

//Sass Task

    function scssTask(){
    return src(files.scsspath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('assets/css'))
    .pipe(browsersync.stream());}

//JsTask

    function jsTask(){
    return src(files.jspath)
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(dest('assets/js')).pipe(browsersync.stream());}

//WatchTask

   function watchTask(){
   watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}

//DefaultTask //I don't know how to use browser-sync in gulp-4

   exports.default = series(parallel(scssTask,jsTask) , cashBustTask , 
   watchTask,browsersync);

Upvotes: 1

Views: 1440

Answers (3)

DaJudge
DaJudge

Reputation: 63

I found this guide to upgrade gulp 4, that explains that gulp.series or gulp.parallel needs to be used. Example:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browserSyncReload', gulp.series( function(done) {    
  browserSync.reload();
  done();
}));

gulp.task('default', gulp.series( function(done) {    
  browserSync.init({
      notify: false,
      proxy: "127.0.0.1:5003/nl"
  });
  gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
  gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
  done();
}));

Upvotes: 0

RainMaker
RainMaker

Reputation: 41

Quick solution:

Add a function to trigger BrowserSync:

function reload(){
    browserSync.reload();
}

Modify your watchTask() function to:

function watchTask(){
    browserSync.init({
        server: { baseDir: "./dist" }
    });
    gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}

Modify your exports to:

exports.default = watchTask;

Upvotes: 0

Dan Buda
Dan Buda

Reputation: 348

Create a separate task for browser-sync. Here's an example of how I've set this up:

const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');

function browserSync() {
  // Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
  serveSass();

  bs.init({
    // Dev server will run at localhost:8080
    port: 8080,
    server: {
      // I'm using 'src' as my base directory
      baseDir: 'src',
    },
  });

  // These watch for changes to files and reload in the browser
  watch('src/*.html').on('change', bs.reload);
  watch('src/scss/*.scss', serveSass);
  watch('src/js/*.js').on('change', bs.reload);
}

// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
  // My dev Sass files are found in 'src/scss/'
  return src('src/scss/*.scss')
    .pipe(sass())
    // My dev CSS files are found in 'src/css/'
    .pipe(dest('src/css))
    .pipe(bs.stream());
}

// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;

My full Gulp setup is here if you want more context.

Upvotes: 0

Related Questions