ML

Most useful plugin i know for gulp is BrowserSync, in my opinion its much better than classic Browserify + Live reload combo. Mostly because it creates a server which is visible by all devices connected to wifi. Automaticly syncs reloads but also scroll (page position). Very important when it comes to testing. So here is how i work in development with gulp, sass and browsersync.

var browserSync = require('browser-sync');
var reload = browserSync.reload;

/*
 DEVELOPMENT
 - compile scss and start server with BrowserSync
 */

//scss - compile SCSS, uncss it, autoprefix it, 
//comb and beautify it and create sourcemaps
gulp.task('scss', function () {
    return gulp.src('./static/scss/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 10 versions', 'IE 7']
        }))
        .pipe(csscomb())
        .pipe(cssbeautify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./static/css/'))
        .pipe(reload({stream: true}));
});

//DEFAULT - run task with: gulp, open server, watch for changes
gulp.task('default', ['scss'], function () {
    browserSync({
        server: {
            baseDir: './'
        },
        online: true
    });

    gulp.watch('./static/scss/**/*.scss', ['scss']);
    gulp.watch('./*.html', browserSync.reload);
    gulp.watch('./static/js/**/*.js', browserSync.reload);
});
/*
 END DEVELOPMENT
 */

Syntax for Browsersync is very easy and im using it right in the default task runner. Gulp watches sass, html and js. If you want to run a task on change (like my scss task) then you have to put the .pipe(reload({stream: true})); as the last pipe in task to reload all browsers after sass is compiled. My HTML and JS dont trigger any task as i dont concat or minify JS and minify and inject HTML in development process, so the task they trigger is browserSync.reload which goes in watch. online: true is a little trick to get Browsersync started faster. Read more in BS's docs about that.

SCSS is deeply prefixed then it runs trough CSSComb which organizes CSS to be more logical than alphabeticall order. Than its beautified to be more readable.

Blog Comments Powered by Disqus