CODEWITHSUNDEEP
node.jsbrowserifybrowser-sync
Shan Robertson
Shan Robertson

Reputation: 2742

manually trigger refresh in BrowserSync node

I've written a watch task for my project using BrowserSync and i've run into a snag I can't seem to figure out. The task isn't anything too crazy, watches the files then reloads the browser and compiles sass or js(browserify) as necessary.

The problem is that when I save a js file (say, app.js) It refreshes the browser, then compiles the js & creates the bundle.js file, which then also triggers a browser refresh. So i'm always getting at least 2 refreshes. Sometimes it even hits a loop of refreshing 10-15 times.

What would be perfect for me is being able to disable the automatic refresh and trigger it myself, so i can keep my logic to compile and then after process is finished I can trigger the browser refresh.

BrowserSync has a method to trigger the refresh, but how can I stop the default refreshing from happening?

Js included below, please also note I DO NOT want to include any more modules like watchify or anything.

// Dependancies
// ---------------------------
var browserSync = require("browser-sync");
var sass = require('node-sass');
var fs = require('fs');
var sys = require('sys');
var exec = require('child_process').exec;
var chalk = require('chalk');



// Used to create & listen for events
var emit = browserSync.emitter;



// Start BrowserSync
browserSync({
  files: [
    'views/**',
    'assets/js/**',
    'assets/sass/**'
  ],
  proxy: "localhost:8080",
  ghostMode: false,
  open: false,
  port: 9090,
  watchOptions: {
    reloadDelay: 1000,
    debounceDelay: 1000
  }
});



// When a file is changed
emit.on("file:changed", function (res) {

  // On file save, the `file:changed` event is fired twice.
  // Only listen for the `core` response.
  if(res.namespace !== 'core') return false;

  // File extention
  var ext = res.path.split('.').pop();

  // Emit the compile events when appropriate
  switch(ext){
    case 'scss':
      emit.emit('compile-sass');
    break;
    case 'js':
      emit.emit('compile-js');
    break;
  }

});



// Compile Sass Event
emit.on("compile-sass", function(){
  sass.render({
    file: 'assets/sass/styles.scss',
    outFile: 'assets/css/styles.css',
    sourceMap: true,
    sourceMapEmbed: true,
    outputStyle: 'compressed',

    success: function(result) {
      console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + " Sass -> Css Compiling Successful");

      // Write the results to the css file
      fs.writeFile("assets/css/styles.css", result.css, function(err) {
        if(!err) return console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + chalk.magenta(' styles.css') + " saved successfully");
        console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + "There was an error writing to styles.css", err);
      });
    }

  });
});



// Compile Js Event
emit.on("compile-js", function(){
  exec("browserify assets/js/app.js -o assets/js/bundle.js --debug", function (err, stdout, stderr) {
    if(err) throw err;
    console.log("[" + chalk.blue('SS') + "] " + chalk.cyan('Watch:') + chalk.magenta(' bundle.js') + ' successfully created');
  });
});

Upvotes: 3

Views: 990

Answers (1)

joemaller
joemaller

Reputation: 20576

There's no reason for BrowserSync to be watching your source files. From your description, the only event BrowserSync should care about is when bundle.js is written, some other tool is watching source files for compilation.

Your JS watches can be reduced to just bundle.js and you can probably drop reloadDelay and debounceDelay too.

Upvotes: 1

Related Questions