Grunt

The JavaScript Task Runner

Links

Home

Docs

Github

Features

• ~4400 plugins
• ~9500 Github stars
• First automation tool of such sort

Tons of plugins

Principles

Works with files

Config over code

Automate everything!

Easy start

npm install -g grunt-cli
npm install grunt --save-dev
                        

Example

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: { ... }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};
                        

Cons

Active developing freezed in 2014

Conclusion

Sometimes Grunt - is all you need to automate your development routine.
Easy start, reliable solutions, all this.
Do not expect a miracle from it though, in the end, it's just a beast.

Gulp

Automate and enhance your workflow

Links

Home

Docs

Github

Features

• ~1500 plugins
• ~13000 Github stars
• And yes, easy, efficient and high-quality
• ...task-runner

Principles

Streaming

Config agnostic

Atomic plugins

Easy start

npm install --global gulp
npm install --save-dev gulp
                        

Recipes

Example

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var DEST = 'build/';

gulp.task('default', function() {
  return gulp.src('foo.js')
    // This will output the non-minified version
    .pipe(gulp.dest(DEST))
    // This will minify and rename to foo.min.js
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(DEST));
});
                        

Heritage

Gulp of Grunt

Cons

?

Conclusion

If you need task-runner and love Grunt,
but prefer Code over Configuration
Gulp is definitely your cup of tea!

Brunch

Ultra-fast HTML5 build tool

Links

Home

Docs

Github

Competitors

Comparison table

Different by design

Features

• Scripts, templates, styles compilation and linting
• Common JS / AMD modules
• Source maps for concatenated files
• Minified output
• Watch for changes
• CLI

Easy start

npm install -g brunch
brunch new [skeleton-URL] [optional-output-dir]
brunch watch --server
                        

Skeletons

brunch new [skeleton-URL] [optional-output-dir]
# Example from GitHub
brunch new gh:brunch/dead-simple
# Example from a full URL
brunch new https://github.com/paulmillr/brunch-with-chaplin
                        

Skeleton list

Project structure

Typical config

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
      joinTo:
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(?!app)/

    stylesheets:
      joinTo: 'stylesheets/app.css'

    templates:
      joinTo: 'javascripts/app.js'
                        

Cons

• It is not just task-runner
• Questionable skeleton list
• Coffescript + jade intensively used

Conclusion

If you seem to be tired of Grunt and Gulp and crave for hipster tools to build your next project - take a look at Brunch!
It could become a long-term relationship.

Flexible, minimalistic, multi-platform static site generator built on top of node.js

Links

Home

Docs

Github

Features

• Simple directory structure
• Markdown support
• Browserify out of the box
• Plugin-based
• CLI

Easy start

npm install wintersmith -g
wintersmith new [project]

cd [project]
wintersmith preview
wintersmith build
					    

How it works

A wintersmith site is built up of three main components: contents, views and templates

Cons

• Coffescript everywhere
• More examples needed
• No assets optimisation

Conclusion

Wintersmith is definitely the right choice if you are into Coffescript, Jade and have some background with Jekyll.
It allows to build static site or simple blog, but requires some developing skills

Punch

Punch is a simple, intuitive web publishing framework that will delight both designers and developers

Links

Home

Docs

Github

Features

• Templates of your choice
• Markdown support
• Optional preprocessing (css/js)
• Easy publishing
• 1 config file
• CLI

Easy start

# Install Punch
npm install -g punch

# Create your site
punch setup mysite
                        

Cons

• Wiki: Lakshan Perera edited this page on 25 Sep 2012
• 2 boilerplates
• Short choice of plugins
• Poor community and support
• Integrated dev environment

Conclusion

Punch.io is nice tool to use for small sites or blogs, if you don't want to mess with Grunt or Gulp and other tech magic.

Best thing to do - use it "as is"

Assemble

Static site generator for Grunt.js, Yeoman and Node.js. Used by Zurb Foundation, Zurb Ink, H5BP/Effeckt, Less.js / lesscss.org, Topcoat, Web Experience Toolkit, and hundreds of other projects to build sites, themes, components, documentation, blogs and gh-pages.

Links

Home

Docs

Github

Features

• Great community and support
• Tons of plugins
• Grunt integration
• Gulp-style syntax
• Actively maintained
• Markdown support

Easy start

var assemble = require('assemble');
var less = require('gulp-less');

assemble.task('html', function() {
assemble.src('templates/*.hbs')
    .pipe(assemble.dest('dist/'));
});

