#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:
- A project containing at least an index.html & some scss files.
- NodeJS installed.
- 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
- 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.
- 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.
