For the minified changes to take effect, we now need a tool that replaces our style sheet references with our production-ready style sheets. Meet grunt-processhtml. Visit https://www.npmjs.com/package/grunt-processhtml for more.

Go ahead and install it using the following command:

    npm install grunt-processhtml --save-dev

Add grunt.loadNpmTasks('grunt-processhtml'); to our Gruntfile.js to enable our freshly installed tool.

While grunt-processhtml is very powerful, we will only cover how to replace style sheet references. Therefore, we recommend that you read the tool's documentation to discover further features.

In order to replace our style sheets with myphoto.min.css, we wrap them inside special grunt-processhtml comments:

    <!-- build:css styles/myphoto.min.css --> 
        <link rel="stylesheet" href="bower_components/bootstrap/
        dist/css/bootstrap.min.css" /> 
        <link href='https://fonts.googleapis.com/css?family=Poiret+One'
        rel='stylesheet' type='text/css'> 
        <link href='http://fonts.googleapis.com/css?family=Lato&
        subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
        <link rel="stylesheet" href="bower_components/Hover/css/
        hover-min.css" /> 
        <link rel="stylesheet" href="styles/myphoto.css" /> 
        <link rel="stylesheet" href="styles/alert.css" /> 
        <link rel="stylesheet" href="styles/carousel.css" /> 
        <link rel="stylesheet" href="styles/a11yhcm.css" /> 
        <link rel="stylesheet" href="bower_components/components-
        font-awesome/css/font-awesome.min.css" /> 
        <link rel="stylesheet" href="bower_components/lightbox-for
        -bootstrap/css/bootstrap.lightbox.css" /> 
        <link rel="stylesheet" href="bower_components/DataTables/
        media/css/dataTables.bootstrap.min.css" /> 
        <link rel="stylesheet" href="resources/animate/animate.min.css"  
        /> 
    <!-- /build --> 

Note how we reference the style sheet that is meant to replace the style sheets contained within the special comments on the first line, inside the comment:

    <!-- build:css styles/myphoto.min.css -->

Last but not least, add the following task:

"processhtml": { 
  "dist": { 
    "files": { 
      "dist/index.html": ["src/index.html"] 
     } 
   } 
}, 

Note how the output of our processhtml task will be written to dist. Test the newly configured task through the grunt processhtml command.

The task should execute without errors:

Open dist/index.html and observe how, instead of the 12 link tags, we only have one:

    <link rel="stylesheet" href="styles/myphoto.min.css"> 

Next, we need to reconfigure our uncss task to write its output to myphoto.min.css. To do so, simply replace the 'src/styles/output.css' output path with 'dist/styles/myphoto.min.css' inside our Gruntfile.js (note how myphoto.min.css will now be written to dist/styles as opposed to src/styles). We then need to add uncss to our list of watch tasks, taking care to insert the task into the list after cssmin:

"watch": { 
  "target": { 
     "files": ["src/styles/myphoto.css"], 
     "tasks": ["uncss", "cssmin", "processhtml"], 
     "options": { 
    "livereload": true 
   } 
  } 
} 

Next, we need to configure our cssmin task to use myphoto.min.css as input:

 "cssmin": { 
     "target": { 
         "files": { 
             "dist/styles/myphoto.min.css": 
             ["src/styles/myphoto.min.css"] 
         } 
     } 
 }, 

Note how we removed src/styles/*.min.css, which would have prevented cssmin from reading files ending with the min.css extension.

Running grunt watch and making a change to our myphoto.css file should now trigger the uncss task and then the cssmin task, resulting in console output indicating the successful execution of all tasks. This means that the console output should indicate that first uncss, cssmin, and then processhtml were successfully executed. Go ahead and check myphoto.min.css inside the dist folder. You should see how the following things were done:

• The CSS file contains an aggregation of all of our style sheets
• The CSS file is minified
• The CSS file contains no unused style rules

However, you will also note that the dist folder contains none of our assets—neither images nor Bower components, nor our custom JavaScript files. As such, you will be forced to copy any assets manually. Of course, this is less than ideal. So let's see how we can copy our assets to our dist folder automatically.