Gulp.js for WP Theme Development with SASS(SCSS)

gulp.js for wordpress

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
 
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
    //watch files
    var files = [
    './*.css',
    './*.php'
    ];
 
    //initialize browsersync
    browserSync.init(files, {
    //browsersync with a php server
    proxy: "http://yourlocalhost.dev/",
    notify: false
    });
});
 
// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
    // style.css
    gulp.src('./assets/scss/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'))
        .pipe(reload({stream:true}));
        
    // css/responsive.css
    gulp.src('./assets/scss/responsive.scss')
        .pipe(sass())
        .pipe(gulp.dest('./assets/css/'))
        .pipe(reload({stream:true}));

    // css/admin.css
    gulp.src('./assets/scss/admin.scss')
        .pipe(sass())
        .pipe(gulp.dest('./assets/css/'))
        .pipe(reload({stream:true}));
});
 
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("./assets/scss/*.scss", ['sass']);
});

if you use it for static .html files, replace the browserSync with this one:
browserSync.init({ server: { baseDir: './' } });