One perpetual objective in website development — especially if you’re a website developer at a marketing agency managing a large number of clients — is how can you develop websites faster? As in, how can you do more work in less time, so you can be more productive and service more clients. One trick-of-the-trade while you’re in the code-development-phase is minimizing how frequently you take your hands off the keyboard.
This article is all about keeping your hands on the keyboard more often — specifically, how to develop websites faster using Gulp’s Watch API, the Livereload module, and Google Chrome.
If you’re new to Gulp check out the Getting Started guide on the Gulp website.
Benefits of Using Gulp Livereload with Gulp’s Watch API
Ultimately, you’ll be coding websites faster — being more productive by accomplishing more work with less effort and in less time. It’s a way to work smarter instead of harder. Call it a work-efficiency-hack.
The biggest benefit of using Gulp Livereload with Google Chrome and Gulp’s Watch API — in my humble opinion — is keeping your hands on the keyboard. Moving your hand back and forth from the keyboard to the mouse may seem like a small thing, but when you’re doing it hundreds or thousands of times a day it can actually eat up a lot of your time — time that is better spent being productive and writing code.
Using Gulp Watch, you can instantly minimize the amount of times you’re switching screen-focus between your code editor and command line interface. Reduce the need to Alt+Tab between the IDE — where your code is — and the CLI — where you tell Gulp tasks to run. Instead of repeatedly typing a Gulp task in your command-line-interface (CLI) each time you need to update after a file-change you can run one task one time — Gulp watch — and it will run until you’re finished.
Using Gulp Livereload never have to use the mouse to find the internet browser and click the refresh button. Instead of repeatedly moving your hand from the keyboard to the mouse, clicking on the browser, click refresh, waiting a second, and going back to the keyboard you simply save the file you’re working on and the browser refreshed automatically.
If you’re working with multiple monitors you don’t even need to Alt+Tab to see your changes — it just happens. There’s no more delay between saving a file and seeing if your update worked.
Gulp Watch, Livereload, and Google Chrome Setup Instructions
From a 40,000 foot view, using Gulp watch with Livereload and Google Chrome is as easy as 1, 2, 3.
- Step 1 — Gulp Watch Task
- Step 2 — Add Gulp Livereload
- Step 3 — Link Google Chrome
And now, on to the details of establishing your own workflow using Gulp, Gulp’s Watch API, Gulp Livereload, and Google Chrome.
Gulp Watch API Overview
Gulp’s Watch API is a development tool that literally watches for changes in files. Watch comes installed with Gulp and operates inside your website project along with your other Gulp task-runners. You tell Watch which files — or types of files — to watch for changes in and where those files are located. And finally, you export (i.e. create) a Gulp task that runs your Watch setup.
Gulp Watch Task Example
const { watch } = require('gulp');
function watcher(cb) {
// Specify the files to watch
// and the task to run when a
// change is detected.
watch(['sass/**/*.scss'], updateStyles);
cb();
}
exports.watcher = watcher;
In the example above, a basic Gulp Watch task named <i>watcher</i> is outlined. Watcher watches all <i>.scss</i> files inside a directory named <i>/sass/</i>. When a file change is detected by Gulp’s Watch API the updateStyles task is executed. updateStyles is the name of a custom task you’ve created. As you’ll see in the subsequent setup steps, it’s the one you want to run automatically when the Watch API detects a file change. updateStyles could be any task you have defined within the GulpFile.
Gulp Livereload Overview
Gulp Livereload is a development module that literally reloads the web browser — live and in realtime as you make updates to your code. Using Gulp Livereload you no longer need to move your hand from the keyboard to the mouse, click to reload the web page you’re developing in order to view the updates you’ve made to the code, and move it back again to continue making updates. It’s a simple efficiency improvement, but as a web developer making hundreds or thousands of changes a day it’ll shave hundreds or thousands of seconds off your dev-time and speed up your entire workflow.
Adding Gulp Livereload to Gulp Tasks Example
const livereload = require('gulp-livereload');
function updateStyles(cb) {
src('./src/style.scss')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(dest('./src'))
// Add this line to a task for livereload
.pipe(livereload());
cb();
}
This example demonstrates how to include Livereload as a const in your GulpFile.js as well as how to add it to the task-runner that should trigger the live reload of your browser. This is phase 1 — triggering a livereload any time the styles function is run. It’s important to note that you could add livereload to any Gulp task that you’d like to trigger a browser reload for. For demonstration purposes it’s shown here using a simple Sass compiler task — the Sass parts are not required to use livereload.
The next step — phase 2 — is tying this executable task into a Gulp Watch task because the whole point of creating an automated workflow is so you don’t have to run the task every time you make an update.
Linking Google Chrome to Gulp Livereload
Linking Gulp Livereload to Google Chrome may be the easiest step in the process because there’s a Google Chrome Extension that takes care of everything for you. All that’s left for you to do is add the extension to chrome, enable it, visit your website, and press the button to turn it on. Easy, right?
Livereload Chrome Extension Installation
- Download the Livereload Google Chrome Extension
- Add it to Google Chrome
- Enable the Extension via Chrome’s Extension Manager
- Navigate to your website
- Click the Extension’s icon to enable it
Adding Livereload to Your Gulp Watch Task
Now that you have all the pieces to the puzzle it’s time to add Livereload to your Gulp Watch task and tie everything together.
Here’s the last line of code to complete the process: livereload.listen(). Place it inside of your Watch task, like so:
function watcher(cb) {
// Add livereload to the watch task
livereload.listen(),
watch(['sass/**/*.scss'], updateStyles);
cb();
}
Gulp Livereload with Watch Example
Here’s a complete example of using Gulp’s Watch API and Livereload module to watch a set of defined files for changes or updates and automatically run a task followed by a hand-free browser reload.
GulpFile.js
// Code for your GulpFile.js
const { watch } = require('gulp');
const livereload = require('gulp-livereload');
function updateStyles(cb) {
src('./src/style.scss')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(dest('./src'))
.pipe(livereload());
cb();
}
function watcher(cb) {
livereload.listen(),
watch(['sass/**/*.scss'], updateStyles);
cb();
}
exports.watcher = watcher;
To start the watch-task, simply run gulp watcher from the CLI — where “watcher” could be interchanged with your own task’s name if it is different. The Watch-task will run until you stop it.
Happy trails, fellow website developers — keep coding good stuff.
0 Comments