Development/Test/Production build process

tips & tricks
1

I like to use un-minimized CSS and JavaScript files on my development box, then switch over to the minimized version when I deploy.

My workaround is to use two config files, config.local.toml and config.deploy.toml. The local version sets usemin = true. The partial that puts in the links to the CSS and JavaScript tests the variable and includes either the full package or the minimized version.

When I’m working local, my wrapper around Hugo uses --config=config.local.toml.

The wrapper to deploy deletes the public/ directory, runs Hugo to rebuild the site with --config=config.deploy.toml, then pushes the site.

I don’t think that this is the perfect solution, but it works well because Hugo is so dang fast.

2

I’d been using Compass, but I recently got sick of having five scripts in the header and decided to go with Gulp to handle file concatenation / SASS compilation. I keep a src directory in my theme with uncompressed SASS/JS that I ship out to the static folder.

I liked Compass, but Gulp is just way more versatile, if a little more codey. Here’s what I’m using on my current project.

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    minifyCss = require('gulp-minify-css');

gulp.task('sass', function() {
  console.log('Building and minifying styles.css...');
  gulp.src('./src/sass/styles.scss')
      .pipe(sass())
      .pipe(minifyCss())
      .pipe(gulp.dest('./static/css/'));
});

gulp.task('js', function() {
  console.log('Building and minifying offstage.js...');
  gulp.src(
    [
      './src/js/jquery-2.1.1.min.js',
      './src/js/jquery.bootstrap.js',
      './src/js/jquery.stellar.min.js',
      './src/js/jquery.waypoints.min.js',
      './src/js/offstage.js'
    ]
  )
      .pipe(concat('offstage.js'))
      .pipe(uglify({mangle:false}))
      .pipe(gulp.dest('static/js/'));
});

If I were so inclined (not really for this project, there isn’t really any heavy JS lifting going on, but I have done it for others), I’d write another gulp task to send the concatenated but unminified JS to the static folder if I needed to do debugging.

I really like Node and JS, so it’s a good solution for me.

3

How does that work with deployment? Do you develop/unit test against the original or the minified sources?

4

If I’m doing something non-trivial (there’s maybe like 30 lines of custom code here), I have js ‘build’ and js ‘dist’ tasks, the first concatenating into a single file, and the latter concatenating and uglifying for deployment. I’ve run into a handful of problems with minified code behaving differently—maybe once or twice—but it’s nothing that hasn’t been fixed by turning off mangling.

I’m afraid I can’t comment helpfully re: unit testing. I’m right out of college and we never covered it, though we definitely should have. It’s something I’m trying to get into the swing of.