Nowadays most of web front-end projects need to be built for running on modern browsers. Three years ago I used to build a project with Ant once. But now we have Grunt and Gulp.
How do Grunt and Gulp work indeed? They both need some task definitions. Each task selects some files. Then one or more plugins are loaded. Each plugin converts files. Yeah, converting files, that's the KEY, AKA transforming files.
I define building projects as transforming files. There are two important principles:
- Source files cannot be modified
- Output files cannot mix with source files
So you have to set two variables: src and output, and they could not equal to each other. But, output can be under src.
Transforming a pile of files could be complicated. You can use a DAG(directed acyclic graph) to represent that, continuous or discontinuous.
E.g., a simple ES2015 node package project:
// index.js
import _ from 'lodash';
export {
extend: _.extend
};
Here is what we're going to do:
- Read index.js as
content - Using babel to transpile
contentto ES5 syntax - Using browserify to bundle, as
bundle - Write
bundleto output directory
Described by DAG:
Second example, an isomorphic javascript project:
And so on. Any building process can be defined by DAG.
Grunt could construct a DAG, but not so apparently. Gulp is much better:
var js = gulp.src('*.js');
js.pipe(babel(1)).pipe(browserify()).pipe(gulp.dest());
js.pipe(babel(2)).pipe(gulp.dest());
Panto works more clearly:
var js = panto.$('*.js').read();
js.babel(1).browserify().write();
js.babel(2).write();
Panto creates an internal DAG, and transforms files by DFS(Depth-First-Search) order. Look at the following graph:
The number on node indicates the order. That will be an extremely complicated building process! You cannot imagine how complicated your project will transform to.
See https://github.com/pantojs/panto for more detauils