Skip to content

Instantly share code, notes, and snippets.

@ursbraem
Created January 29, 2020 21:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ursbraem/e06404ca3c1c19c96ece550dcc02d75c to your computer and use it in GitHub Desktop.
Save ursbraem/e06404ca3c1c19c96ece550dcc02d75c to your computer and use it in GitHub Desktop.
gulpfile for less and js
//*********** IMPORTS *****************
var gulp = require('gulp');
var less = require('gulp-less');
//var autoprefixer = require('gulp-autoprefixer');
var gutil = require('gulp-util');
var rename = require("gulp-rename");
var map = require("map-stream");
var concat = require("gulp-concat");
var watch = require("gulp-watch");
var minifyJS = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var pump = require('pump');
//var minifyHTML = require('gulp-minify-html');
//var browserSync = require('browser-sync');
//var reload = browserSync.reload;
global.errorMessage = '';
/**
------------------------------------------ LESS ------------------------
**/
var lessFiles = [
{
watch: './fe/source/less/*.less',
src: './fe/source/less/main.less',
dest: './fe/live/gen/',
name: 'main.css',
nameMin: 'main.min.css',
}
];
function lessWatch(lessData) {
gulp.src(lessData.watch)
.pipe(watch(lessData.watch, function() {
gulp.src(lessData.src)
.pipe(sourcemaps.init())
.pipe(less(lessOptions))
.pipe(sourcemaps.write())
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
//.pipe(autoprefixer({
// browsers: ['last 4 versions'],
// cascade: false
//}))
.pipe(rename(lessData.name))
.pipe(gulp.dest(lessData.dest))
.pipe(minifyCSS())
.pipe(rename(lessData.nameMin))
.pipe(gulp.dest(lessData.dest));
return gulp.src('./fe/live/gen/main.css')
//.pipe(reload({stream:true}));
}));
}
/*
---------------------------------------- JS ------------------------
*/
var jsFiles = [
// RWD fallback for IE < 9, loaded conditionally
{
watch: './fe/source/js/vendor/oldie/*.js',
src: ['./fe/source/js/vendor/oldie/html5shiv.js',
'./fe/source/js/vendor/oldie/respond.js'],
dest: './fe/live/gen/',
name: 'oldie.js',
nameMin: 'oldie.min.js',
},
// footer loaded JS
{
watch: [
'./fe/source/js/*.js',
'./fe/source/js/vendor/*.js'
],
src: [
'./fe/source/js/vendor/smoothscroll.js',
//'./fe/source/js/vendor/hyphenator.js',
'./fe/source/js/vendor/prefixfree.js',
'./fe/source/js/vendor/jquery.remodal.1.0.4.js',
'./fe/source/js/vendor/lazysizes.js',
'./fe/source/js/vendor/lazysizes.respimg.js',
'./fe/source/js/vendor/various.js',
'./fe/source/js/custom.js'],
dest: './fe/live/gen/',
name: 'main.js',
nameMin: 'main.min.js',
},
// additional js for homepage animations
{
watch: './fe/source/js/frontpage.js',
src: [
'./fe/source/js/vendor/smoothscroll.js',
'./fe/source/js/vendor/scrollmagic.js',
//'./fe/source/js/vendor/scrollmagic.debug.js',
'./fe/source/js/frontpage.js'],
dest: './fe/live/gen/',
name: 'frontpage.js',
nameMin: 'frontpage.min.js',
}
];
// @todo: sourceMap geht noch nicht
// @todo: geht browsersync hierfür auch?
function scriptWatch(jsData) {
gulp.src(jsData.watch)
.pipe(watch(jsData.watch, function() {
gulp.src(jsData.src)
.pipe(concat(jsData.name))
.pipe(gulp.dest(jsData.dest))
.pipe(minifyJS())
.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
.pipe(rename(jsData.nameMin))
.pipe(gulp.dest(jsData.dest));
return gulp.src('./fe/live/gen/*.min.js')
}));
}
//END configuration
// LESS and JS tasks
gulp.task('watch', function () {
for (var i in lessFiles) {
lessWatch(lessFiles[i]);
}
for (var j in jsFiles) {
scriptWatch(jsFiles[j]);
}
});
// Default task to be run with `gulp`
gulp.task('default', ['watch']);
var lessOptions = {
'style': 'compressed'
};
// Does pretty printing of less errors
var checkErrors = function (obj) {
function checkErrors(file, callback, errorMessage) {
if (file.path.indexOf('.less') != -1) {
file.contents = new Buffer("\
body * { white-space:pre; }\
body * { display: none!important; }\
body:before {\
white-space:pre;\
content: '"+ global.errorMessage.replace(/(\\)/gm,"/").replace(/(\r\n|\n|\r)/gm,"\\A") +"';\
}\
html{background:#ccf!important; }\
");
}
callback(null, file);
}
return map(checkErrors);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment