Front End Build System [Part 2]
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 .min.css file.
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');
The next step is to minify our javascript files. For this I’m going to use a gulp plugin called gulp-uglify. It works just like our gulp sass function. Below is how to set the function up.
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, png|jpg|gif|svg
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.
