Assetic-Ersatz: Gulp

gulp-config.js

'use strict';

/**
 * This is the application configuration for the frontend build process.
 */

// Where do you want to have the compiled assets?
module.exports.destinationPath = 'public/assets';

// Is development-mode on / off?
// Dev-Off: Minification on,  SourceMaps off
// Dev-On:  Minification off, SourceMaps on
module.exports.development = true;

// Where are the (raw) assets?
var sourcePath = 'module/XXX/assets';

// Which stylesheets do you want to compile?
module.exports.stylesheets = {
    'files': {
        'css/': [sourcePath + '/scss/*.scss']
    },
    'watch': [sourcePath + '/scss/**/*.scss']
};

// Which javascripts do you want to compile?
module.exports.javascripts = {
    'files': {
        'js/base.js': [
            'node_modules/jquery/dist/jquery.min.js',
            sourcePath + '/js/plugin/bootstrap.js',
            sourcePath + '/js/plugin/parsley.min.js',
            sourcePath + '/js/base.js'
        ]
    },
    'watch': [sourcePath + '/js/**/*.js']
};

// Which assets (like images and fonts) do you want to copy?
module.exports.assets = {
    'files': {
        'img/': [sourcePath + '/img/**/*.*'],
        'fonts/': [sourcePath + '/fonts/**/*.*']
    },
    'watch': [sourcePath + '/img/**/*.*']
};

gulpfile.js

'use strict';

var gulp         = require('gulp'),

    concat       = require('gulp-concat'),
    cleanCSS     = require('gulp-clean-css'),
    livereload   = require('gulp-livereload'),
    mergeStream  = require('merge-stream'),
    plumber      = require('gulp-plumber'),
    sass         = require('gulp-sass'),
    sourcemaps   = require('gulp-sourcemaps'),
    uglify       = require('gulp-uglify'),
    application  = require('./config/gulp-config');

/**
 * 'gulp.js compile-stylesheets': Compiles all Stylesheets
 */
gulp.task('compile-stylesheets', function() {
    var merger = mergeStream(),
        pipe;

    for (var key in application.stylesheets.files) {
        if (!application.stylesheets.files.hasOwnProperty(key)) {
            continue;
        }

        pipe = gulp
            // Load files
            .src(application.stylesheets.files[key])

            // Correctly handle errors in pipes
            .pipe(plumber());

        if (application.development) {
            // Init source maps
            pipe.pipe(sourcemaps.init());
        }

        pipe
            // Output Style "expanded" is really pretty and really big. We minify later though (in non-dev)!
            // See https://web-design-weekly.com/2014/06/15/different-sass-output-styles/
            .pipe(sass.sync({outputStyle: 'expanded'}))

            // Write source maps (only DEV) or Minify (only non-DEV)
            .pipe(application.development ? sourcemaps.write('../maps/' + key) : cleanCSS())

            // Write result file
            .pipe(gulp.dest(application.destinationPath + '/' + key));

        merger.add(pipe);
    }

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

    return merger;
});

/**
 * 'gulp.js compile-javascripts': Compiles all javascripts
 */
gulp.task('compile-javascripts', function() {
    var merger = mergeStream(),
        pipe;

    for (var key in application.javascripts.files) {
        if (!application.javascripts.files.hasOwnProperty(key)) {
            continue;
        }

        pipe = gulp
            // Load files
            .src(application.javascripts.files[key])

            // Correctly handle errors in pipes
            .pipe(plumber());

        if (application.development) {
            // Init source maps
            pipe.pipe(sourcemaps.init());
        }

        pipe
            // Merge files
            .pipe(concat(key))

            // Write source maps (only DEV) or Minify (only non-DEV)
            .pipe(application.development ? sourcemaps.write('maps') : uglify({ preserveComments: 'license'})) // keeps the license header in...

            // Write result file
            .pipe(gulp.dest(application.destinationPath));

        merger.add(pipe);
    }

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

    return merger;
});

/**
 * 'gulp.js copy-assets': Copies all other assets (like images and fonts)
 */
gulp.task('copy-assets', function() {
    var merger = mergeStream();

    for (var key in application.assets.files) {
        if (!application.assets.files.hasOwnProperty(key)) {
            continue;
        }

        merger.add(
            gulp
                // Load file
                .src(application.assets.files[key])

                // Write result file
                .pipe(gulp.dest(application.destinationPath + '/' + key))
        );
    }

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

    return merger;
});

/**
 * 'gulp.js watch-with-livereload': Watches the filesystem for changes and enables the livereload feature
 * You have to install the browser extension from here: http://livereload.com/extensions/
 */
gulp.task('watch-with-livereload', function () {
    livereload.listen();
    gulp.watch(application.stylesheets.watch, ['compile-stylesheets']);
    gulp.watch(application.javascripts.watch, ['compile-javascripts']);
    gulp.watch(application.assets.watch, ['copy-assets']);
});

/**
 * 'gulp.js watch': Watches the filesystem for changes
 */
gulp.task('watch', function () {
    gulp.watch(application.stylesheets.watch, ['compile-stylesheets']);
    gulp.watch(application.javascripts.watch, ['compile-javascripts']);
    gulp.watch(application.assets.watch, ['copy-assets']);
});

/**
 * 'gulp.js compile': executes both compile jobs
 */
gulp.task('compile', ['compile-stylesheets', 'compile-javascripts']);

/**
 * 'gulp.js build': executes both compile jobs and copies the assets
 */
gulp.task('build', ['compile', 'copy-assets']);

/**
 * 'gulp.js': shorthand for 'gulp.js build'
 */
gulp.task('default', ['build']);

package.json

{
  "dependencies": {
    "bootstrap-sass": "3.3.*",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.2.2",
    "gulp-concat": "^2.6.1",
    "gulp-livereload": "^3.8.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.0.0",
    "jquery": "3.*",
    "merge-stream": "^1.0.0"
  },
  "license": "UNLICENSED",
  "private": true
}

Basierend auf https://gist.github.com/mpdude/4332c6b354eb9673ec07 und an unsere Bedürfnisse angepasst.
Änderungen:

• gulp-sass (mit node-sass & libsass) statt Ruby sass
• ohne gulp-batch und Entfernen von gulp.start() da deprecated
• Kopieren von Assets hinzugefügt
• gulp-sourcemaps
• Magic durch Kommentare und klare Strukturen ersetzt
• cssUrlRebase entfernt
• uglifyjs durch uglify ersetzt
• minifyCss durch cleanCss ersetzt

🎉

Weitere Änderungen waren nötig:

• autoprefixer (und postcss) entfernt, da unser FEler dies lieber selber macht

Danach gab es nur noch Fehler: "no writecb in Transform class" die ich nicht wirklich lösen konnte. Ich denke aber es lag an concat. Da wir concat bei den CSS Dateien nicht brauchen habe ich es auch ausgebaut und es ging wieder. Bei JS wird es noch gebraucht (macht aber grad keine Probleme?).

Uff...

Weitere Änderungen dann:

• util.noop() ausgebaut da deprecated
• util.log() ausgebaut, da damit das ganze Plugin raus kann und das Logging nicht wirklich gebraucht wurde
• plumber() eingebaut um Fehlermeldungen zu sehen