BrowserSync Gulpfile

gulpfile.js

//load plugins
var gulp             = require('gulp'),
    compass          = require('gulp-compass'),
    autoprefixer     = require('gulp-autoprefixer'),
    minifycss        = require('gulp-minify-css'),
    uglify           = require('gulp-uglify'),
    rename           = require('gulp-rename'),
    concat           = require('gulp-concat'),
    notify           = require('gulp-notify'),
    livereload       = require('gulp-livereload'),
    plumber          = require('gulp-plumber'),
    imagemin         = require('gulp-imagemin'),
    cache            = require('gulp-cache'),
    browserSync      = require('browser-sync'),
    reload           = browserSync.reload,
    favicons         = require('favicons'),
    path             = require('path');

//error notification settings for plumber
var plumberErrorHandler = { errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }
};

// BrowserSync
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public/"
        }
    });
});

// Favicons
gulp.task('favicon', function() {
    favicons({
        // I/O
        files: {
            src: "src/img/favicon/favicon-1024x1024.png",
            dest: "public",
            html: "public/index.html"
        },
        // Icon Types
        icons: {
            android: false,
            apple: true,
            coast: false,
            favicons: true,
            firefox: false,
            opengraph: false,
            windows: false,
        },
        // Miscellaneous
        settings: {
            logging: true
        }
    }, function (err) {
        // err: An error that may have occurred during the Favicons build. `object`
        //console.log(err);
    });
});

//styles
gulp.task('styles', function() {
    return gulp.src('./src/sass/*.scss')
        .pipe(plumber(plumberErrorHandler))
        .pipe(compass({
            config_file: './config.rb',
            css: 'public/css',
            sass: 'src/sass',
            image: 'html/images'
        }))
        .on('error', function(err) {
            // Would like to catch the error here
            console.log(err)
        })
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('public/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'))
        .pipe(reload({stream:true}));
});

//scripts
gulp.task('scripts', function() {
    return gulp.src('./src/js/*.js')
        .pipe(plumber(plumberErrorHandler))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('public/js'))
        .pipe(reload({stream:true}));
});

// Images
gulp.task('images', function() {
  return gulp.src('./src/img/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('public/img'))
    .pipe(reload({stream:true}));
});

// Default task
gulp.task('default', function() {
    gulp.start('styles', 'scripts', 'images');
});


//watch
gulp.task('live',  ['browser-sync'], function() {

    // Watch .scss files
    gulp.watch('src/sass/*.scss', ['styles']);

    // Watch .js files
    gulp.watch('src/js/*.js', ['scripts']);

    // Watch image files
    gulp.watch('src/img/**/*', ['images']);
});