gulp-automation

Automating the most painful parts of your code management!

LiveReload

LiveReload monitors changes in your files and instantly updates all changes in your browser. It is very useful when you are updating your site and don't want to keep manually reloading the page in your browser again and again after every edit.

Surprisingly there seems to be lack of simple clean working solutions that are easy to install, maintain and customize.

Many of them are based on installing a Chrome browser extension. However, in addition to being limited to the Chrome browser, extensions are potentially vulnerable. Extensions can also be guilty to slow down your browser, by adding unnecessary and slow running scripts blocking your useful content. As extension runs on every page in your browser, it doesn't seem to be a good fit for the purpose of LiveReload.

Other solutions are based on manually adding a script tag inside your HTML file. This adds to the maintenance headache to remember removing it from your production code, among others.

Both extension and extra tags are completely unnecessary!

Dead simple way to enjoy LiveReload!

• Download and Install Node.js, see How do I get started with Node.js for more information.

• Download this Repository, unzip it and change to the created subdirectory gulp-automation-master.

• That's it! Now start your Local Server, LiveReload and your Browser pointing to the right location with one single command in your terminal:

npm start

Is LiveReload all it can do?

No! When building your site, you need many other tools like Error checking (linting), Minification and Concatenation for shorter load times and better performance.

This is where the Gulp.js automating system shines at its best. It has great rapidly growing community proving open source plugins for all possible tasks you can imagine. Just google "gulp" with whatever task you want ;)

Use provided Gulpfile.js to edit and add more tasks or write a new one!

How is LiveReload working?

The watcher part (gulp task "watch") listens for file changes and sends notification to the LiveReload server (running by default at port 35729). The main connect server at port 8080 (gulp task "connect") injects the following script into your HTML:

<script src="//localhost:35729/livereload.js?snipver=1"></script>

That way your browser listens to the LiveReload server and reacts to change notifications. See here for more technical details on how the LiveReload protocol works.

Now enjoy and read more tips in that file that loads in your browser!

Are you still here? No, we won't tell what else you see there until you do it ;-)

FAQ

• What is the point of this solution?

  • To set you up and running with working LiveReload in minimal possible time, with minimum steps.
  • To provide the simple commented configuration file Gulpfile.js, where you can see all "magic" happen and how you can adapt it to your needs. For easy learning and playing :-)
  • To show the power of Gulp.js and Node.js.

• What about other LiveReload solutions that work great?

This is not only about LiveReload! Have a look at the simple Gulpfile.js and extend it to work hard for many other tasks to save your time in the future.

• Why are the Node.js packages are included?

For the same reason that batteries are included when you buy a camera :=) It is more convenient for folks less used to Node.js to get them up and running quicker. The packages included are tested. Installing all packages locally instead with npm install should work too.

Still having problems or suggestions?

Send your Feedback!