browsersync

Browsersync is an aid for developing responsive webpages. As its name implies it can monitor sources and also sync the browser automatically.

installation

npm install --save-dev browser-sync

the application

The main application is an express application. It uses handlebars as a templating tool, and that's where the .hbs files come from.

Running the app with express

Note that you will need to run the app separately from browsersync.

npm run dev

This makes the app available on port 3000, then start browsersync using gulp.

gulp

You now have an interface on port 3001 : http://localhost:3001 with various options.

The gulpfile accomplishing this is shown below

var gulp = require("gulp");
var nodemon = require("gulp-nodemon");
var concat = require("gulp-concat");
var postcss = require("gulp-postcss");
var cssnano = require("cssnano");
var notify = require("gulp-notify");
var postcssMixins = require("postcss-mixins");
var simplevars = require("postcss-simple-vars")();
var autoprefixer = require("autoprefixer");
var browserSync = require("browser-sync");
var postcsseasyimport = require("postcss-import");
var postcssColorFunction = require("postcss-color-function");
var assets = require("postcss-assets");
var nested = require("postcss-nested");

const server = browserSync.create();

gulp.task("css", function (done) {
    var processors = [
        postcsseasyimport(),
        postcssMixins,
        simplevars,
        nested,
        assets({
            relative: true,
        }),
        postcssColorFunction(),
        autoprefixer(),
        cssnano(),
    ];


    gulp.src("./styles.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./public"))
        .pipe(notify("Boom! Up in yo CSS face!!"));
    done();
});

function serve(done) {
    server.init(null, {
        proxy: "localhost:3000",
        open: false,
        files: ["public/**/*.*"],
        port: 7000,
    });
    done();
}

gulp.task("js", function (done) {
    gulp.src("src/*.js", { sourcemaps: true })
        .pipe(concat("interface.js"))
        .pipe(gulp.dest("./public"))
        .pipe(notify("Boom! Up in yo JS face!!"));
    done();
});

function nodeDev(done) {
    var stream = nodemon({
        script: "app.js",
        ignore: ["gulpfile.js", "node_modules/**", "public/**"],
        tasks: ["css", "js"],
        ext: "js css html",
        env: { NODE_ENV: "development" },
        done: done,
    });
    stream
        .on("restart", function () {
            console.log("restarted!");
            server.reload();
        })
        .on("crash", function () {
            console.error("Application has crashed!\n");
                                                              64,1                     stream.emit("restart", 10); // restart the server in 10 seconds
        });
}

const dev = gulp.series(serve, nodeDev);
exports.default = dev;

• First the server on port 3001 is created.
• There is a css task that we do not (yet) use.
• the serve function starts up the server and proxies :3000 to :7000
• The js task is combining the src directory into public/interface.js

https://www.google.com