Skip to content

Instantly share code, notes, and snippets.

@polarbirke

polarbirke/Projekt-Maintenance

Forked from mpdude/gulpfile.js
Last active February 22, 2019 14:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save polarbirke/7520fe1a210a571ea67c05e59ff2aed1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save polarbirke/7520fe1a210a571ea67c05e59ff2aed1 to your computer and use it in GitHub Desktop.
Download ZIP
Gulp für Assetic-Veteranen
Raw
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('LC_ALL=en_GB.utf8 sass --cache-location <%= options.sassCacheDir %> --scss --style <%= options.sassOutputStyle %> --load-path <%= options.libdir %> --load-path <%= options.bowerdir %> <%= file.path %>', execOptions))
.pipe($.cssUrlRebase({ root: path.dirname(key) }))
.pipe(config.development ? $.sourcemaps.init() : $.util.noop())
.pipe($.postcss([autoprefixer({ browsers: ['last 5 version'] })]))
.pipe($.concat(key))
.pipe($.cleanCss({
compatibility: 'ie7',
rebase: false // URL rebasing wird besser von cssUrlRebase gehandhabt
}))
.pipe(config.development ? $.sourcemaps.write() : $.util.noop())
.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 ? $.sourcemaps.init() : $.util.noop())
.pipe($.uglify({
output: { comments: saveLicense }
}))
.pipe($.concat(key))
.pipe(config.development ? $.sourcemaps.write() : $.util.noop())
.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']);
Raw
package.json
{
"private": true,
"dependencies": {
"autoprefixer": "^7.1.2",
"gulp": "^3.8.5",
"gulp-batch": "^1.0.5",
"gulp-clean-css": "^3.7.0",
"gulp-concat": "^2.3.3",
"gulp-css-url-rebase": "^0.2.3",
"gulp-exec": "^2.1.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-postcss": "^7.0.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.0",
"merge-stream": "^1.0.1",
"uglify-save-license": "^0.4.1"
}
}
Raw
Projekt-Maintenance
// Maintenance-Helfer in einem bestehenden Projekt:
// • Wechsel: gulp-minify-css (deprecated) -> gulp-clean-css
// • Wechsel: gulp-uglifyjs (deprecated) -> gulp-uglify ersetzt
// • Wechsel: gulp-css-rebase-urls -> gulp-css-url-rebase
// • Wechsel: autoprefixer-core -> autoprefixer
// • Neu: gulp-sourcemaps
// • evtl. neu: uglify-save-license
npm install gulp-clean-css gulp-uglify gulp-sourcemaps autoprefixer gulp-css-url-rebase uglify-save-license --save
npm uninstall autoprefixer-core gulp-minify-css gulp-uglifyjs gulp-css-rebase-urls --save
@relthyg
Copy link

relthyg commented Sep 27, 2018

Könntest du mal Zeile 57 und 58 im gulpfile durch folgende Zeile ersetzen:

.pipe($.exec('LC_ALL=en_GB.utf8 sass --cache-location <%= options.sassCacheDir %> --scss --style <%= options.sassOutputStyle 
%> --load-path <%= options.libdir %> --load-path <%= options.bowerdir %> <%= file.path %>', execOptions))

Damit wird sichergestellt, dass

  • a) sass die Quelldateien als UTF-8 liest, und
  • b) gulp bei einem Fehler aussteigt.

Kontext

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