Using Gulp as a livereload webserver

As I was developing a website from scratch I came to repeat a pattern:

  • Change something;
  • Save;
  • Recompile less;
  • Alt-tab to Chrome;
  • Refresh page.

And it took a lot of time to recompile and reload manually everytime. And then I came across Gulp.


Gulp is “the streaming build system”. In other words: a task runner. With a lot of plugins mantained by the community and easily usable in basically any project, especially using Node.js.

First of all, to install and run all the awesomeness, we need to have Node.js and npm installed on our system. There is a nice tutorial here. After this, we need to run:

npm init

Answer the questions and this will create a nice package.json file for us to save our npm dependencies. Then, we can run:

npm install gulp (add the verbose flag for some matrix feelings).

This installs gulp locally and gives us access to its basic features. But we’ll need more power, so we will install some more packages to extend gulp’s functionality.

npm install gulp-less gulp-watch gulp-connect gulp-open

Here’s what each package does:

gulp-less: Compiles .less files into .css;
gulp-watch: Watches for changes in files and execute another gulp task;
gulp-connect: Runs a simple webserver with livereload;
gulp-open: Opens files and URLs on the browser.

Now we need to use all these tools we installed. And we’ll do so creating a file at the root of our project called gulpfile.js.

In it we will require all gulp packages we installed and the node.js path library:

var gulp = require(‘gulp’), less = require(‘gulp-less’), watch = require(‘gulp-watch’), connect = require(‘gulp-connect’), open = require(‘gulp-open’), path = require(‘path’);

With this done, we can code our tasks. Let’s start we the less compilation, since this was the source of my problem:

gulp.task(‘less’, function () {
 return gulp.src(‘./less/main.less’)
 .pipe(less({
 paths: [path.join(__dirname, ‘includes’)]
 }))
 .pipe(gulp.dest(‘./css’));
});

This will convert all .less files included on main.less into a single .css file and output it to the css folder. Pretty much all I needed. Now to the interesting things. Let’s add a watch task to it, so when we edit our .less files we get a fresh, new .css.

gulp.task(‘watch’, function () {
 gulp.watch(‘./less/**/*.less’, [‘less’]); 
});

This says (in gulp pipe language) we want to watch all .less files on our less folder, and when any of them changem we want to run the task less (that we written just before.

This by itself is already a pretty handy script by itself. But wait! There’s more! Now we’ll create a webserver with livereload so we don’t need to update our browser page every time we change something.

gulp.task(‘webserver’, function () {
 connect.server({
 livereload: true,
 root: [‘.’, ‘.tmp’]
 });
});

Using the connect module, we ask gulp (nicely) to create a webserver using livereload with its root using the folders . and .tmp. And by package definition it will listen on port 8080.

The last task we’ll write will be a simple one: open localhost:8080 when we run the gulp script:

gulp.task(‘open’, function() {
 gulp.src(‘./index.html’)
 .pipe(open({
 uri: ‘http://localhost:8080'
 }));
});

This basically says to gulp-open: “Take page ./index.html and open it on http://localhost:8080”. And now that we’ve written all tasks, we just need to add a line to the less task we created, so that it reload the page as we intend.


.pipe(gulp.dest(‘./css’))
.pipe(connect.reload());

To wrap things up, we define the default task for gulp with this line:

gulp.task(‘default’, [‘webserver’, ‘watch’, ‘open’]);

This way, it will run all of them in parallel when we start it using:

gulp

on a terminal by the root of our project (where the gulpfile.js is).

If all went well, you should now have a terminal open running tasks and a browser window showing your website. And that’s it! Now all changes we make to our less it will update the browser window.

The complete gulpfile.js is available here:

[JavaScript] gulpfile.js - Pastebin.com
Pastebin PRO Accounts SUMMER SPECIAL! For a limited time only get 40% discount on a LIFETIME PRO account! Offer Ends…pastebin.com

This was my first medium post and the first gulp tutorial I wrote. Please let me know what you think about it in the comments below! ^^

Also if someone can teach me how to use code blocks on medium I would be very grateful. (Ctrl-Alt-6 just outputs ‘¬’ for me).