nystudio107

nystudio107

1920 1080 Pro Web Design


// package vars
const pkg = require("./package.json");

// gulp
const gulp = require("gulp");

// load all plugins in "devDependencies" into the variable $
const $ = require("gulp-load-plugins")(
    pattern: ["*"],
    scope: ["devDependencies"]
);

const onError = (err) => 
    console.log(err);
;

const banner = [
    "/**",
    " * @project        <%= pkg.name %>",
    " * @author         <%= pkg.author %>",
    " * @build          " + $.moment().format("llll") + " ET",
    " * @release        " + $.gitRevSync.long() + " [" + $.gitRevSync.branch() + "]",
    " * @copyright      Copyright (c) " + $.moment().format("YYYY") + ", <%= pkg.copyright %>",
    " *",
    " */",
    ""
].join("n");

// scss - build the scss to the build folder, including the required paths, and writing out a sourcemap
gulp.task("scss", () => 
    $.fancyLog("-> Compiling scss");
    return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.sourcemaps.init(loadMaps: true))
        .pipe($.sass(
                includePaths: pkg.paths.scss
            )
            .on("error", $.sass.logError))
        .pipe($.cached("sass_compile"))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write("./"))
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.build.css));
);

// css task - combine & minimize any distribution CSS into the public css folder, and add our banner to it
gulp.task("css", ["scss"], () => 
    $.fancyLog("-> Building css");
    return gulp.src(pkg.globs.distCss)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.newer(dest: pkg.paths.dist.css + pkg.vars.siteCssName))
        .pipe($.print())
        .pipe($.sourcemaps.init(loadMaps: true))
        .pipe($.concat(pkg.vars.siteCssName))
        .pipe($.cssnano(
            discardComments: 
                removeAll: true
            ,
            discardDuplicates: true,
            discardEmpty: true,
            minifyFontValues: true,
            minifySelectors: true
        ))
        .pipe($.header(banner, pkg: pkg))
        .pipe($.sourcemaps.write("./"))
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.dist.css))
        .pipe($.filter("**/*.css"))
        .pipe($.livereload());
);

// Prism js task - combine the prismjs Javascript & config file into one bundle
gulp.task("prism-js", () => 
    $.fancyLog("-> Building prism.min.js...");
    return gulp.src(pkg.globs.prismJs)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.newer(dest: pkg.paths.build.js + "prism.min.js"))
        .pipe($.concat("prism.min.js"))
        .pipe($.uglify())
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.build.js));
);

// babel js task - transpile our Javascript into the build directory
gulp.task("js-babel", () => 
    $.fancyLog("-> Transpiling Javascript via Babel...");
    return gulp.src(pkg.globs.babelJs)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.newer(dest: pkg.paths.build.js))
        .pipe($.babel())
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.build.js));
);

// components - build .vue VueJS components
gulp.task("components", () => 
    $.fancyLog("-> Compiling Vue Components");
    return gulp.src(pkg.globs.components)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.newer(dest: pkg.paths.build.js, ext: ".js"))
        .pipe($.vueify())
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.build.js));
);

// inline js task - minimize the inline Javascript into _inlinejs in the templates path
gulp.task("js-inline", () => 
    $.fancyLog("-> Copying inline js");
    return gulp.src(pkg.globs.inlineJs)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.if(["*.js", "!*.min.js"],
            $.newer(dest: pkg.paths.templates + "_inlinejs", ext: ".min.js"),
            $.newer(dest: pkg.paths.templates + "_inlinejs")
        ))
        .pipe($.if(["*.js", "!*.min.js"],
            $.uglify()
        ))
        .pipe($.if(["*.js", "!*.min.js"],
            $.rename(suffix: ".min")
        ))
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.templates + "_inlinejs"))
        .pipe($.filter("**/*.js"))
        .pipe($.livereload());
);

