Front End Magento 1 SCSS Compilation

gulpfile.js

//Dependencies
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var pump = require('pump');
var reload = browserSync.reload;

//Config

//Absolute path to the theme directory
var themeDir = "/var/www/vhosts/project_name/public/skin/frontend/rwd/default"; //Example, replace me

//Absolute path to the CSS output directory, use the partial match to update when CSS recompiles
var watchFiles = [
    "/var/www/vhosts/project_name/public/skin/frontend/rwd/default/css/**/*.css"
];

//Hostname for the site you wish to work with
var proxy = "https://www.mymagento.dev/";

//Theme directory structure, shouldn't need changing
var src = {
    scss: themeDir + '/scss/**/*.scss',
    css: themeDir + '/css'
};

// Static Server + watching scss/html files
gulp.task('serve', function () {
    browserSync.init({
        ghostMode: {
            clicks: true,
            forms: true,
            scroll: true
        },
        proxy: {
            target: proxy,
            middleware: [
                function (request, response, next) {
                    //Allows varnish bypass to work
                    response.setHeader('set-cookie', 'varnish_bypass=1');
                    next();
                }
            ]
        },
        notify: true,
        scrollProportionally: true,
        online: true,
        open: false,
        files: watchFiles
    });

    gulp.watch(src.scss, ['sass']);
});

/**
 * Compile sass, filter the results, inject CSS into all browsers
 */
gulp.task('sass', function () {
    return gulp.src(src.scss)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCss({
            level: 2
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(src.css));
});

gulp.task('default', ['serve']);

package.json

{
    "name": "Magento-Frontend-tools",
    "version": "1.0.0",
    "private": true,
    "description": "Some tools",
    "main": "gulpfile.js",
    "dependencies": {
        "gulp": "^3.9.1",
        "gulp-filter": "^5.0.1",
        "gulp-ruby-sass": "^2.1.1",
        "gulp-sourcemaps": "^2.6.0",
        "compass-sass-mixins": "^0.12.7"
    },
    "devDependencies": {
        "browser-sync": "^2.23.5",
        "gulp": "^3.9.1",
        "gulp-clean-css": "^3.9.0",
        "gulp-compass": "*",
        "gulp-csscomb": "^3.0.8",
        "gulp-filter": "*",
        "gulp-ll": "^1.0.4",
        "gulp-minify-css": "*",
        "gulp-plumber": "*",
        "gulp-ruby-sass": "*",
        "gulp-sass": "*",
        "gulp-sourcemaps": "*",
        "gulp-uglify": "^3.0.0",
        "pump": "^1.0.3"
    },
    "author": "Dan",
    "license": "ISC"
}