Creating a static web server
Now that your tasks to compile your HTML, CSS, and JavaScript code are ready, it's time to show and inspect the result in your browser. Browsersync is a module that keeps your browser in sync when developing your code. Browsersync works by injecting an asynchronous script tag right after the <body>
tag during initial request.
To use Browsersync with Gulp no special plugin is required; you can simply require()
the module.
First install Browsersync by running the following command:
npm install browser-sync gulp --save-dev
Then create a task in your Gulpfile.js
file which may look like the following:
var browser = require('browser-sync'); var port = process.env.SERVER_PORT || 8080; // Starts a BrowerSync instance gulp.task('server', ['build'], function(){ browser.init({server: './_site', port: port});});
The server task depends on the build task (second argument ['build']
in the preceding code) which means that the build task should run before the server task...