Jump to content

Testing Blisk browser, only 1 feature interests me, live reloading

OrganizedFellow

By OrganizedFellow,
in Dev Talk

 Share

Recommended Posts

OrganizedFellow Hero Member

OrganizedFellow

Posted
Posted

I've not coded a website in a few years and recently am taking on the task of rebuilding my church website. It's currently on Concrete CMS and of course, I will be redesigning & rebuilding entirely on ? ? ?

in the past I had used Gulp to assist in my workflow: minify js, parse SCSS to CSS, and most importantly was the Live Reloading. However the reloading was always buggy and I spent more time trying to fix it than making actual progress ?

So today I was searching for alternatives and I came across blisk.io. Currently working on this little project and knowing the live reloading is handled without any scripting on my part is a dream come true.

  • Like 1
Link to comment
Share on other sites
dragan Hero Member

dragan

Posted
Posted
Quote

The free plan is limited to 30 minutes daily. When the free session ends, Blisk disables devices, auto-refresh, screenshots and screen recorder, scroll-sync, error notifier, page inspector, device DevTools.

Well, I'm not impressed.

@OrganizedFellow Why was the reloading "always buggy"? Maybe you set it up wrong? I never encountered problems with Browsersync (with linting tools however, or when pulling from Git again, it's a different story - I have to restart Gulp several times a day - but never because of browser live reloading).

Link to comment
Share on other sites
OrganizedFellow Hero Member

OrganizedFellow

Posted
  • Author
Posted
8 minutes ago, dragan said:

Well, I'm not impressed.

@OrganizedFellow Why was the reloading "always buggy"? Maybe you set it up wrong? I never encountered problems with Browsersync (with linting tools however, or when pulling from Git again, it's a different story - I have to restart Gulp several times a day - but never because of browser live reloading).

WOW ? that's pretty crappy. I didn't know there was a limitation, as I did no RTFM, lol.

 

I have always had a tough time getting Node + NPM to install, whether on Debian or Windows. I always end up cluttering my system with crap that doesn't work, so I don't really wanna go the Gulp route ?

Link to comment
Share on other sites
Sergio Hero Member

Sergio

Posted
Posted
9 hours ago, OrganizedFellow said:

 

In the past I had used Gulp to assist in my workflow: minify js, parse SCSS to CSS, and most importantly was the Live Reloading. However the reloading was always buggy and I spent more time trying to fix it than making actual progress ?

You don't need to mess around gulp etc anymore if you don't wanna. Give https://prepros.io/ a try. After I switched from Mac to Windows, I missed Codekit and Prepros is a good alternative. :) Also runs on Linux (as it's an Electron app).

  • Like 4
Link to comment
Share on other sites
louisstephens Hero Member

louisstephens

Posted
Posted

I just looked into Prepros and it looks awesome! I must say, I have been using gulp now for awhile and have never had an issue with browser-sync. However, I do find documentation/examples at time to be a bit overwhelming (especially when adding new plugins into your workflow).  I guess I got into it at the end of version 3, and the syntax changed in version 4 which really gave me a headache. 

Link to comment
Share on other sites
Christophe Hero Member

Christophe

Posted
Posted

[ After a quick search for Koala (that I already knew but haven't used for the moment) with things that you are looking for. ]

Listed in the video description:
https://code.visualstudio.com
http://koala-app.com
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

The video is not in English, but apparently it is understandable.
You can surely find other videos on the subject.

 

Link to comment
Share on other sites
LostKobrakai Hero Member

LostKobrakai

Posted
Posted
23 hours ago, dragan said:

You could also give Brunch a try.

Please don‘t. Brunch is no longer maintained since over a year iirc and even before it didn‘t really hit a place where is was working well for more than basic setups.

Link to comment
Share on other sites
wbmnfktr Hero Member

wbmnfktr

Posted
Posted
13 hours ago, Christophe said:

https://code.visualstudio.com
http://koala-app.com
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

The VS Code live server and live sass is a good choice for smaller projects. Just keep the amount of .scss includes to a minimum.

In regards to Koala... latest version is from 2017. At least the website is telling so.

  • Like 2
Link to comment
Share on other sites
Christophe Hero Member

Christophe

Posted
Posted

https://github.com/oklai/koala
"The project has been stopped!!

The development method has changed a lot be from the project start time to now, and there are many better alternatives in the open source community. So I think the projet is outdated, and decided to stop maintenance.
Sorry about for this.
If someone is still willing to continue maintenance, welcome to create a new project, it will be the best way."

Too bad!

  • Like 1
Link to comment
Share on other sites
  • 2 months later...
Mikie Sr. Member

Mikie

Posted
Posted
On 9/13/2019 at 9:59 AM, OrganizedFellow said:

Firefox extension + installed the VSCode extension = SUCCESS!!

Cool. Sounds like you are sorted. On the node / npm front, I think the easiest way to wrap your head around using node for build systems is to skip the bundlers and task runners and just use npm scripts. The benefits of this are you are using the cli's of each library you install directly, and not interacting with wrappers and plugins build upon these. This makes things easier to debug / easier to reason about. Here are some blog posts on this topic:

https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
https://deliciousbrains.com/npm-build-script/
https://scotch.io/tutorials/using-npm-as-a-build-tool

For browsersync in particular, the below cli commands are all you will ever need to know: 

# static site
browser-sync start --server 'public' --files 'public' --browser 'Google Chrome' --no-notify

# php site with local domain using eg dnsmasq
browser-sync start --proxy 'localdomain.test' --watch --files public/site/templates --browser 'Google Chrome' --no-notify

After years of npm scripts I now use https://github.com/sezna/nps and https://github.com/kentcdodds/nps-utils for cross platform builds.

Here's an example package-scripts.js: 

/* global require */
/* global module */
const { series, concurrent } = require("nps-utils");
module.exports = {
	scripts: {
		css: {
			dev: "gulp cssDev",
			build: "gulp cssBuild"
		},
		js: {
			dev: "rollup -c rollup.config.dev.js"
			build: "rollup -c rollup.config.prod.js"
		},
		server: {
			start:
				"browser-sync start " +
				"--no-inject-changes " +
				"--proxy 'localdomain.test' " +
				"--watch --files public/site/templates public/static " +
				"--browser 'Google Chrome' " +
				"--no-notify "
		},
		watch: {
			css: "chokidar 'src/stylus/**/*' -c 'nps css.dev'",
			js: "chokidar 'src/js/**/*' -c 'nps js.dev'"
		},
		dev: {
			pre: series.nps("css.dev", "js.dev"),
			main: concurrent.nps( "watch.css", "watch.js", "server.start"),
			default: series.nps("dev.pre", "dev.main")
		},
		build: series.nps("css.build", "js.build")
	}
};

 Then in package json you just have: 

 {
	...
	"scripts": {
      "dev": "nps dev",
      "build": "nps build"
  	},
    ...
}

Cd to your projects and: 

# run dev w/ livereload
npm run dev

# run your build (minification etc)
npm run build

# test individual nps commands
npx nps server.start

I'm using gulp for css since I use stylus and gulp is the easiest way to run stylus through a bunch of postcss transforms.

Rollup is by far the easiest way to bundle js in my opinion. Here's my rollup build file pretty much for every project. The dev version doesn't include terser and sets source maps to true. 

/*jshint esversion: 6 */
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import buble from "rollup-plugin-buble";
import { terser } from "rollup-plugin-terser";

export default {
	input: "src/js/main.js",
	plugins: [
		resolve({ mainFields: ["module", "main"] }),
		commonjs({
			include: ["node_modules/**"],
			sourceMap: false
		}),
		buble(),
		terser({
			compress: {
				drop_console: true
			}
		})
	],
	output: {
		file: "public/site/templates/assets/main.js",
		format: "iife",
		sourcemap: false
	}
};

 

  • Like 1
Link to comment
Share on other sites
Mikie Sr. Member

Mikie

Posted
Posted

Will also say that when troubleshoot npm issues (just then I had problems with BrowserSync not refreshing css changes!) I find it is usually to do with outdated modules. The following usually fixes for me:

- run https://www.npmjs.com/package/npm-check-updates and update your dependencies to latest
- wipe contents of node_modules_folder
- delete package-lock.json
- run npm install

Link to comment
Share on other sites
gebeer Hero Member

gebeer

Posted
Posted

I used gulp a lot over the last years. Until I recently stumbled upon @rafaoski's Milligram site profile which utilizes  laravel-mix which is a wrapper around webpack that  makes setting up your build workflow a no-brainer.
Since I am using laradock as my dev environment for the last 2 years, I know that the folks at laravel have some amazing, reliable tools.

All this on a linux box.

But since it is all node/npm based, it shouldn't be a problem on windows.

Especially if using node version manager (nvm) to handle installation and version switching. There is also a node version manager for windows.

Link to comment
Share on other sites
  • 3 months later...
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...