[Gulp] browser sync

  gulp    Browser sync  

▌Introduction

---

We will use gulp and browser-sync to make the browsers refresh after modify specify files, like javascript or CSS.

▌Environment

---

▋gulp.js 3.9.1

▋browser-sync 2.24.4

▌Implement

---

▋Install packages

gulp & browser-sync

$ npm install gulp --save-dev

$ npm install browser-sync --save-dev

▋gulpfile.js

// BrowserSync serve

gulp.task('serve', function () {

    browserSync.init({

        host: 'http://localhost:7777',

        browser: ["google chrome", "firefox", "iexplore"],

        open: "local",

        //port: 3000,

        files: ["wwwroot/css/**/*.css", "wwwroot/js/**/*.js"]

    });

});

gulp.task("default", ["serve"]);

▋Embed the browser-sync initial js on master page

Copy and paste the following js in the master page.

<script id="__bs_script__">

          //<![CDATA[

          document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.4'><\/script>".replace("HOST", location.hostname));

          //]]>

      </script>

▌Reference

---

▋browser-sync (github)