Run! Build! Generate!

Javascript tools overview

What's this all about?

Expectations

Reality

What it is not about?

This

And this

Let's get started!

Task runners

and something more

Grunt

The JavaScript Task Runner

Features

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

Tons of plugins

like, literally

Principles

Works with files

Config over code

Automate everything!

Easy start

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

Example

Gruntfile.js

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

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

Example

gulpfile.js

'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

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

config.coffee

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.

Asset pipeline

Features

Concat/minify CSS/JS
Preprocessing
MD5 fingerprint

RoR Guide

Mincer

JS port of Sprockets by Nodeca

(not real logo)

Sprockets

(not real logo)

Sprockets

Sprockets is a Ruby library for compiling and serving web assets. It features declarative dependency management for JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows you to write assets in languages like CoffeeScript, Sass, SCSS and LESS.

Check out Middleman for examples and docs

Mincer

Declarative dependency management
Supports CoffeeScript, LESS, Stylus, ...
Sourcemaps support
Macros support (nice alternative to EJS)

Using via CLI

$ mincer --include assets/javascripts \
         --include assets/stylesheets \
         --output public/assets \
         application.js application.css

Serving over HTTP

var connect = require('connect');
var Mincer  = require('mincer');

var environment = new Mincer.Environment();
environment.appendPath('app/assets/javascripts');
environment.appendPath('app/assets/stylesheets');

var app = connect();
app.use('/assets', Mincer.createServer(environment));
app.use(function (req, res) {
    // your application here...
});

Program access

var asset = environment.findAsset('application.js');

asset.toString(); // resulting contents
asset.length;     // length in bytes
asset.mtime;      // last modified time
asset.pathname;   // full path on the filesystem

Conclusion

Mincer is truly a gift to all Ruby fans! For all non-familiar-with-Ruby developers though it may provide a tough experience

Broccoli

Broccoli.js – The asset pipeline for ambitious applications.

Features

Less code is more
Use separately or on it's own
Fast! (cuz, um... trees)
Plugin ecosystem

Easy start

npm install --save-dev broccoli
npm install --global broccoli-cli

Brocfile.js

var concat = require('broccoli-concat'),
pickFiles = require('broccoli-static-compiler'),
mergeTrees = require('broccoli-merge-trees');

// concat the JS
var scripts = concat('app/', {
inputFiles: ['**/*.js'],
outputFile: '/assets/scripts.js'
});

// concat the CSS
var styles = concat('app/styles', {
inputFiles: ['**/*.css'],
outputFile: '/assets/styles.css'
});

Brocfile.js (continued)

// grap any static assets
var public = pickFiles('public', {
srcDir: '.',
destDir: '.'
});

// and merge all the trees together
module.exports = mergeTrees([scripts, styles, public]);

Broccoli defines a single plugin API: a tree

A tree object represents a tree (directory hierarchy) of files that will be regenerated on each build

Cons

It is still beta
Windows support is buggy
Low community support
Lack of documentation so far

Conclusion

Inspired by Rails asset pipeline, Broccoli offers backend-agnostic functionality with NodeJS If you need for speed (perhaps on complex project), you should give it a try!

Make/Rake/Jake/Cake

Sowwwy!

Build systems / Generators

staticgen.com

JS-based generators only!

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

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

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.

Features

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

Easy start

assemblefile.js

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

(not real logo)

An extremely simple, pluggable static site generator.

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

metalsmith.json

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

...build tool

build.js

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

Github

Homepage

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

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

https://hexo.io/docs/generating.html

Cons

After all these years

Hexo is still incapable

of making Shepherd's pie

Conclusion

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

There's more!

(blogging generators)

Hubpress.io

Wheat

Poet

Simple

Cabin

There's less!

(due to maintaining reasons)

Hubpress.io

Wheat

Poet

Simple

Cabin

a build tool for modern web development

Mimosa contro tutti

Mimosa vs Grunt / Gulp / Broccoli

Mimosa blows away the competition forease 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

Create mimosa-config.js

Tweak the config

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

Enjoy!

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

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.

Features

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

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

./myproject

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.

Let's talk about

Specials

Nothing wrong with these guys, they just don't quite fit the categories

Yeoman

The Web's scaffolding tool for modern webapps

What the Yo?

What is NOT

a task-runner instead - it utilizes the power of Grunt and Gulp!

a one-framework solution the direction of development implies multiple framework support

Features

All-in-one solution for scaffolding
Great docs and support
Write your own generator
Or pick one for your needs (~1700)

Top 10 popular generators

Easy start

Prerequisites

npm install -g yo bower grunt-cli gulp

Via generator

npm install -g generator-webapp
yo webapp [--param]

Awesome CLI

(only used on project init)

Gulp/Grunt/Whatever

Gulp

yo webapp
gulp serve
gulp test
gulp

Grunt

yo webapp
grunt serve
grunt test
grunt

Cons

Opinionated structure
Heavy usage causes yo-addiction (use with care)

Conclusion

Yeoman is a brilliant tool for starters, digging into the webapp development world. On the other hand, yo keeps you away from scaffolding, offering opinionated structure from the very start.

Mixture

A rapid front-end development toolset for Mac & Windows. Focus on the build not the setup.

Can I haz Github?

Features

Boilerplates - Bootstrap, Foundation & Sassaprilla
Preprocessing
Multi-device testing
Publishing to Github and Amazon
Integratable into workflow (simple mode)
...and all this

Is the App!

Easy start

What you get?

All processes happen in the blackbox

Preprocessing, templating, building, minification, combining, optimisation, linting, data processing, ...

So...

Cons

Low control over environment
Opinionated structure
Questionable support

Conclusion

Mixture offers all-in-one suite application for modern approach to static sites development It will never bother you with Grunt-Gulp-Webpack-Browserification. Swift start for non-developers!

Wrapping up

Thank you!

Questions?

Run! Build! Generate! Javascript tools overview

Run! Build! Generate! – Javascript tools overview – Grunt

XOP

Run! Build! Generate! – Javascript tools overview – Grunt

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();