Skip to content

Instantly share code, notes, and snippets.

@mpdude
Last active August 11, 2017 13:00
Show Gist options
  • Save mpdude/4332c6b354eb9673ec07 to your computer and use it in GitHub Desktop.
Save mpdude/4332c6b354eb9673ec07 to your computer and use it in GitHub Desktop.
Gulp für Assetic-Veteranen
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']);
{
"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"
}
}
@mpdude
Copy link
Author

mpdude commented Aug 8, 2015

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.

@mpdude
Copy link
Author

mpdude commented Sep 17, 2015

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment