adgile/tasks/task-uncss.js

An easy-to-use automated front-end setup.

'use strict'

/**
 * A submodule for running the `adg build` task, 
 * responsible for removing any unused css styles from a project
 * @module task.uncss
 */

 const  settings    	= require('../settings.default'),
        helpers     	= require('../helpers/index'),
        globule         = require('globule'),
        gulp        	= require('gulp'),
        chalk       	= require('chalk'),
        path        	= require('path'),
        plugins     	= require('gulp-load-plugins')({
			config: path.join(__dirname, '../package.json')
        });

 /**
  * Check linked stylesheets in all exported html files and remove any unused CSS (Works only on HTML).
  * Replace old stylesheets with new ones. Output the file size difference to terminal.
  */
 function runTask() {
    helpers.updateBar('Removing unused CSS');
    helpers.verbose(chalk.grey('Running task "uncss-main"'));
    
    var templates = globule.find([config.export_templates + '/**/*.html']);

    return gulp.src(config.export_assets + '/' + settings.assetsFolder + '/css/*.css')
        .pipe(plugins.bytediff.start())
        .pipe(plugins.postcss([ require('postcss-uncss')({
            html:   templates || [],
            ignore: config.uncssIgnore || []
        }) ]))
        .pipe(plugins.bytediff.stop(data => {
            let difference = (data.savings > 0) ? ' smaller.' : ' larger.';
            
            data.percent = (data.percent*100).toFixed(2);
            data.savings = (data.savings/1024).toFixed(2);

            return chalk.grey('"' + data.fileName + '" is now ') + chalk.green(data.percent + '%' + difference) + chalk.grey(' (saved ' + data.savings + 'KB)');
        }))
        .pipe(gulp.dest(config.export_assets + '/' + settings.assetsFolder + '/css'));
 }

 module.exports = {
     runTask
 }