Skip to content

Instantly share code, notes, and snippets.

@jonleverrier

jonleverrier/gulpfile.js

Created December 14, 2018 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jonleverrier/0db3a73da2a376a1ddf5a174d822ced6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jonleverrier/0db3a73da2a376a1ddf5a174d822ced6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jonleverrier created this gist Dec 14, 2018.
    289 changes: 289 additions & 0 deletions gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,289 @@
    // Alphasite Build Tool
    // Verion: 2.0
    // Author: jon@youandme.digital
    //
    // Built and tested on:
    // - Node: v.10.14.1
    // - NPM: v.6.4.1
    // - Gulp: v.4.0

    // load required npm plugins (from a-z)
    const autoprefixer = require('autoprefixer');
    const cleancss = require('gulp-clean-css');
    const color_rgba_fallback = require('postcss-color-rgba-fallback');
    const combinemq = require('gulp-combine-mq');
    const compressimages = require('gulp-imagemin');
    const concat = require('gulp-concat');
    const criticalcss = require('gulp-penthouse');
    const cssnano = require('cssnano');
    const fs = require('fs');
    const gulp = require('gulp');
    const gulp_util = require('gulp-util');
    const opacity = require('postcss-opacity');
    const pixrem = require('pixrem');
    const postcss = require('gulp-postcss');
    const pseudoelements = require('postcss-pseudoelements');
    const rename = require('gulp-rename');
    const replace = require('gulp-replace');
    const rev = require('gulp-rev');
    const revFormat = require('gulp-rev-format');
    const sass = require('gulp-sass');
    const size = require('gulp-size');
    const svg2png = require('gulp-svg2png');
    const svgsprite = require('gulp-svg-sprite');
    const touch = require('gulp-touch-cmd');
    const uglify = require('gulp-uglify');
    const vmin = require('postcss-vmin');

    // load postcss plugins
    const postcss_plugins = [
    autoprefixer(),
    color_rgba_fallback,
    cssnano(),
    opacity,
    pixrem,
    pseudoelements,
    vmin
    ];

    // define build paths
    const path_build = {
    src: 'build/',
    dest: 'dist/assets/template/',
    };
    // define asset paths
    const path_assets = {
    images: {
    src: path_build.src + 'img/',
    dest: path_build.dest + 'i/'
    },
    sass: {
    src: path_build.src + 'scss/',
    dest: path_build.dest + 'c/'
    },
    sprite: {
    src: path_build.src + 'sprite/*',
    svg: 'i/sprite.svg',
    css: '../../../' + path_build.src + 'scss/theme/_sprite.scss'
    },
    templates: {
    src: path_build.src + 'tpl/'
    }
    };

    // generate timestamp
    // and convert to string
    const timestamp = new Date().getTime().toString();

    // generate svg sprite file
    function generate_sprite_svg() {
    return gulp
    .src(path_assets.sprite.src)
    .pipe(svgsprite({
    shape: {
    spacing: {
    padding: 5
    }
    },
    mode: {
    css: {
    dest: "./",
    layout: "vertical",
    sprite: path_assets.sprite.svg,
    bust: false,
    render: {
    scss: {
    dest: "../../../build/scss/lib/theme/_sprite.scss",
    template: "build/tpl/sprite-template.scss"
    }
    }
    }
    },
    variables: {
    mapname: "icons"
    }
    }))
    .pipe(gulp.dest(path_build.dest))
    .pipe(touch());
    }

    // generate png sprite file
    function generate_sprite_png() {
    return gulp
    .src(path_build.dest + path_assets.sprite.svg)
    .pipe(svg2png())
    .pipe(size({
    showFiles: true
    }))
    .pipe(gulp.dest(path_assets.images.dest))
    .pipe(touch());
    }

    // compile sass
    function compile_sass() {
    return gulp
    .src('./build/scss/**/*.scss')
    .pipe(sass())
    .pipe(cleancss({
    compatibility: 'ie11'
    }))
    .pipe(gulp.dest('./build/css/'))
    .pipe(touch());
    }

    // compile javascript
    function compile_js() {
    return gulp
    .src('./build/js/[^_]*.js')
    .pipe(uglify({
    mangle: false
    }))
    .pipe(concat('s.min.js'))
    .pipe(rev())
    .pipe(revFormat({
    prefix: '.',
    lastExt: true
    }))
    .pipe(gulp.dest('./dist/assets/template/j/'))
    .pipe(touch());
    }

    // process css
    // further settings can be found in package.json
    function process_css() {
    return gulp
    .src('./build/css/*.css')
    .pipe(combinemq({
    beautify: false
    }))
    .pipe(postcss(postcss_plugins))
    .pipe(rename({
    suffix: '.min'
    }))
    .pipe(rev())
    .pipe(revFormat({
    prefix: '.',
    lastExt: true
    }))
    .pipe(gulp.dest('./dist/assets/template/c'))
    .pipe(touch());
    }

    // process critical css
    function process_criticalcss_generic() {
    return gulp
    .src('./dist/assets/template/c/c.min.*.css')
    .pipe(criticalcss({
    out: '/ccss_generic.css',
    url: 'https://example.com/',
    width: 1366,
    height: 460,
    strict: true,
    userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
    }))
    .pipe(combinemq({
    beautify: false
    }))
    .pipe(postcss(postcss_plugins))
    .pipe(replace('../', '/assets/template/'))
    .pipe(gulp.dest('./dist/assets/template/c/'))
    .pipe(touch());
    }

    // process images
    // this helper task needs to be run manually
    // it is not apart of any automatic build process
    function process_images() {
    return gulp
    .src('./dist/assets/template/i/*')
    .pipe(compressimages(
    [
    compressimages.gifsicle({
    interlaced: true,
    optimizationLevel: 2
    }),
    compressimages.jpegtran({
    progressive: true
    }),
    compressimages.svgo({
    plugins: [
    {
    removeViewBox: true
    },
    {
    cleanupIDs: false
    }
    ]
    })
    ],
    {
    verbose: true
    }))
    .pipe(gulp.dest('./dist/assets/template/i'));
    }

    // watch build folder
    function watch_build() {
    gulp.watch('build/scss/**/*.scss', compile_sass);
    gulp.watch('build/js/**/*.js', compile_js);
    gulp.watch('build/sprite/**/*.svg', generate_sprite_svg, generate_sprite_png);
    gulp.watch('build/css/*.css', process_css);
    }

    // export build system
    function export_build_copy() {
    return gulp
    .src([
    './node_modules',
    './build/**/*',
    './dist/**/*',
    './gulpfile.js',
    './package.json',
    './package-lock.json',
    './README'
    ], {
    base: '.'
    })
    .pipe(gulp.dest('./export/temp'));

    }

    // rename the temp folder to something more meaningful
    function export_build_rename(cb) {
    fs.rename('./export/temp', './export/export-' + timestamp, cb);
    cb();
    }

    // tasks
    gulp.task('generate_sprite_svg', generate_sprite_svg);
    generate_sprite_svg.description = 'generate svg sprite file';

    gulp.task('generate_sprite_png', generate_sprite_png);
    generate_sprite_png.description = 'generate png sprite fallback file';

    gulp.task('generate_sprite', gulp.series(generate_sprite_svg, generate_sprite_png));

    gulp.task('compile_sass', compile_sass);
    compile_sass.description = 'compile sass';

    gulp.task('compile_js', compile_js);
    compile_js.description = 'compile javascript';

    gulp.task('process_css', process_css);
    process_css.description = 'process css';

    gulp.task('process_criticalcss', gulp.series(process_criticalcss_generic));

    gulp.task('process_images', process_images);
    process_images.description = 'optimise images - has to be run manually';

    gulp.task('watch', watch_build);
    watch_build.description = 'default watch task';

    gulp.task('build_css', gulp.series(compile_sass, process_css));

    gulp.task('build', gulp.series(generate_sprite_svg, generate_sprite_png, compile_sass, compile_js, process_css));

    gulp.task('default', gulp.series('build'));

    gulp.task('export_build', gulp.series(export_build_copy, export_build_rename));