ISTWCMS-4910: adding minify css

gulpfile.js

@@ -86,7 +86,7 @@ const lintStyles = () => {
 };
 
 const compileStyles = () => {
-  return src('*.scss', { cwd: './source' })
+  return src('styles.scss', { cwd: './source' })
     .pipe(sassGlob())
     .pipe(sourcemaps.init())
     .pipe(
@@ -103,9 +103,25 @@ const compileStyles = () => {
         }),
       ])
     )
-    .pipe(dest(cssSrc));
+    .pipe(dest(cssSrc))
 };
 
+const cleanCSS = require('gulp-clean-css');
+
+const minifyCSS = () => {
+  return src('styles.css', { cwd: cssSrc })
+    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(rename('styles.min.css'))
+    .pipe(dest(cssSrc));
+}
+
+const minifyLayoutsCSS = () => {
+  return src('uw-dashboards.css', { cwd: cssSrc })
+    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(rename('uw-dashboards.min.css'))
+    .pipe(dest(cssSrc));
+}
+
 const layoutsSrc = [
   path.join(__dirname, '/source/uw-dashboards.scss')
 ];
@@ -193,7 +209,7 @@ const watchFiles = () => {
 
 const buildComponentScripts = (exports.buildScripts = series(compileComponentScripts));
 
-const buildStyles = (exports.buildStyles = series(lintStyles, compileStyles, compileLayoutStyles));
+const buildStyles = (exports.buildStyles = series(lintStyles, compileStyles, minifyCSS, compileLayoutStyles, minifyLayoutsCSS));
 
 const build = (isProduction = true ) => {
   const scriptTask = isProduction ? bundleScripts : bundleScriptsDev;

package.json

@@ -34,8 +34,9 @@
     "eslint-plugin-prettier": "^3.1.1",
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
     "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.2",