Gulp Concat and Minify CSS

Gulp Concat and Minify CSS

First we need to create a manifest.json file which will have list of all css/js files in it. we create manifiest.json file to show different files on pages as per environment. Like in local/Dev we need to show all different css and for production we will contact and merge all css to show on page.

By using gulp we can automate this process like

var gulp = require('gulp'),
    concatCss = require('gulp-concat-css'),
    minifyCSS = require('gulp-minify-css');

gulp.task("copy-css", function(){
    var manifestFile = './manifest.json',
        json = JSON.parse(fs.readFileSync(manifestFile)),
        links = json.links;

    gulp.src(links)
        .pipe(concatCss("style.css"))
        .pipe(gulp.dest("build"));
    
    gulp.src(links)
        .pipe(concatCss("style.min.css"))
        .pipe(minifyCSS())
        .pipe(gulp.dest("build"));
});

First we need to installed required gulp modules using npm and then the about gulp task will read the manifest.json file anc create two version of css in build folder, One is .min and another is simple. which we will include in pages. here manifest.json template is like

{
    "links" : [
	"css/style.css"
    ]
}