Tobias Williams

How I complicated a simple tool.

There is nothing quite like making something simple, vastly more complicated. To this end I added build tools to this site.

Here is the Github repo with the code.

What I wanted to achieve:

• Write scss and compile this to css.
• Write modern js and run this through babel.
• Lint my scss and js.
• Use browsersync to refresh content and style changes

I am using NPM and NVM as I am familiar with it. Most of my needs were met through gulp and node packages. Here is the breakdown of the packages by the task that I used them for.

Compiling scss:

• sass
• gulp
• gulp-sass
• gulp-postcss
• gulp-cssnano
• browser-sync

Processing js:

• sourcemaps
• gulp-sourcemaps
• gulp
• gulp-babel
• browser-sync
• gulp-rename

Lint Scss:

• gulp-stylelint

Lint JS:

• gulp-eslint

For linting, there are a couple of extra configs. There is a eslintrc.json and stylelingrc.yml that provide the rules used for linting both scss and js.

Fun things that came up:

I approached these in the order that I have them here, not because it made the most sense, it absolutely didn't, but more because I was just trying to see what would work as it occured to me.

Compiling scss: Getting this working was actually pretty straight forward. I think that there is some work to be done in the gulp.js file to update it to be more gulp 4 friendly, but this went pretty smoothly.

The first thing I did was change the default file structure of eleventy to be something that I am more familiar with. I wanted my source files to be in the src directory and the compiled files in the dist file.

Eleventy comes with a unique file named eleventy.js that allows you to override some of the default settings. This is my current file:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/img");
    let markdownIt = require("markdown-it");
    let options = {
      html: true,
      breaks: true,
      linkify: true
    };
  eleventyConfig.setLibrary("md", markdownIt(options));
  return {
    dir: {
      input: 'src',
      output: 'dist'
    },
      markdownTemplateEngine: 'njk',
    }
}


So this has a few things in it, first the pass through, which just tells the site I need the images in the dist folder in a comparable location. So if I add an image to src/img it will be copied to dist/img.

Next is a markdown extenstion I installed to make writing in makrdown a little easier, described here.

Next we see the environment specifics that I want to use. I have redefined the default input and output to src and dist, to allow me to use the structure I am used to. Wooo. We are also declaring the templating language as nunchucks.

At this point I made a dev command to watch for changes, and I included the command from eleventy that serves the site (using their version of browsersync): eleventy --serv

This at first seemed to be working great, I was able to trace my src files through to the dist files. However I was not able to get css changes to auto reload. Refreshing the page worked for the changes, but that was not ideal.

I searched around the web, and didn't find a specific fix for my issue. I susepect that it might be possible to hook into eleventy's browsersync but I couldn't find any specifics on how I might go about this. I decided to look at adding browsersync myself. After installing the packages I updated my gulp tasks with the browser-sync code.

In the package.json I now call evelenty --watch vs serve. This allows eleventy to do it's regular check for changes to files it cares about but does not boot up a local server. The gulp file defines the browsersync tasks to ensure any changes to our js or scss now trigger an update.

Magic.