Live reload / refresh for HTML / CSS in 2017
So, it's 2017, and while coding websites we still need to edit, save, switch windows, and then hit Refresh. Make small changes and do it over and over. And again. And again, etc. Etc.
Am I missing something because of course there is a solution for this now that the browser can automatically refresh as we type, or at least instantly when we hit save?
jsbin.com is a great working example of what I'm looking for in my local Apache installation (Windows 10). I've tried various methods including LiveReload and LiveJS , but they are too long and often lag around 2-4 seconds, which is just not fast enough when building sites. They also require a browser extension or snippet of code inserted into each page that needs monitoring. It all seems very "hacked" and very 1990s.
I am wondering how other developers are dealing with this problem? Is there now a NodeJS solution that I haven't come across, or is everyone else just doing the edit, save, switch, update method? Really not? For reference, I use Atom to edit my html / css / js files, etc., and then save and preview the changes in Chrome. Any thoughts or ideas would be greatly appreciated. Really appreciated very much.
source to share
I dumped gulp and now just use npm scripts https://www.npmjs.com/
Right in the file, package.json
you can use SCSS, autoprefix it, guess and minify it and your scripts, and also control which folders it will output, for example to the production folder.
Here is an example setting in package.json
{
"name": "Sample build",
"version": "1.0.0",
"description": "New build",
"author": "Author",
"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 the corresponding setting of the file structure:
Project
|__ development
| |____ js
| |____ scss
|
|__ production
| |___ js
| |___ css
| |___ images
|
|_ index.html
|_ package.json
All the developer has to do is run npm install
and thennpm start
source to share
live-server and json-server .
Live Server allows you to instantly bring your application under a web server (nodejs) and load all sources to your browser (via webSocket).
Just type $> live-server
in your project folder and it will work!
You can use this in conjunction with a json server which gives you a very simple way to create a CRUD REST API using json keys and values from a JSON file.
Provide a .json file using json-formatted DB schemas, just type in $> json-server --watch mydb.json
and it works great too!
2 minutes of your time gives you a web server with reprogramming capabilities and a customizable decentralized API.
Hope it helps you!
source to share
Using a task-runner is absolutely fundamental for every self-respecting developer.
In my opinion, it is best to configure Gulp paired with Browser-Sync for your project. It can be configured to listen for changes in every file type you use, minimizing the difficulty of guessing what has changed and what has not.
You can find a neat tutorial on how to do this here in CSS Tricks.
source to share