// js task - minimize any distribution Javascript into the public js folder, and add our banner to it
gulp.task("js", ["js-inline", "js-babel", "prism-js"], () => 
    $.fancyLog("-> Building js");
    return gulp.src(pkg.globs.distJs)
        .pipe($.plumber(errorHandler: onError))
        .pipe($.if(["*.js", "!*.min.js"],
            $.newer(dest: pkg.paths.dist.js, ext: ".min.js"),
            $.newer(dest: pkg.paths.dist.js)
        ))
        .pipe($.if(["*.js", "!*.min.js"],
            $.uglify()
        ))
        .pipe($.if(["*.js", "!*.min.js"],
            $.rename(suffix: ".min")
        ))
        .pipe($.header(banner, pkg: pkg))
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.dist.js))
        .pipe($.filter("**/*.js"))
        .pipe($.livereload());
);

// Process data in an array synchronously, moving onto the n+1 item only after the nth item callback
function doSynchronousLoop(data, processData, done) {
    if (data.length > 0) 
        const loop = (data, i, processData, done) => 
            processData(data[i], i, () => 
                if (++i < data.length) 
                    loop(data, i, processData, done);
                 else 
                    done();
                
            );
        ;
        loop(data, 0, processData, done);
     else 
        done();
    
}

// Process the critical path CSS one at a time
function processCriticalCSS(element, i, callback) 
    const criticalSrc = pkg.urls.critical + element.url;
    const criticalDest = pkg.paths.templates + element.template + "_critical.min.css";

    let criticalWidth = 1200;
    let criticalHeight = 1200;
    if (element.template.indexOf("amp_") !== -1) 
        criticalWidth = 600;
        criticalHeight = 19200;
    
    $.fancyLog("-> Generating critical CSS: " + $.chalk.cyan(criticalSrc) + " -> " + $.chalk.magenta(criticalDest));
    $.critical.generate(
        src: criticalSrc,
        dest: criticalDest,
        inline: false,
        ignore: [],
        base: pkg.paths.dist.base,
        css: [
            pkg.paths.dist.css + pkg.vars.siteCssName,
        ],
        minify: true,
        width: criticalWidth,
        height: criticalHeight
    , (err, output) => 
        callback();
    );


//critical css task
gulp.task("criticalcss", ["css"], (callback) => 
    doSynchronousLoop(pkg.globs.critical, processCriticalCSS, () => 
        // all done
        callback();
    );
);

// Process the downloads one at a time
function processDownload(element, i, callback) 
    const downloadSrc = element.url;
    const downloadDest = element.dest;

    $.fancyLog("-> Downloading URL: " + $.chalk.cyan(downloadSrc) + " -> " + $.chalk.magenta(downloadDest));
    $.download(downloadSrc)
        .pipe(gulp.dest(downloadDest));
    callback();


// download task
gulp.task("download", (callback) => 
    doSynchronousLoop(pkg.globs.download, processDownload, () => 
        // all done
        callback();
    );
);

// Run pa11y accessibility tests on each template
function processAccessibility(element, i, callback) 
    const accessibilitySrc = pkg.urls.critical + element.url;
    const cliReporter = require('./node_modules/pa11y/reporter/cli.js');
    const options = 
        log: cliReporter,
        ignore:
                [
                    'notice',
                    'warning'
                ],
        ;
    const test = $.pa11y(options);

    $.fancyLog("-> Checking Accessibility for URL: " + $.chalk.cyan(accessibilitySrc));
    test.run(accessibilitySrc, (error, results) => 
        cliReporter.results(results, accessibilitySrc);
        callback();
    );


// accessibility task
gulp.task("a11y", (callback) => 
    doSynchronousLoop(pkg.globs.critical, processAccessibility, () => 
        // all done
        callback();
    );
);

