A simple gulp setup for SASS, BrowserSync and local server

best gulp build system with sass

Using gulp to help organise and control your project assets is a great tool, but trying to set up the config each time can be annoying.
I’ve found the below config (gulpfile.js) to be the best fit for the majority of starter web projects so I hope you find it useful too.
It pipes style changes through autoprefixer to help support all browsers by default, cssnano to further minimise CSS, and browser sync and connect-sync to start you up with a simple local php server – with browsersync to inject all the style changes and auto-refreshes across multiple devices.

You can comment out the two gulp.task lines for [connect-sync], and un-comment the line underneath it, if you don’t want to create a local server using gulp.

If you’re new to gulp you’ll have to create a few files (gulpfile.js and package.json) in the root of your project and then run a few terminal commands to get yourself setup.
This isn’t meant to be a full tutorial, but hopefully can provide you with a one stop resource for the copy-paste bits you’ll use often:

gulpfile.js

var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),
    autoprefixer = require('gulp-autoprefixer'),
    connect = require('gulp-connect-php'),
    sass = require('gulp-ruby-sass'),
    browserSync = require('browser-sync');


gulp.task('styles', function() {
  return sass('sass/style.scss', { style: 'compressed' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(cssnano())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});



gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });

  gulp.watch('*.php').on('change', function () {
    browserSync.reload();
  });
});



gulp.task('watch', ['connect-sync'], function () {
// gulp.task('watch', function () {
    gulp.watch("sass/**", ['styles']);
    gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('default', ['styles', 'connect-sync'], function() {
// gulp.task('default', ['styles'], function() {
  gulp.start('watch');
});

package.json

{
  "name": "myGulpProject",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.23.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-connect-php": "^1.0.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-ruby-sass": "^3.0.0"
  },
  "description": ""
}

The terminal commands you will need to run:

cd /your/directory/here
sudo gem install sass
sudo npm install gulp -g
npm init
npm install --save-dev
gulp