Removing unused css, and minification to one file

This guide assumes that you've already downloaded, and installed node,npm, and all respective dependencies

  • 1). Setup

    • Launch node command prompt, and navigate to the target's root directory

    • cd /dC:/navigate/to-the-root/

    2). Install Grunt CLI ( command line interface ) gobally

    • Its not necessary to be in the root directory to install Grunt CLI. Because we are going to install it gobally with the following command

    • npm install -g grunt-cli

    3). Install Grunt locally

    • This step DOES require you to be in the root directory

    • npm install grunt --save-dev

    4). Install uncss and cssmin locally

    • This step DOES require you to be in the root directory

    • npm install grunt-uncss grunt-contrib-cssmin --save-dev

    5). Prepare your gruntFile.js & run grunt in the CLI

    • This step can be done at any point, but is required before entering the grunt command

    • npm install grunt-uncss grunt-contrib-cssmin --save-dev
      Preview example gruntFile.js
      module.exports = function (grunt) {
      
          grunt.initConfig({
              uncss: {
                  dist: {
                      files: [
                          { src: 'src/index.html', dest: 'dist/assets/css/app.min.css' }
                      ]
                  }
              },
              cssmin: {
                  dist: {
                      files: [
                          { src: 'dist/assets/css/app.min.css', dest: 'dist/assets/css/app.min.css' }
                      ]
                  }
              }
          });
      
          // Load the plugins
          grunt.loadNpmTasks('grunt-uncss');
          grunt.loadNpmTasks('grunt-contrib-cssmin');
      
          // Default tasks.
          grunt.registerTask('default', ['uncss', 'cssmin']);
      
      };