by 
One way for a freelance web developer to increase earnings is to improve upon his/her workflow. An effective workflow enables you to accomplish a given task in less time, which effectively increases your profit per hour. That is why lately I have begun to include automation using Gulp in my workflow, specifically for compiling Sass to CSS.
Getting started with Gulp isn’t as scary as you might think, especially thanks to the wealth of tutorials out there to help get you up and running. Among the many helpful tutorials is one posted on a favorite site of mine, CSS Tricks. The guest article titled Gulp for Beginners outlines the simple process to get going. Basically, the article walks you through how to:
- Install Gulp
- Create a Gulp project
- Write a Gulp task (to compile Sass, in this case)
But compiling Sass to CSS is just one of the countless tasks that Gulp can accomplish to help automate your workflow.
Automate browser reloading with BrowserSync
I do a lot of PSD to WordPress conversions, which means I am routinely refreshing my browser to ensure the change that I have made gives the desired result. Fortunately, the BrowserSync module for Gulp does it for you automagically. Unfortunately, it took me some time to set up because I could not find a resource that explained how to properly configure BrowserSync’s options for a local site running on DesktopServer. With some help from Craig Simpson I finally got it worked out. Here is the most recent version of my Gulpfile.js:
| // Require our dependencies | |
| var gulp = require('gulp'); | |
| var sass = require('gulp-sass'); | |
| var browserSync = require('browser-sync').create(); | |
| gulp.task('styles', function(){ | |
| return gulp.src('sass/style.scss') | |
| .pipe(sass({ | |
| outputStyle: 'expanded', // Options: nested, expanded, compact, compressed | |
| indentType: 'tab', | |
| indentWidth: 1 | |
| })) // Converts Sass to CSS with gulp-sass | |
| .pipe(gulp.dest('./')) | |
| .pipe(browserSync.reload({stream: true})); | |
| }); | |
| // Gulp watch syntax | |
| gulp.task('serve', function(){ | |
| // Kick off BrowserSync. | |
| browserSync.init({ | |
| proxy: "www.example.dev" | |
| }); | |
| gulp.watch('sass/**/*.scss', ['styles']); | |
| }); | |
| // Default Gulp task | |
| gulp.task('default',['styles', 'serve']); |
The key to making this work is on lines 21-23:
browserSync.init({
proxy: "www.example.dev"
});
You need to replace the URL with that of your DesktopServer development site. Then when you run Gulp your browser will open to localhost:3000, but you will actually see your development site (e.g., www.example.dev). As an added bonus, BrowserSync also syncs the refreshed page on every device on the network that is pointing to the IP address for your website. For example, I can navigate on my phone (which is connected via WiFi to the same network as my development site) to http://192.188.1.96:3000 and see my CSS changes take effect immediately upon save.
Pretty cool!
Leave a Reply