tilt-assets
v0.0.2
Published
Asset pipeline request handler
Downloads
83
Readme
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
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);