tilt-assets

Tiny asset pipeline

Install

npm i tilt-assets -S

Usage

var pipeline = asset({
  dirs: 'test/assets/'
});

var server = http.createServer((req, res) => {
  console.log('Incoming request', req.url);

  if (/\.css$/.test(req.url)) return pipeline.handle(req, res);
  if (/\.js/.test(req.url)) return pipeline.handle(req, res);

  res.end('foo');
});

server.listen(3000);

Options

dirs Glob directory patters (must end with a "/". Default: app/assets/)
baseURL Base URL removed from the incoming request URL (Default: '/assets/')

Browserify

Browserify is the default handler for .js files.

You can further configure browserify transforms with a package.json browserify.transform field.

For instance, to configure browserify to compile into ES6, make sure you've installed the babelify transform and babel-preset-es2015.

"browserify": {
  "transform": [
    ["babelify", { "presets": "es2015" }]
  ]
}

Note: Presets and plugins need to be installed as separate modules.

Other browserify options can be configured using browserify field.

For instance, to add a source map to the end of the bundle:

"browserify": {
  "debug": true
}

PostCSS

PostCSS is the default handler for .css files.

You can configure PostCSS plugins with a package.json postcss.use field.

"postcss": {
  "use": ["autoprefixer", "cssnano"]
}

Plugin configuratons can be defined using plugin names as keys.

"postcss": {
  "use": ["autoprefixer", "cssnano"],

  "autoprefixer": {
    "browsers": "> 5%"
  },

  "cssnano": {
    "discardComments": false
  }
}

Note: PostCSS plugins need to be installed as separate modules. For the above example to work, you'd need to install autoprefixer and cssnano.

Additionnaly, other postcss configuration options can be specified using package.json postcss field.

For instance, to add a source map to the end of the file:

"postcss": {
  "map": true
}

API

Asset
- HTTP handler

Asset

new Asset.

var instance = new asset.Asset();
assert.ok(instance.options);
assert.ok(instance instanceof asset.Asset);
assert.equal(instance.dirs, 'app/assets/');

Compiles JS into ES6.

var stream = fs.createWriteStream('test/assets/main.output.js');
this.assets.browserify(path.join(__dirname, 'assets/main.js'), stream, (err) => {
  if (err) return done(err);
});
stream.on('finish', () => {
  fs.readFile(stream.path, 'utf8', (err, js) => {
    if (err) return done(err);
    assert.ok(/classCallCheck/.test(js));
    done();
  });
});

Compiles CSS using postcss / autoprefixer.

var stream = fs.createWriteStream('test/assets/main.output.css');
this.assets.postcss(path.join(__dirname, 'assets/main.css'), stream, (err) => {
  if (err) return done(err);
});
stream.on('finish', () => {
  fs.readFile(stream.path, 'utf8', (err, css) => {
    if (err) return done(err);
    assert.ok(/display: flex/.test(css));
    assert.ok(/display: -ms-flexbox;/.test(css));
    assert.ok(/display: -webkit-box;/.test(css));
    done();
  });
});

HTTP handler

Renders foo.

request(this.server)
  .get('/')
  .expect('foo')
  .end(done);

Renders js.

request(this.server)
  .get('/main.js')
  // Check basic output
  .expect(/return App/)
  // Check ES6 compilation
  .expect(/classCallCheck/)
  .end(done);

Renders css.

request(this.server)
  .get('/main.css')
  // Check basic output
  .expect(/display: flex/)
  // Check autoprefixer output
  .expect(/display: -ms-flexbox/)
  .expect(/display: -webkit-box/)
  .end(done);

mklabs / tilt-assets