Add webpack, or npm install --save-dev refactor

An Update on a Refactor. Updated the site to go through a new build process, and cognitive reduction by removing Gulp, and the HTML templating setup (Pug/ formerly Jade). This aims to simplify the process of developing and contribution. Webpack coupled with various other plugins (see package.json) helped make the existing site a Progressive Web App (PWA). When I was performing the refactor of the codebase, I used audit scores from Lighthouse as a benchmark, and here we are. Not sure what the next post is, but I imagine it might be about removing Webpack, and using a completely native solution



git clone https://github.com/d-g-h/DACK.git
vagrant up

For building sites, for testing real world use, or testing real world use as closely as possible.


Best Practices for Ansible




Install and configure. Install more tools, and take deep dives when necessary.

Gulp Generated Static Site


This site is simple. It’s based on an easy-to-read and easy-to-write as is feasible language (markdown) to share information. It can be corrected, or duplicated, or replicated by anyone over at https://github.com/d-g-h/d-g-h.github.com

The dependencies are node(v5.1.0), and everything in package.json.


npm install

The idea here is to watch for file changes, and then recompile all related styles, scripts, and content.

      import path from 'path';
      import childProcess from 'child_process';
      import gulp from 'gulp';
      import browserSync from 'browser-sync';
      import gulpLoadPlugins from 'gulp-load-plugins';

      const $ = gulpLoadPlugins();
      const reload = browserSync.reload;
      const exec = childProcess.exec;
      const port = '8001';

      gulp.task('scripts', () => {
        return gulp.src('assets/js/src/**/*.js')
          .pipe($.changed('asset/js/dist', {extension: '.js'}))
          .pipe($.babel({stage: 1}))
          .pipe($.uglify({preserveComments: 'some'}))

      gulp.task('styles', () => {
          .pipe($.changed('.', {extension: '.sass'}))
            indentedSyntax: true,
            outputStyle: 'compressed',
            errLogToConsole: true,
            sourceComments: false
          .pipe(reload({stream: true}));

      gulp.task('csslint', () => {

      gulp.task('eslint', () => {
        gulp.src(['assets/js/src/*.js', 'gulpfile.babel.js'])

      gulp.task('exec', () => {
        exec('pa11y -s Section508 localhost:8001 --color', (err, stdout, stderr) => {

      gulp.task('indexJade', () => {
          .pipe($.changed('.', {extension: '.jade'}))
            pretty: true
          .pipe(reload({stream: true}));

       *Here let's create, and maintain the content in .content
       *Once, we are ready to go, we can feature it in the .template/index.jade,
       *and/or we can add a new directory (named after the title), and copy of
       *over the layout with specific .content that matches. The task below will
       *generate the .html in the same directory four times a year.

      gulp.task('postsJade', () => {
          .pipe($.tap( file => {
            let filename = path.basename(file.path);
            let dirname  = path.basename(path.dirname(file.path));
            return gulp.src(file.path)
              pretty: true,
              name: filename
            .pipe(gulp.dest('posts/' + dirname));
          .pipe(reload({stream: true}));

      gulp.task('resumeJade', () => {
            pretty: true
          .pipe(reload({stream: true}));

      gulp.task('browser-sync', () => {
          server: true,
          notify: false,
          ghostMode: {
            clicks: true,
            forms: true,
            scroll: true
          logConnections: true,
          open: false,
          port: port

      gulp.task('watch', () => {
        gulp.watch(['assets/**/*.js', 'gulpfile.babel.js'], { interval: 500 }, ['eslint', 'styles']);
          { interval: 500 },
        gulp.watch('assets/sass/**/*', { interval: 500 }, ['styles']);
        gulp.watch('style.css', { interval: 500 }, ['csslint']);

      // Default Task
      gulp.task('default', [