Merge pull request linode#27 from abailly/DCL-61-prod-deplyment-setup

DLC-61 - ignore css bundle and better gulp setup

Author: Josh Sager

themes/dlc/.gitignore

@@ -1,4 +1,6 @@
 node_modules
 yarn-error.log
 .DS_Store
-/static/assets/cssinfo/
+/static/assets/css/main.css
+/static/assets/cssinfo/
+/styleguide

themes/dlc/gulpfile.js

@@ -9,6 +9,8 @@ const cssInfo = require('gulp-css-info');
 const cssnano = require('cssnano');
 const stylelint = require('stylelint');
 const reporter = require('postcss-reporter');
+const size = require('gulp-size');
+const notify = require('gulp-notify');
 
 const tailwind = 'tailwind.js';
 const mainCss = './srcCSS/main.css';
@@ -31,13 +33,13 @@ const plugins = [
   autoprefixer({
     browsers: ['last 2 versions', '> 2%']
   }),
-  // cssnano({
-  //   preset: ['none', {
-  //     discardComments: {
-  //         removeAll: true,
-  //     },
-  //   }]
-  // })
+  cssnano({
+    preset: ['default', {
+      discardComments: {
+          removeAll: true,
+      },
+    }]
+  })
 ];
 
 gulp.task('lint', () => {
@@ -56,6 +58,7 @@ gulp.task('cssInfo', () => {
 });
 
 gulp.task('compile', () => {
+  const s = size();
   return gulp.src(mainCss)
     .pipe(plumber())
     .pipe(postcss(plugins))
@@ -71,7 +74,32 @@ gulp.task('compile', () => {
         ]
       })
     )
-    .pipe(gulp.dest(output));
+    .pipe(gulp.dest(output))
+});
+
+gulp.task('size', () => {
+  const s = size();
+  return gulp.src(mainCss)
+    .pipe(plumber())
+    .pipe(postcss(plugins))
+    .pipe(
+      purgecss({
+        content: [baseThemeHtml, html],
+        whitelist: ['mobile-nav', 'active'],
+        extractors: [
+          {
+            extractor: TailwindExtractor,
+            extensions: ["html"]
+          }
+        ]
+      })
+    )
+    .pipe(s)
+    .pipe(notify({
+			onLast: true,
+      message: () =>
+      `Compiled!\nCSS bundle size: ${s.prettySize}`
+		}));
 });
 
 gulp.task('watch:css', () => {
@@ -90,5 +118,5 @@ gulp.task('watch:tailwind', () => {
   gulp.watch(tailwind, ['compile']);
 });
 
-gulp.task('default', ['lint', 'compile', 'cssInfo']);
+gulp.task('default', ['lint', 'compile', 'cssInfo', 'size']);
 gulp.task('watch', ['compile', 'watch:basecss', 'watch:css', 'watch:html', 'watch:tailwind']);

themes/dlc/package.json

@@ -8,13 +8,16 @@
         "glob": "^7.1.2",
         "gulp": "^3.9.1",
         "gulp-css-info": "^1.0.1",
+        "gulp-notify": "^3.2.0",
         "gulp-plumber": "^1.2.0",
         "gulp-postcss": "^7.0.1",
         "gulp-purgecss": "^1.0.0",
+        "gulp-size": "^3.0.0",
         "gulp-watch": "^5.0.0",
         "postcss": "^6.0.14",
         "postcss-easy-import": "^3.0.0",
         "postcss-reporter": "^5.0.0",
+        "react-patterns": "^3.0.7",
         "stylelint": "^9.3.0",
         "stylelint-config-standard": "^18.2.0",
         "tailwindcss": "^0.5.3"