assemble.task('default', ['html']);
                        

Cons

• Deep Handlebars addiction
• Still needed some modules
• Partial docs inconsistency
• Opinionated development
• (not so easy) Start

Conclusion

Assemble.io shows it's best in delivering documentation presentation using numbers of similar pages.
Having somehow different structure may lead to surprises in development.
Requires time to get into

Metalsmith

An extremely simple, pluggable static site generator.

Links

Home/Docs

Github

Features

• Vast community
• Great support
• JS API / CLI
• Great docs and examples
• Pluggable structure
• Tons of plugins

There is a Secret...

Victoria Secret

Metalsmith Secret

Since everything is a plugin, the core library is actually just an abstraction for manipulating a directory of files.

Easy start

npm install metalsmith
                        

Let's code...

...static site

{
  "metadata": {
    "title": "My Blog",
    "description": "My second, super-cool blog."
  },
  "plugins": {
    "metalsmith-markdown": {},
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-templates": {
      "engine": "handlebars"
    }
  }
}
								

...build tool

var async = require('async');
var Metalsmith = require('metalsmith');
var prompt = require('cli-prompt');
var render = require('consolidate').handlebars.render;

var metalsmith = Metalsmith(__dirname)
	.use(ask)
	.use(template)
	.build(function(err){
		if (err) throw err;
	});
								

Cons

• Pluggable structure
• Tons of plugins
• (not so easy) Start
• Questionable selection of tool

Origins

Metalsmith is brought to you by...

Segment

Conclusion

Great idea of atomic structure allows familiar piping pattern to generate a site... or build docs... or launch a rocket
In some ways, though, it could be considered an unnecessary complexity of some sort

Hexo

A fast, simple & powerful blog framework

Links

Home

Docs

Github

Features

• Blogger-ready solution
• One-command deploy to Github, Heroku,...
• Markdown/Octopress support
• Various plugins
• Themes support
• Great community and maintaining
• CLI

Easy start

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
                        

Support

Cons

Conclusion

Hexo is a right tool to use if you are totally aware of what you doing (blogging)

a build tool for modern web development

Links

Home/Docs

Github

Creator' Blog

Mimosa contro tutti

Mimosa vs Grunt / Gulp / Broccoli

Mimosa blows away the competition for
ease of use

The more time spent looking at config, the more time spent understanding it, and playing with it, then the less time is spent actually writing code.

Features

• Limits I/O, so It Is Fast (Mimosa reads and writes once)
• Module based (many of them)
• One config to rule them all
• Testing integration
• And...

User-friendliest CLI ever!

Easy start

Start Here

npm install -g mimosa
                        

Init project

mimosa new [applicationName]
                        

mimosa skel:list
skel:new [nameOfSkeleton] [directory]
                        

Or add Mimosa to existing app

exports.config = {
    "modules": []
}
                            

mimosa watch
                             

Cons

• Influenced by [frameworks]
• Complex structure
• Not for novices

Conclusion

Mimosa is the project, absolutely worth seeing and giving a try!
It is too complex for plain structured static sites, but definitely will shine in application development.

Extra

More from the author and maintainer:

Textract

Extracting text from files of various type including html, pdf, doc, docx, xls, xlsx, pptx, png, jpg, gif, rtf, text/*.

• ~450 Github stars
• ~400 downloads in the last month

The static web server with built-in preprocessing.

Harp serves Jade, Markdown, EJS, CoffeeScript, Sass, LESS and Stylus as HTML, CSS & JavaScript—no configuration necessary.

Links

Home

Docs

Github

Features

• CLI
• Auto preprocessing (focus on writing instead of wrangling)
• Familiar approach with Express
• Compile and deploy to GitHub, Heroku,...
• Use as asset pipeline

We

Want

Moar

Still out-of-box!

• Multihosting
• 404 page
• Basic authentication
• Nice and clear docs

Harp platform

Effortless web publishing through Dropbox

(Very) Easy start

npm install -g harp
harp init myproject
harp server myproject
                        

Welcome to Harp

Build!

harp compile
                        

Cons

• No "browser-sync"
• Custom preprocessing
• Choice limited to LESS, SASS, Stylus, Coffescript
• and EJS + Jade for templating

Conclusion

HarpJS is a solid ready-to-use solution for building/serving regular static sites.
It is also possible to use it as blogging platform
Do not expect something extraordinary though, it is perfect when used as intended.