CODEWITHSUNDEEP
javascriptgulpsynchronization
brent_white
brent_white

Reputation: 1019

Gulp file integration with browsersync

I've been trying to figure out how to get my current gulpfile to work with browsersync and I'm lost in the woods.

I set up my gulpfile by following this tutorial which got my going with gulp.

The issue I'm experiencing is when I try to integrate browsersync with my gulp file. I've tried to figure out how to make my current gulpfile work with the SASS + CSS Injecting and reload features which are listed on the documentation for browsersnyc + gulp.js but no luck.

Here is my current gulpfile that I have set up. At this point I'm really unsure how to get browsersnyc to work with the way I have my gulpfile running. Nothing seems to be working. How do I configure this the correct way?

Thank you 

// refferance gulp
var gulp = require('gulp');

// refferance packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();

// build server
gulp.task('serve',['build'], function(event){
    browserSync({
        server: {
            baseDir:'./'
        }
    });
    // watch 
    gulp.watch(".//scss/*.scss", ['sass']);
    gulp.watch(".//*.html").on('change', browserSync.reload);
});


// set up default task we can use this later to run all of our tasks
gulp.task('default', function(){
    // our default task runs `scripts`, `styles` and `watch` when we enter `gulp` in command line.
    //  Only use this task once we have set up all our other tasks
    // gulp.task('default',['scripts','styles','watch']);
});


// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatinate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))

    // once css compiles reload browser??
    .pipe(browserSync.stream());
});

// serve up changes??
gulp.task('default', ['serve']);

gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);

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

Upvotes: 3

Views: 236

Answers (2)

Netzdoktor
Netzdoktor

Reputation: 526

As far as I can see, you only execute the scss task for changes to Sass and do not reload browsersync. Try merging the watch statements into one. You can watch an array of file patterns so just combine scss and html.

Your server will not be started using browsersync. Try using nodemon instead if you want auto-restarts on changes. browsersync will only proxy your existing node process to another port on your system.

Furthermore, you have to install browsersync on your system:

npm install -g browser-sync

Upvotes: 3

InfinitePrime
InfinitePrime

Reputation: 1776

function watchFiles(isDev) {
   if (isDev) {
       gulp.watch([config.sass], ['styles', browserSync.reload]);
       gulp.watch([config.client + '**/*', '!' + config.sass], browserSync.reload)
           .on('change', function(event) { changeEvent(event); });
   }
   else {
       gulp.watch([config.sass, config.js, config.html], ['build', browserSync.reload])
           .on('change', function(event) { changeEvent(event); });
   }
}

Above is an example of how I watch files, and reload browser using browserSync on change.

Upvotes: 1

Related Questions