Live reload/refresh solution for HTML/CSS in 2017

Question

So it's 2017 and whilst coding websites we still have to edit, save, switch windows, then hit refresh. Make a small change and do it all over again. And again. And again etc etc.

Am I missing something because surely there is a solution for this now whereby the browser can update automatically as we type, or at least instantly as we hit save?

jsbin.com is a perfect working example of what I'm looking for on my local Apache (Windows 10) setup. I've tried various methods including LiveReload and LiveJS but they are too long-winded and often there's a lag of around 2-4 seconds which is just not quick enough when building websites. They also require a browser extension or a snippet of code inserted into every page that requires monitoring. It all just seems very "hacky" and very 1990's.

I'm curious as to how other developers handle this problem? Is there now a NodeJS solution that I've not come across or is everyone else just doing the edit, save, switch, refresh method? Surely not? For reference I use Atom to edit my html/css/js files etc, then save and view the changes in Chrome. Any thoughts or ideas would be greatly appreciated. Hugely appreciated actually.

Answer 1

I dropped gulp and now just use npm scripts https://www.npmjs.com/

Right in the package.json file you can use SCSS, autoprefix it, uglify and minify it and your scripts, and control which folders it will output to, for example a production folder.

Here is a sample setup in package.json

{
    "name": "Sample build",
    "version": "1.0.0",
    "description": "New build",
    "author": "Stefan Bobrowski",
    "license": "MIT",
    "main": "index.html",
    "scripts": {
        "autoprefixer": "postcss -u autoprefixer -r production/css/*.css",
        "scss": "node-sass --output-style expanded --indent-width 4 -o production/css development/scss",
        "uglify": "uglifyjs development/js/*.js -m -o production/js/scripts.js",
        "serve": "browser-sync start --server --files \"production/css/*.css, production/js/*.js\"",
        "build:css": "npm run scss && npm run autoprefixer",
        "build:js": "npm run uglify",
        "build:all": "npm run build:css && npm run build:js",
        "watch:css": "onchange \"development/scss\" -- npm run build:css",
        "watch:js": "onchange \"development/js\" -- npm run build:js",
        "watch:all": "npm-run-all -p serve watch:css watch:js",
        "start": "npm run build:all && npm run watch:all"
    },
    "devDependencies": {
        "node-sass": "^4.5.0",
        "postcss-cli": "^3.0.0-beta",
        "autoprefixer": "^6.7.6",
        "browser-sync": "^2.18.8",
        "npm-run-all": "^4.0.2",
        "onchange": "^3.2.1",
        "uglify-js": "^2.8.3"
    }
}

And corresponding file structure setup:

Project
|__ development
|       |____ js
|       |____ scss
|
|__ production
|        |___ js
|        |___ css
|        |___ images
|
|_ index.html
|_ package.json

All the developer has to do is run npm install and then npm start