Earlier I talked about what I use to help me build out the front end of a website/app here ( http://blog.graydientcreative.com/front-end-build-system/ ) . I had left off on creating a small app that compiles sass and implements a live reloading development and external server. This is perfect for development, but I want to take the app to the next step so that any front end matter is ready for production use.
The first step is to minimize my css files on the fly. To do this I’m going to use a gulp plugin called gulp-cssnano and minimize the css to a
Going back into the
package.json I can see that I’m using gulp-cssnano in my devDependencies
In order to take advantage I just need to pipe css nano after I initialize the source-maps, in the function below. The variable I need in the beginning of the gulpfile is
var cssnano = require('gulp-cssnano');
We just need to create the variable in the beginning of our gulpfile,
var uglify = require('gulp-uglify'); and the pump variable
var pump = require('pump'); , see more info on using pump
Our last step is to minify any images using gulp-imagemin.
imagemin will now go through the img folder and auto minify any images ending in,
This app now takes care of our assets and is ready to be used for production. All of our dependencies are listed in the
package.json , with any future plugins being added here. Everything can easily be installed by running
npm install in the this root location.