SilverGULP

dev-gulp-tasks__gulp-config.json

{
  "SASS_SRC" : "./themes/mytheme/dev-sass",
  "CSS_DIR" : "./themes/mytheme/css",
  "PROXY_URL" : "localhost/mysite",
  "JS_SRC" : "./themes/mytheme/dev-javascript",
  "JS_DST" : "./themes/mytheme/javascript",
  "JS_FILES" : [
    "node_modules/picturefill/dist/picturefill.js",
    "node_modules/jquery/dist/jquery.js",
    "./themes/mytheme/dev-javascript/init.js"
  ],
  "FONT_LICENSE" : "./themes/mytheme/dev-license/*",
  "MODERNIZR_OPTIONS" : [
    "setClasses",
    "html5shiv",
    "testProp"
  ]
}

dev-gulp-tasks__minify-css.js

module.exports = function (gulp, plugins, config, args) {
    return function () {
        var src = [
            config.CSS_DIR + '/typography.css',
            config.CSS_DIR + '/layout.css'
        ];
        if(args){
            src = args.concat(src);
        }
        return gulp.src(src, {base: config.CSS_DIR})
            .pipe(plugins.concat('styles.css'))
            .pipe(plugins.uglifycss())
            .pipe(gulp.dest(config.CSS_DIR));
    };
};

dev-gulp-tasks__minify-js.js

module.exports = function (gulp, plugins, config) {
    return function () {
        return gulp.src(config.JS_FILES)
            .pipe(plugins.concat('script.min.js'))
            .pipe(plugins.uglify())
            .pipe(gulp.dest(config.JS_DST));
    };
};

dev-gulp-tasks__modernizr.js

module.exports = function (gulp, plugins, config) {
    return function () {
        return gulp.src([config.JS_SRC + '/**/*.js', config.SASS_SRC + '/**/*.scss'])
            .pipe(plugins.modernizr({
                "options" : config.MODERNIZR_OPTIONS
            }))
            .pipe(plugins.uglify())
            .pipe(gulp.dest(config.JS_DST));
    };
};

dev-gulp-tasks__sass.js

module.exports = function (gulp, plugins, config) {
    return function () {
        return gulp.src(config.SASS_SRC + '/*.scss')
            .pipe(plugins.sourcemaps.init())
            .pipe(plugins.sass().on('error', plugins.sass.logError))
            .pipe(plugins.sourcemaps.write('.'))
            .pipe(gulp.dest(config.CSS_DIR))
            .pipe(plugins.browserSync.stream({match: '**/*.css'}));
    };
};

dev-gulp-tasks__serve.js

module.exports = function (gulp, plugins, config) {
    return function () {
        // Serve files from the root of this project
        plugins.browserSync.init({
            proxy: config.PROXY_URL,
            files: [
                // Patterns for static files to watch.
                // We're watching js and php files within mysite
                // and SilverStripe template files within themes
                "mysite/**/*.js",
                "mysite/**/*.php",
                "themes/**/*.ss",
                "themes/**/*.js",
                "*.html"
            ],
            notify: false
        });

        // watch changes to sass (these will also be piped to browser-sync)
        gulp.watch(config.SASS_SRC +'/*.scss', ['sass']);
    };
};

gulpfile.js

'use strict';

// require gulp itself
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({
	pattern: ['browser-sync', 'gulp-*', 'gulp.*']
});
var config = require('./dev-gulp-tasks/gulp-config.json');

function getTask(task) {
	return require('./dev-gulp-tasks/' + task)(gulp, plugins, config, Array.prototype.slice.call(arguments, 1));
}

gulp.task('sass', getTask('sass'));
gulp.task('modernizr', getTask('modernizr'));
gulp.task('minify-js', getTask('minify-js'));
gulp.task('serve', ['modernizr'], getTask('serve'));
gulp.task('minify-css', ['sass'], getTask('minify-css'));
// Merge in a Font License eg. for font-tracking
gulp.task('minify-css-release', ['sass'], getTask('minify-css', config.FONT_LICENSE));

// the gulp default task generates the modernizr file, builds css and JS
gulp.task('default', ['modernizr', 'minify-css', 'minify-js']);
// the release task does the same as default, but use the minify-css-release task (to include the font license)
gulp.task('release', ['modernizr', 'minify-css-release', 'minify-js']);

mysite__code__Page.php

<?php

class Page extends SiteTree
{
}

class Page_Controller extends ContentController
{
    // Required CSS files (relative to template directory)
    protected $css = array(
        '/css/typography.css',
        '/css/layout.css'
    );

    /**
     * Initialize the controller
     */
    public function init()
    {
        parent::init();

        Requirements::clear();

        if (Director::isDev()) {
            $gulpConfig = BASE_PATH . DIRECTORY_SEPARATOR . 'dev-gulp-tasks' . DIRECTORY_SEPARATOR . 'gulp-config.json';
            $config = json_decode(file_get_contents($gulpConfig), true);
            foreach ($config['JS_FILES'] as $script) {
                Requirements::javascript($script);
            }

            foreach ($this->css as $css) {
                Requirements::css($this->ThemeDir() . $css);
            }

        } else {
            Requirements::javascript($this->ThemeDir() . '/javascript/script.min.js');
            Requirements::css($this->ThemeDir() . '/css/styles.css');
        }

        // Add modernizr JS to the HEAD
        Requirements::insertHeadTags('<script type="text/javascript" src="' . $this->ThemeDir() . '/javascript/modernizr.js"></script>');
    }
}

package.json

{
  "name": "gulp-dependencies",
  "description": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "browser-sync": "~2.11",
    "gulp": "~3.9",
    "gulp-concat": "~2.6",
    "gulp-load-plugins": "~1.2",
    "gulp-modernizr": "^1.0.0-alpha",
    "gulp-sass": "~2.1",
    "gulp-sourcemaps": "~1.6",
    "gulp-uglify": "~1.5",
    "gulp-uglifycss": "~1.0"
  }
}