Merge pull request #11 from lowmess/develop

Simplifies Build

README.md

@@ -68,6 +68,8 @@ npm i
 
 `npm run build` will build the resume site for you into the `_build` directory. Pretty straightforward.
 
+Oh yeah and `npm run build:minify` will build, umm, minified files. I'd recommend doing that before you deploy.
+
 ### Styling
 
 This project uses [Tachyons](http://tachyons.io) (with a few custom classes added in for good measure). All modules are included in the build, which is then run through a few performance-enhancing PostCSS plugins (PEPP'rd) like [UnCSS](https://github.com/giakki/uncss) & [cssnano](http://cssnano.co/). As of right now, all the loaded CSS is [~3kb](http://cssstats.com/stats?url=http%3A%2F%2Fmetalsmith-resume.lowmess.com&ua=Browser%20Default), and that's pretty damn cool.[1] 🤓
@@ -83,4 +85,4 @@ Contributions are welcome and encouraged:
 
 ***
 
-[1] For reference, this long-as-hell README is, like, almost five goddamn KBs. The whole generated site is [3.24kb gzipped](https://gtmetrix.com/reports/metalsmith-resume.lowmess.com/oQim8iPf).
+[1] For reference, this long-as-hell README is, like, almost five goddamn KBs. The whole generated site is [3.17kb minified & gzipped](https://gtmetrix.com/reports/metalsmith-resume.lowmess.com/1PRRzoBG).

build.js

@@ -1,13 +1,22 @@
+var fs = require('fs')
 // Metalsmith
 var Metalsmith = require('metalsmith')
 var permalinks = require('metalsmith-permalinks')
 var metadata = require('metalsmith-metadata')
 var collections = require('metalsmith-collections')
 var drafts = require('metalsmith-drafts')
 var defaults = require('metalsmith-default-values')
-// HTML
 var markdown = require('metalsmith-markdownit')
 var layouts = require('metalsmith-layouts')
+var minify = require('metalsmith-html-minifier')
+// PostCSS
+var postcss = require('postcss')
+// PDF
+var pdf = require('html-pdf')
+
+/*******************************************************************************
+ * Metalsmith
+ ******************************************************************************/
 
 var siteBuild = Metalsmith(__dirname)
   .source('source')
@@ -59,10 +68,92 @@ var siteBuild = Metalsmith(__dirname)
   }))
   .use(drafts())
 
+if (process.env.NODE_ENV == 'production') {
+  siteBuild.use(minify())
+}
+
 siteBuild.build(function (err) {
   if (err) {
     console.log(err)
   } else {
-    console.log('Site build complete!')
+    console.log('Metalsmith complete!\n')
   }
 })
+
+/*******************************************************************************
+ * PostCSS
+ ******************************************************************************/
+
+var css = fs.readFileSync('css/main.css', 'utf-8')
+
+var plugins = [
+    require('postcss-import'),
+    require('postcss-nested'),
+    require('postcss-custom-properties'),
+    require('postcss-custom-media'),
+    require('postcss-color-function'),
+    require('postcss-focus'),
+    require('autoprefixer')({
+      browsers: ['last 2 versions', '> 5%']
+    })
+  ]
+
+if (process.env.NODE_ENV == 'production') {
+  plugins.push(
+    require('postcss-uncss')({
+      html: ['_build/**/*.html']
+    }),
+    require('css-mqpacker'),
+    require('cssnano')
+  )
+}
+
+var styles = postcss(plugins)
+  .process(css, {
+    from: 'css/main.css',
+    to: '_build/css/main.css',
+    map: { inline: false }
+  })
+  .then(function (result) {
+    if (result.warnings()) {
+      result.warnings().forEach(warn => {
+        console.warn(warn.toString())
+      })
+    }
+    fs.mkdirSync('_build/css')
+    fs.writeFileSync('_build/css/main.css', result.css, 'utf-8')
+    if (result.map) fs.writeFileSync('_build/css/main.css.map', result.map, 'utf-8')
+    console.log('PostCSS Complete!\n')
+  })
+
+/*******************************************************************************
+ * PDF
+ ******************************************************************************/
+
+if (process.env.NODE_ENV === 'print') {
+  styles.then(function () {
+    var html = fs.readFileSync('_build/index.html', 'utf8')
+    var options = {
+        height: '11in',
+        width: '8.5in',
+        type: 'pdf',
+        base: 'http://localhost:8008'
+      }
+
+    var server = require('browser-sync').create()
+
+    server.init({
+      server: '_build',
+      port: 8008,
+      open: false,
+      ui: false
+    })
+
+    pdf.create(html, options).toFile('resume.pdf', function(err, res) {
+      if (err) return console.log(err)
+      server.exit()
+      console.log('\nPDF generation complete!\n')
+      process.exit()
+    })
+  })
+}

css/_list.css

@@ -7,25 +7,17 @@
 }
 
 @media (--breakpoint-not-small) {
-  .list-inside-ns {
-    list-style-position: inside;
-  }
+  .list-inside-ns { list-style-position: inside; }
 }
 
 @media (--breakpoint-medium) {
-  .list-inside-m {
-    list-style-position: inside;
-  }
+  .list-inside-m { list-style-position: inside; }
 }
 
 @media (--breakpoint-large) {
-  .list-inside-l {
-    list-style-position: inside;
-  }
+  .list-inside-l { list-style-position: inside; }
 }
 
 @media print {
-  .list-inside-p {
-    list-style-position: inside;
-  }
+  .list-inside-p { list-style-position: inside; }
 }

css/_vr-reset.css

@@ -1,9 +1,5 @@
 h1, h2, h3, h4, h5, h6, p, ul, ol, pre, table, blockquote, address {
-  &:first-child {
-    margin-top: 0;
-  }
+  &:first-child { margin-top: 0; }
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+  &:last-child { margin-bottom: 0; }
 }