//favicons-generate task
gulp.task("favicons-generate", () => 
    $.fancyLog("-> Generating favicons");
    return gulp.src(pkg.paths.favicon.src).pipe($.favicons(
        appName: pkg.name,
        appDescription: pkg.description,
        developerName: pkg.author,
        developerURL: pkg.urls.live,
        background: "#FFFFFF",
        path: pkg.paths.favicon.path,
        url: pkg.site_url,
        display: "standalone",
        orientation: "portrait",
        version: pkg.version,
        logging: false,
        online: false,
        html: pkg.paths.build.html + "favicons.html",
        replace: true,
        icons: 
            android: false, // Create Android homescreen icon. `boolean`
            appleIcon: true, // Create Apple touch icons. `boolean`
            appleStartup: false, // Create Apple startup images. `boolean`
            coast: true, // Create Opera Coast icon. `boolean`
            favicons: true, // Create regular favicons. `boolean`
            firefox: true, // Create Firefox OS icons. `boolean`
            opengraph: false, // Create Facebook OpenGraph image. `boolean`
            twitter: false, // Create Twitter Summary Card image. `boolean`
            windows: true, // Create Windows 8 tile icons. `boolean`
            yandex: true // Create Yandex browser icon. `boolean`
        
    )).pipe(gulp.dest(pkg.paths.favicon.dest));
);

//copy favicons task
gulp.task("favicons", ["favicons-generate"], () => 
    $.fancyLog("-> Copying favicon.ico");
    return gulp.src(pkg.globs.siteIcon)
        .pipe($.size(gzip: true, showFiles: true))
        .pipe(gulp.dest(pkg.paths.dist.base));
);

// imagemin task
gulp.task("imagemin", () => 
    return gulp.src(pkg.paths.dist.img + "**/*.png,jpg,jpeg,gif,svg")
        .pipe($.imagemin(
            progressive: true,
            interlaced: true,
            optimizationLevel: 7,
            svgoPlugins: [removeViewBox: false],
            verbose: true,
            use: []
        ))
        .pipe(gulp.dest(pkg.paths.dist.img));
);

//generate-fontello task
gulp.task("generate-fontello", () => 
    return gulp.src(pkg.paths.src.fontello + "config.json")
        .pipe($.fontello())
        .pipe($.print())
        .pipe(gulp.dest(pkg.paths.build.fontello))
);

//copy fonts task
gulp.task("fonts", ["generate-fontello"], () => 
    return gulp.src(pkg.globs.fonts)
        .pipe(gulp.dest(pkg.paths.dist.fonts));
);

// Default task
gulp.task("default", ["css", "js"], () => 
    $.livereload.listen();
    gulp.watch([pkg.paths.src.scss + "**/*.scss"], ["css"]);
    gulp.watch([pkg.paths.src.css + "**/*.css"], ["css"]);
    gulp.watch([pkg.paths.src.js + "**/*.js"], ["js"]);
    gulp.watch([pkg.paths.templates + "**/*.html,htm,twig"], () => 
        gulp.src(pkg.paths.templates)
            .pipe($.plumber(errorHandler: onError))
            .pipe($.livereload());
    );
);

// Production build
gulp.task("build", ["download", "default", "favicons", "imagemin", "fonts", "criticalcss"]);

    How Can We
    Help You?

    Performance and Simplicity exists side by side.

    Contact Pro Web Design and tell us about your next project and we will make sure it is successful. Let us do what we do best.

    1920 1080 Pro Web Design

    With “Quickstarter” projects, Kickstarter is going back to basics

    For years, the Kickstarter campaigns that have garnered the most attention have involved high-tech gizmos that rack up…

    read more
    1920 1080 Pro Web Design

    IPsoft’s digital worker is part of a shift in human productivity

    Emea Content Editor, Computer Weekly Human workers need to be ready to change how they work because artificial…

    read more

    Creatives – Design, Marketing, Support

    Working Hours: 08:00 – 17:00

    Email: contact[at]prowebdesign.co.za

    Phone: +27 76 260 2730

    We Love Your Feedback