Skip to content

Instantly share code, notes, and snippets.

@feliperoberto
Created March 26, 2014 21:11
Show Gist options
  • Save feliperoberto/9793674 to your computer and use it in GitHub Desktop.
Save feliperoberto/9793674 to your computer and use it in GitHub Desktop.
GulpJS + SASS + BrowserSync ftw

#GulpJS + SASS + BrowserSync ftw Being the new-kid-on-the-block, GulpJS is getting plently of attention lately. Instead of contributing to the pool of opinion-pieces out there though, I thought I'd walk you through setting it up with a really nice little workflow including SASS for CSS along with my open-source project, BrowserSync.io.

The end result will be a pretty sweet front-end development setup including:

  • SCSS File watching/compilation.
  • Live CSS injecting into multiple devices.
  • A Server running on an IP address that can be accessed on multiple devices/screens.
  • Syncronized scroll, clicks, links & form fields across all devices.

##Prerequisites

Before starting, you should have:

  1. A project containing at least an index.html & some scss files.
  2. NodeJS installed.
  3. GulpJS installed globally npm install -g gulp

##Assumptions

All following examples/configuration assume we're dealing with a simple HTML/CSS/JS project with the following structure.

// Assumed file/dir structure
index.html  
css/  
scss/  
js/  
You should alter any path/filenames to match your project where needed.

##Step 1 - install the tools

We need to install 3 tools locally to our project - gulp, gulp-sass & browser-sync. In your terminal/command line, navigate to your project directory and run

npm install gulp gulp-sass browser-sync  

##Step 2 - create gulpfile.js

Also in your project root, create a file called gulpfile.js. This is the file in which we'll configure our tools.

##Step 3 - require() the tools

Open up gulpfile.js in your favourite editing tool and place this at the top.

var gulp = require('gulp');  
var sass = require('gulp-sass');  
var browserSync = require('browser-sync');  

##Step 4 - Create tasks

We'll have a separate task for compiling SCSS into CSS & one for starting BrowserSync.

SASS - Here we specify the path to our main scss file (the one that contains all of the @imports), then we pipe the files into the sass function (that we required above) and finally into gulp.dest which will write the output into the CSS directory.

gulp.task('sass', function () {  
    gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('css'));
});

BrowserSync - First we tell BrowserSync to watch any css & js files for changes (which will allow the live updating/reload features to work) & the second param can contain any normal BrowserSync options. In our case though, we just want to start a server in the root of the project.

gulp.task('browser-sync', function() {  
    browserSync.init(["css/*.css", "js/*.js"], {
        server: {
            baseDir: "./"
        }
    });
});

Watch - So far we've configured two separate tasks & now we'll tie them together using gulp's default task. First, we will run the sass compiler ONCE (to ensure the first page load has the latest CSS) & then BrowserSync will start the server & open up a browser. Finally we watch the scss files in the background for changes & run the sass task each time.

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("scss/*.scss", ['sass']);
});

##Seeing it all together

The entire gulpfile.js should now look like this.

var gulp = require('gulp');  
var sass = require('gulp-sass');  
var browserSync = require('browser-sync');

gulp.task('sass', function () {  
    gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('css'));
});

gulp.task('browser-sync', function() {  
    browserSync.init(["css/*.css", "js/*.js"], {
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("scss/*.scss", ['sass']);
});

##Running it.

We're all set up now. All that remains is to head back to the command-line and run.

gulp

A browser window will open up automatically & will serve up your index.html file. Take note of the URL, you can use it on any device that's connected to your WIFI network & all of the BrowserSync features will work across them all. (create for reponsive stuff).

Don't forget, you're being watched - you now have a great development workflow where any changes to scss files will automatically trigger the compilation. When that's done, BrowserSync will notice that the css file was changed & will auto-inject the new file into all browsers.

##Notes

  1. For the sake of simplicity, I removed the step of creating a package.json. If you do want to save your tooling dependencies as you install them, you can run npm init before you start & then add --save-dev to any install commands you run.
  2. The gulp-sass plugin uses the node port of SASS, NOT the ruby version. This is much, much faster - but it's not quite 100% compatible yet, so just be careful when using with legacy projects.

Original article by Shane Osbourne - @shaneOsbourne

@musikel
Copy link

musikel commented Jun 1, 2017

thanks! this helped me a lot!

@AjGabriel
Copy link

will it watch the html files as well?

@weideriCarros
Copy link

Very good! Thank's!
Should show how to minify files.

@francescocortese
Copy link

It work, awesome. Thank you!

@kyunwang
Copy link

Awesome helps a lot! Thanks!

@PixelHeadsLtd
Copy link

Great tutorial. My only issue is that when I run Gulp in the command line it opens the site directory. This may be because my React site creates the index file from an index.js. Site runs normally when using 'npm start'. I guess i need to somehow get the server to run from the GulpFile.js, any ideas? Thanks

@rswdn
Copy link

rswdn commented Feb 3, 2018

Awesome I have been looking for a tutorial on getting a gulp file for sass and browser-sync, works great thanks a bunch!

@eagleeyejack
Copy link

Worked like a charm, thanks mate!

@dbybanez
Copy link

Nice! By the way, how about using SCSS of Bootstrap? Does this work too?

@indranil-tiwary
Copy link

Is there a way to observe html file changes?

@andy-gam
Copy link

andy-gam commented Jan 5, 2019

Hi! It doesn't work for me. I did ALL the same as in the instructions for three times and I get an error when using final "gulp" command. Can anyone help me please? I'm stuck with this for a whole day:
assert.js:350
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/gambit/ass/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/gambit/ass/node_modules/undertaker/lib/task.js:13:8)
at Object. (/Users/gambit/ass/gulpfile.js:19:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)

@andy-gam
Copy link

andy-gam commented Jan 5, 2019

screenshot 2019-01-05 at 21 53 20
screenshot 2019-01-05 at 21 53 25

@todpale
Copy link

todpale commented Jan 31, 2019

@andy-gam, I had the same issue with Gulp 4. If you're working with it, you have to use gulp.series on line 19:
gulp.task('default', gulp.series('sass', browser-sync'], function(){...});
If you get "Th following tasks did npot complete..", add return to 'sass' task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment