Front-end templating Gulp & Grunt combo with Assemble

File structure.md

• dist
  • css
  • img
  • js
• src
  • css
  • html
    • data
    • layouts
    • pages
    • partials
      • components
      • global
      • modules
  • js
• gruntfile.js
• gulpfile.js
• package.json

gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        assemble : {
            options : {
                flatten : true,
                layout : 'src/html/layouts/master.hbs',
                partials : [
                    'src/html/partials/*.hbs',
                    'src/html/partials/components/*.hbs',
                    'src/html/partials/global/*.hbs',
                    'src/html/partials/modules/*.hbs'
                ],
                data: ['src/html/data/*.json']
            },
            pages : {
                src : ['src/html/pages/*.hbs'],
                dest : 'dist/'
            }
        },
        prettify: {
            options: {
                indent : 4,
                condense : true
            },
            all: {
                expand: true,
                cwd: 'dist/',
                ext: '.html',
                src: ['*.html'],
                dest: 'dist/'
            }
        }
    });

    grunt.loadNpmTasks('assemble');
    grunt.loadNpmTasks('grunt-prettify');
    grunt.registerTask('default', ['assemble', 'prettify']);
}

gulpfile.js

var gulp = {
        core            : require('gulp'),

        autoprefixer    : require('gulp-autoprefixer'),
        clean           : require('gulp-clean'),
        concat          : require('gulp-concat'),
        connect         : require('gulp-connect'),
        include         : require('gulp-include'),
        js_validate     : require('gulp-jsvalidate'),
        less            : require('gulp-less'),
        minify_css      : require('gulp-minify-css'),
        notify          : require('gulp-notify'),
        rename          : require('gulp-rename'),
        uglify          : require('gulp-uglify'),
        watch           : require('gulp-watch')
    },

    del = require('del');

require('gulp-grunt')(gulp.core);

var config = {
        server : {
            livereload  : true,
            root        : 'dist'
        }
    },

    // The sources for our tasks
    sources = {
        css : {
            dest    : 'dist/css/',
            src     : 'src/css/main.less',
            watch   : 'src/css/**/*.less'

        },
        html : {
            watch   : [
                'src/html/**/*.hbs',
                'src/html/**/*.json'
            ]
        },
        js : {
            dest    : 'dist/js/',
            src     : 'src/js/main.js',
            watch   : 'src/js/**/*.js'
        }
    };

/*
 * Clear out any old files
 */
gulp.core.task('clean', [], function() {
    del('dist/*');
});

/*
 * Just Build It!
 */
gulp.core.task('default', [
    'clean',
    'css',
    'js',
    'html'
]);

/*
 * Less to CSS
 */
gulp.core.task('css', [], function() {
    gulp.core.src(sources.css.src)
        .pipe(gulp.less())
        .pipe(gulp.autoprefixer())
        .pipe(gulp.core.dest(sources.css.dest))
        .pipe(gulp.minify_css())
        .pipe(gulp.rename({ suffix: '.min' }))
        .pipe(gulp.core.dest(sources.css.dest))
        .on('error', gulp.notify.onError(function(error) {
            return error.message;
        }))
        .pipe(gulp.connect.reload());
});

/*
 * HTML Templating
 * Hand this off to Assemble using Grunt
 */
gulp.core.task('html', ['grunt-assemble'], function() {
    gulp.connect.reload();
});

/*
 * JavaScript
 */
gulp.core.task('js', [], function() {
    gulp.core.src(sources.js.src)
        // Build our file includes
        .pipe(gulp.include())

        // Validate our JS first
        .pipe(gulp.js_validate())

        // Concatenate into 1 main file
        .pipe(gulp.concat('main.js'))

        // Write out the source
        .pipe(gulp.core.dest(sources.js.dest))

        // Minify
        .pipe(gulp.uglify())

        // Add a suffix for the minified source
        .pipe(gulp.rename({ suffix: '.min' }))

        // Write out the minified source
        .pipe(gulp.core.dest(sources.js.dest))

        // Catch any errors
        .on('error', gulp.notify.onError(function(error) {
            return error.message;
        }))

        // Trigger a live reload
        .pipe(gulp.connect.reload());
});

/*
 * A simple server that will watch for changes and live reload
 */
gulp.core.task('serve', ['default', 'watch'], function() {
    gulp.connect.server(config.server);
});

/*
 * Watch all of our task sources for changes
 */
gulp.core.task('watch', [], function() {
    for (index in sources) {
        source = sources[index];
        gulp.core.watch(source.watch, [index]);
    }
});

package.json

{
  "name": "Project Name",
  "version": "1.0.0",
  "description": "Website template",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git@example.com:foo/bar.git"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jon Park",
  "license": "MIT",
  "devDependencies": {
    "assemble": "^0.4.42",
    "connect": "^3.3.4",
    "del": "^1.1.1",
    "grunt": "^0.4.5",
    "grunt-prettify": "^0.4.0",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.4.3",
    "gulp-connect": "^2.2.0",
    "gulp-grunt": "^0.5.2",
    "gulp-include": "^1.1.1",
    "gulp-jsvalidate": "^1.0.1",
    "gulp-less": "^2.0.1",
    "gulp-minify-css": "^0.4.3",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.0",
    "gulp-uglify": "^1.1.0",
    "gulp-watch": "^4.1.0",
    "serve-static": "^1.8.1"
  }
}