diff --git a/gulpfile.js b/gulpfile.js index e69de29..3f03087 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -0,0 +1,161 @@ +const gulp = require('gulp'); +const cssnano = require('cssnano') +const gulpLoadPlugins = require('gulp-load-plugins') +const uglify = require('gulp-uglify-es').default; +const del = require('del'); + +const $ = gulpLoadPlugins() + +$.sass.compiler = require('sass'); + +/* ============================================================================ +Base consts +============================================================================ */ + +// Project sources +const src = { + root: 'src', + styles: 'src/stylesheets', + scripts: 'src/javascript', + images: 'src/images', +} + +// Build path +const tmp = { + root: '.tmp', + styles: '.tmp/stylesheets', + scripts: '.tmp/javascript', + images: '.tmp/images', + vendor: '.tmp/libs', + maps: '../sourcemaps', +} + +// Dist path +const dist = { + root: 'dist', + styles: 'dist/stylesheets', + scripts: 'dist/javascript', + images: 'dist/images', + vendor: 'dist/libs', + maps: 'dist/sourcemaps', +} + +// Build mode +const isProd = process.env.NODE_ENV === 'production'; +const isDev = !isProd; + +/* ============================================================================ +Build tasks +============================================================================ */ + +gulp.task('styles', () => { + return gulp.src(`${src.styles}/*.scss`) + .pipe($.plumber()) + // sourcemap initialization + .pipe($.if(isDev, $.sourcemaps.init())) + // sass compilation + .pipe($.sass.sync({ + outputStyle: 'expanded', + precision: 7, + includePaths: ['.'], + }).on('error', $.sass.logError)) + // autoprefix + .pipe($.autoprefixer()) + // out stream size + .pipe($.size({ + showFiles: true + })) + .pipe(gulp.dest(tmp.styles)) + .pipe($.rename({ suffix: '.min' })) + // minimize and optimize + .pipe($.if('*.css', $.postcss([ + cssnano({ + safe: true, + autoprefixer: false, + zindex: false, + reduceIdents: { + keyframes: true, + }, + }) + ]))) + // out stream size + .pipe($.size({ + showFiles: true + })) + // write sourcemaps + .pipe($.if(isDev, $.sourcemaps.write(tmp.maps))) + .pipe(gulp.dest(tmp.styles)) +}) + +gulp.task('scripts', () => { + return gulp.src(`${src.scripts}/**/*.js`) + .pipe($.plumber()) + .pipe($.if(isDev, $.sourcemaps.init())) + .pipe($.babel()) + .pipe($.rename({ suffix: '.min' })) + .pipe($.if('*.js', uglify({ compress: { drop_console: isProd, drop_debugger: isProd } }))) + .pipe($.size({ + showFiles: true, + })) + .pipe($.if(isDev, $.sourcemaps.write(tmp.maps))) + .pipe(gulp.dest(`${tmp.scripts}`)) +}) + +gulp.task('images', () => { + return gulp.src(`${src.images}/**/*`) + .pipe($.plumber()) + .pipe($.imagemin([ + $.imagemin.gifsicle({ interlaced: true }), + $.imagemin.mozjpeg({ progressive: true }), + $.imagemin.optipng(), + $.imagemin.svgo({ plugins: [{ cleanupIDs: false }] }) + ])) + .pipe($.size({ title: 'images' })) + .pipe(gulp.dest(tmp.images)) +}) + +/* ============================================================================ +Clean +============================================================================ */ + +gulp.task('clean:build', del.bind(null, [tmp.root])) + +gulp.task('clean:dist', del.bind(null, [dist.root], { force: true })) // Das Force brauchen wir, da das Assets Verzeichnis außerhalb des Working Directories ist. + +gulp.task('clean', gulp.series('clean:build', 'clean:dist')) + +/* ============================================================================ +BUILD CLEAN ALL +============================================================================ */ + +gulp.task('build', gulp.series('clean:build', 'images', 'scripts', 'styles')); + +/* ============================================================================ +DIST CLEAN ALL +============================================================================ */ + +gulp.task('dist:copy', (done) => { + // copy vendor + gulp.src(`${tmp.vendor}/**/*`) + .pipe(gulp.dest(dist.vendor)) + + // copy images + gulp.src(`${tmp.images}/**/*`) + .pipe(gulp.dest(dist.images)) + + // copy scripts + gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`) + .pipe(gulp.dest(dist.scripts)) + + // copy styles + gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`) + .pipe(gulp.dest(dist.styles)) + + // sourcemaps + gulp.src(`${tmp.root}/**/*.map`) + .pipe(gulp.dest(dist.root)) + + done(); +}) + +gulp.task('dist', gulp.series('clean', 'build', 'dist:copy')); \ No newline at end of file