[
]
    • Home
    • Authors
    • Back to Graydient Creative

Front End Build System [Part 2]

by Miles Koller

[ Web Design & Development ]

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.

Share this:Share on FacebookTweet about this on TwitterShare on LinkedIn

Related

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Graydient Creative

© 2016 Graydient Creative

Back to Graydient