Currently, I am focused on optimizing CSS minification through the use of gulp.
An issue arises when trying to debug CSS, as all stylesheets are contained within knx.dev.css. It is necessary to implement a solution that allows for easy tracing back to the original files where these styles have been generated from.
package.json
{
"main": "index.js",
"dependencies": {
"gulp": "^3.9.1"
},
"devDependencies": {
"gulp-bundle-files": "^1.9.5110",
"gulp-concat": "^2.6.1",
"gulp-cssmin": "^0.2.0",
"gulp-rename": "^1.2.2"
},
"scripts": {
"build": "gulp",
"start": "gulp dev_css"
}
}
Gulp task
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var css_file_list = [
//List of files];
gulp.task('default', function () {
gulp.src(css_file_list)
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(concat('knx.min.css'))
.pipe(gulp.dest('./'));
});
gulp.task('dev_css', function () {
gulp.src(css_file_list)
.pipe(concat('knx.dev.css'))
.pipe(gulp.dest('./'));
});