update build process, #4

.eleventy.js

@@ -1,13 +1,13 @@
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 const htmlMinifier = require('html-minifier')
 
-module.exports = function(config) {
+module.exports = function (config) {
     config.addPlugin(syntaxHighlight)
 
     config.addLayoutAlias('base', 'base.njk')
     config.addLayoutAlias('page', 'page.njk')
 
-    config.addFilter('mapNodes', function(nodes, radius, width, height) {
+    config.addFilter('mapNodes', function (nodes, radius, width, height) {
         return nodes.map((node, index) => {
             const angle = (index / (nodes.length / 2)) * Math.PI
             const x = radius * Math.cos(angle) + width / 2
@@ -22,7 +22,7 @@ module.exports = function(config) {
         })
     })
 
-    config.addTransform('htmlmin', function(content, outputPath) {
+    config.addTransform('htmlmin', function (content, outputPath) {
         if (outputPath.endsWith('.html')) {
             return htmlMinifier.minify(content, {
                 useShortDoctype: true,
@@ -43,7 +43,7 @@ module.exports = function(config) {
             layouts: 'layouts',
             data: 'data'
         },
-        templateFormats: ['njk', 'md', 'css'],
+        templateFormats: ['njk', 'md', '11ty.js'],
         htmlTemplateEngine: 'njk',
         markdownTemplateEngine: 'njk',
         passthroughFileCopy: true

_tasks/clean.js

@@ -1,4 +0,0 @@
-const gulp = require('gulp')
-const del = require('del')
-
-gulp.task('clean', del.bind(null, ['dist', 'functions'], { dot: true }))

_tasks/styles.js

@@ -1,13 +0,0 @@
-const gulp = require('gulp')
-const sass = require('gulp-sass')
-
-gulp.task('styles', function() {
-    return gulp
-        .src('./src/assets/styles/*.scss')
-        .pipe(
-            sass({
-                outputStyle: 'compressed'
-            }).on('error', sass.logError)
-        )
-        .pipe(gulp.dest('./dist/assets/styles'))
-})

_tasks/watch.js

@@ -1,7 +0,0 @@
-const gulp = require('gulp')
-/*
-  Watch folders for changess
-*/
-gulp.task('watch', function() {
-    gulp.watch('src/assets/styles/**/*.scss', gulp.series('styles'))
-})

gulpfile.js

@@ -1,6 +0,0 @@
-const gulp = require('gulp')
-
-require('require-dir')('./_tasks')
-
-gulp.task('build', gulp.series('clean', 'styles'))
-gulp.task('build:dev', gulp.series('build', 'watch'))

package.json

@@ -9,19 +9,18 @@
     "url": "http://github.com/maxboeck/webring"
   },
   "scripts": {
-    "start": "gulp build:dev & eleventy --serve",
-    "build": "gulp build && eleventy && yarn run build:lambda",
+    "start": "ELEVENTY_ENV=development eleventy --serve",
+    "build": "ELEVENTY_ENV=production eleventy && npm run build:lambda",
     "serve:lambda": "netlify-lambda serve _lambda",
     "build:lambda": "netlify-lambda build _lambda"
   },
   "dependencies": {
-    "@11ty/eleventy": "^0.8.2",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.0",
-    "del": "^3.0.0",
-    "gulp": "^4.0.0",
-    "gulp-sass": "^4.0.1",
-    "html-minifier": "^3.5.20",
-    "netlify-lambda": "^1.1.1",
-    "require-dir": "^1.2.0"
+    "@11ty/eleventy": "^0.11.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "clean-css": "^4.2.3",
+    "cssesc": "^3.0.0",
+    "html-minifier": "^4.0.0",
+    "netlify-lambda": "^1.6.3",
+    "node-sass": "^4.14.1"
   }
 }

src/assets/styles/styles.11ty.js

@@ -0,0 +1,118 @@
+const fs = require('fs')
+const path = require('path')
+const sass = require('node-sass')
+const CleanCSS = require('clean-css')
+const cssesc = require('cssesc')
+
+const isProd = process.env.ELEVENTY_ENV === 'production'
+
+// main entry point name
+const ENTRY_FILE_NAME = 'main.scss'
+
+module.exports = class {
+    async data() {
+        const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
+        return {
+            permalink: `/assets/styles/main.css`,
+            eleventyExcludeFromCollections: true,
+            entryPath
+        }
+    }
+
+    // Compile Sass to CSS,
+    // Embed Source Map in Development
+    async compile(config) {
+        return new Promise((resolve, reject) => {
+            if (!isProd) {
+                config.sourceMap = true
+                config.sourceMapEmbed = true
+                config.outputStyle = 'expanded'
+            }
+            return sass.render(config, (err, result) => {
+                if (err) {
+                    return reject(err)
+                }
+                resolve(result.css.toString())
+            })
+        })
+    }
+
+    // Minify & Optimize with CleanCSS in Production
+    async minify(css) {
+        return new Promise((resolve, reject) => {
+            if (!isProd) {
+                resolve(css)
+            }
+            const minified = new CleanCSS().minify(css)
+            if (!minified.styles) {
+                return reject(minified.error)
+            }
+            resolve(minified.styles)
+        })
+    }
+
+    // display an error overlay when CSS build fails.
+    // this brilliant idea is taken from Mike Riethmuller / Supermaya
+    // @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-scss.js
+    renderError(error) {
+        return `
+        /* Error compiling stylesheet */
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            font-family: monospace;
+            font-size: 1.25rem;
+            line-height:1.5;
+        } 
+        body::before { 
+            content: ''; 
+            background: #000;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.7;
+            position: fixed;
+        }
+        body::after { 
+            content: '${cssesc(error)}'; 
+            white-space: pre;
+            display: block;
+            top: 0; 
+            padding: 30px;
+            margin: 50px;
+            width: calc(100% - 100px);
+            color:#721c24;
+            background: #f8d7da;
+            border: solid 2px red;
+            position: fixed;
+        }`
+    }
+
+    // render the CSS file
+    async render({ entryPath }) {
+        try {
+            const css = await this.compile({ file: entryPath })
+            const result = await this.minify(css)
+            return result
+        } catch (err) {
+            // if things go wrong
+            if (isProd) {
+                // throw and abort in production
+                throw new Error(err)
+            } else {
+                // otherwise display the error overly
+                console.error(err)
+                const msg = err.formatted || err.message
+                return this.renderError(msg)
+            }
+        }
+    }
+}