Gulp für Assetic-Veteranen

gulpfile.js

var phlough = require("./conf/phlough-configuration.json");
var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); /// lädt alle gulp-*-Module in $.*
var mergeStream = require('merge-stream');
var path = require('path');
var saveLicense = require('uglify-save-license');
var autoprefixer = require('autoprefixer');

var config = {

    "stylesheets": {
        "files": {
            // Alle Pfade relativ zu www/, *nicht* mit ../.. aus www ausbrechen!
            "css/target1.css": [ 'bundles/xx/scss/one.scss', 'bower_components/yy/yy.css', ... ],
            ...
        },
        "watch": ['{lib,src,www}/**/*.{css,scss}', '!www/css/**']
    },

    "javascripts": {
        "files": {
            // Alle Pfade relativ zu www/, *nicht* mit ../.. aus www ausbrechen!
            "js/first.js": [ 'js/foo.js', 'bundles/xx/js/cool.js', ... ],
            ...
        },
        "watch": ['{lib,src,www}/**/*.js', '!www/js/**']
    },

    "development": ($.util.env.e || $.util.env.env || phlough['symfony.kernel.environment']) == 'development',
    "webdir": phlough["project.webdir"],
    "libdir": phlough["project.libdir"],
    "bowerdir": phlough["bower.components_dir"],
    "tempdir": phlough["project.tempdir"]
}

gulp.task('compile-stylesheets', function() {

    var merger = mergeStream();

    var execOptions = {
            cwd: config.webdir,
            pipeStdout: true,
            libdir: config.libdir,
            bowerdir: config.bowerdir,
            sassCacheDir: config.tempdir + '/.sass-cache',
            sassOutputStyle: 'nested',
            maxBuffer: 500 * 1024    // 500 KB Puffergröße für Ausgabe SASS -> CSS-Rebase
    };

    for (var key in config.stylesheets.files) {
        var destPath = config.webdir + "/" + key;

        $.util.log("Compile " + key + ": [" + (config.stylesheets.files[key].join(", ")) + "]");

        merger.add(
            gulp.src(config.stylesheets.files[key], { cwd: config.webdir, read: false })
                .pipe($.exec('sass --cache-location <%= options.sassCacheDir %> --scss --style <%= options.sassOutputStyle %> --load-path <%= options.libdir %> --load-path <%= options.bowerdir %> <%= file.path %>', execOptions))
                .on('error', function(err) { $.util.log(err.message); })
                .pipe($.cssUrlRebase({ root: path.dirname(key) }))
                .pipe($.postcss([ autoprefixer({ browsers: ['last 2 version'] }) ]))
                .pipe(config.development ? $.util.noop() : $.minifyCss())
                .pipe($.concat(key))
                .pipe(gulp.dest(config.webdir))
        );

    }

    merger.pipe($.livereload({ auto: false }));
    return merger;

});

gulp.task('compile-javascripts', function() {

    var merger = mergeStream();

    for (var key in config.javascripts.files) {
        $.util.log("Compile " + key + ": [" + (config.javascripts.files[key].join(", ")) + "]");

        merger.add(
            gulp.src(config.javascripts.files[key], { cwd: config.webdir })
                .pipe(config.development ? $.concat(key) : $.uglifyjs(key, { output: { comments: saveLicense }}))
                .pipe(gulp.dest(config.webdir))
        );
    }

    merger.pipe($.livereload({ auto: false }));
    return merger;

});

gulp.task('watch-with-livereload', function () {

    $.livereload.listen();
    gulp.watch(config.stylesheets.watch, $.batch({ timeout: 20 }, function (done) {
        gulp.start('compile-stylesheets');
        done();
    }));

    gulp.watch(config.javascripts.watch, $.batch({ timeout: 20 }, function (done) {
        gulp.start('compile-javascripts');
        done();
    }));

});

gulp.task('default', ['watch-with-livereload']);
gulp.task('compile', ['compile-stylesheets', 'compile-javascripts']);

package.json

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.0.2",
    "gulp": "^3.8.5",
    "gulp-batch": "^1.0.5",
    "gulp-concat": "^2.3.3",
    "gulp-css-url-rebase": "^0.2.0",
    "gulp-exec": "^2.1.0",
    "gulp-livereload": "^2.1.0",
    "gulp-load-plugins": "1.0.0-rc.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-uglifyjs": "^0.6.2",
    "gulp-util": "^3.0.6",
    "merge-stream": "^1.0.0",
    "uglify-save-license": "^0.4.1",
    "gulp-postcss": "^6.0.0"
  }
}

Habe https://github.com/kjbekkelund/gulp-css-rebase-urls entfernt und durch
den Fork https://github.com/42Zavattas/gulp-css-url-rebase ersetzt, weil die Originalversion scheinbar nicht mehr maintained wird und zumindest kimjoar/gulp-css-rebase-urls#4 im Fork gelöst ist.

In https://gist.github.com/mpdude/4332c6b354eb9673ec07/6b37a2c29aa6754e59d0ba0634edc0586a8a33d2: Weil gulp-batch jetzt intern async-done einsetzt, müssen wir das Ende des Callbacks ausdrücklich signalisieren (vgl. floatdrop/gulp-batch#7).