Support for HTML/CSS/JS preprocessors

feature
11

+1 Bring your own build system.

Example Gruntfile adapted from a blog post:

module.exports = function(grunt) {
  'use strict';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    shell: {
      hugo: {
        command: function(target) {
          if (target === 'dev') {
            return 'hugo --baseUrl=http://127.0.0.1 --buildDrafts=true --buildFuture=true --source=site --destination=../build/dev';
          } else {
            return 'hugo --source=site --destination=../build/dist';
          }
        }
      }
    },

    connect: {
      dev: {
        options: {
          hostname: '127.0.0.1',
          port: '80',
          protocol: 'http',
          base: 'build/dev',
          livereload: true
        }
      }
    },

    sass: {
      dev: {
        options: {
          sourceMap: true
        },
        files: {
          'css/styles.css': 'scss/styles.scss'
        }
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: '<% sass.dev.files %>'
      }
    },

    jshint: {
      files: ['Gruntfile.js', 'js/**/*.js', '!js/vendor/*.js'],
      options: {
        reporter: require('jshint-stylish'),
        force: true,
        globals: {
          jQuery: true
        }
      }
    },

    watch: {
      options: {
        livereload: true
      },
      site: {
        files: ['site/**/*'],
        tasks: ['shell:hugo:dev']
      },
      js: {
        files: ['<%= jshint.files %>'],
        tasks: ['newer:jshint', 'shell:hugo:dev']
      },
      sass: {
        files: ['scss/**/*.scss'],
        tasks: ['sass:dev', 'shell:hugo:dev']
      }
    }
  });

  require('load-grunt-tasks')(grunt);

  grunt.registerTask('default', ['connect:dev', 'jshint', 'sass:dev', 'shell:hugo:dev', 'watch']);
  grunt.registerTask('build', ['jshint', 'sass:dist', 'shell:hugo']);

};
1 Like