Code Snippets

Use Gulp, Autoprefixer and UNCSS to clean up your CSS and reduce DOM page load time. | css

This gulp script requires the appropriate node modules installed.

If you run gulp and it says you need a module, just install it. I am listing the ones I think are needed below in the comments.

The example gulpfile.js is in the code. Notice you specify a list of URLs for it to check to make sure you capture every possible selector.

Note - pages which the scraper can't reach - browse to them live and save the source as HTML files, as you can see with homepage.html below for example.

// // npm install gulp --save-dev
// // npm install gulp-autoprefixer --save-dev
// // npm install gulp-cssnano --save-dev
// // npm install postcss-uncss uncss --save-dev

// // then, just run GULP from the command line in your folder

// ///// < GULPFILE.JS BELOW > /////

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
// //var uncss = require('gulp-uncss');
var uncss = require('postcss-uncss');

gulp.task('default', function () {
    var plugins = [

            html: [
                // // '',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //',
                'https:// //'

// // what a mess I made of this trying to stop it killing certain bootstrap styles
            ignore: ['#navbarDropdownMenuLink', '#navbarNavDropdown', '(*.)dropdown(.*)', '*dropdown*', '.dropdown', '.dropdown-menu', '.dropdown-item', '.typeahead', '.nav-link', '.dropdown-toggle', '.show', '\.(.*)toggle', '(.*)\.(.*)dropdown', '(.*):hover', 'navbar', '', '.nav-', '.showitem', '.tooltip', '.tooltip:hover', '.tooltip(.*)', '.bs-tooltip', 'bs-tooltip:hover', 'bs-tooltip(.*)', 'bs-tooltip', 'tooltip', '.text-danger', '.bg-light', '.text-success']
        autoprefixer({browsers: ['last 1 version']}),
    return gulp.src('css/kit2.css')

Published: Sun 14th January 2018
||COMMENTS|| This site proudly uses PrismJS to display code snippets

If you like this page, please share it.

Code Links - PHP, JS, CSS, Bootstrap, Bash, Emmet, IntelliJ, Sublime etc.

My personal list of links which I keep here publicly incase they help someone else one day.

Code Snippets

Snippets of PHP code I have gathered over the years. I keep them here for my own repository but also to share with others. I always link back when I remember the source.

My Github Repos

A work in progress. I am going to make as many modules that I write in my devbox public as possible.

Kit's Homepage

This site was originally intended as a test bed for code. It now includes my blog about business and powerlifting, as well as games for Spanish language learning

© 2018