#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.
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