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
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.
Install globally with npm
npm i -g assemble@beta
Install locally with npm
npm i assemble@beta --save
Example 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('css', function () {
assemble.src('styles/*.less')
.pipe(less());
.pipe(assemble.dest('dist/assets/css'));
});
assemble.task('default', ['html', 'css']);
Generate HTML from templates. (Assemble automatically renders handlebars templates. Custom engines and plugins can also be used.)
var assemble = require('assemble');
assemble.task('default', function () {
assemble.src('templates/*.hbs')
.pipe(assemble.dest('dist'));
});
Run assemble from the command line to run the default task in your assemblefile.js.
Using a plugin
Use plugins to pre-process CSS (Assemble can run any gulp plugin):
var assemble = require('assemble');
var less = require('gulp-less');
assemble.task('css', function () {
assemble.src('styles/*.less')
.pipe(less());
.pipe(assemble.dest('dist/assets/css'));
});
assemble.task('default', ['css']);
Or, using an engine
Instead of a plugin you can register an engine, such as engine-less.
(Engines are run automatically on any files that have a file extension matching the name that you used when registering the engine.)
var assemble = require('assemble');
assemble.engine('less', require('engine-less'));
assemble.task('css', function () {
assemble.src('styles/*.less')
.pipe(assemble.dest('dist/assets/css'));
});
assemble.task('default', ['css']);
Add partials to be used in other templates.
assemble.partial('notice', { content: '<strong>...</strong>' });
assemble.partial('banner', { content: '/*! Copyright (c) 2014 Jon Schlinkert, Brian Woodward... */' });
// or load a glob of partials
assemble.partials('partials/*.hbs');
// optionally pass locals, all template types support this
assemble.partials('partials/*.hbs', {site: {title: 'Code Project'}});
Usage
Use the partial helper to inject into other templates:
{%= partial("banner") %}
Get a cached partial:
var banner = assemble.views.partials['banner'];
Add pages that might be rendered (really, any template is renderable, pages fit the part though)
assemble.page('toc.hbs', { content: 'Table of Contents...'});
// or load a glob of pages
assemble.pages('pages/*.hbs', {site: {title: 'Code Project'}});
Use the page helper to inject pages into other templates:
{%= page("toc") %}
Get a cached page:
var toc = assemble.views.pages['toc'];
Pages are renderable templates, so they also have a .render() method:
var toc = assemble.views.pages['toc'];
// async
toc.render({}, function(err, content) {
console.log(content);
});
// or sync
var res = toc.render();
Params
locals {Object}: Optionally pass locals as the first argcallback {Function}: If a callback is passed, the template will be rendered async, otherwise sync.Add layouts, which are used to "wrap" other templates:
assemble.layout('default', {content: [
'<!DOCTYPE html>',
' <html lang="en">',
' <head>',
' <meta charset="UTF-8">',
' <title>{%= title %}</title>',
' </head>',
' <body>',
' {% body %}', // `body` is the insertion point for another template
' </body>',
'</html>'
].join('\n')});
// or load a glob of layouts
assemble.layouts('layouts/*.hbs', {site: {title: 'Code Project'}});
Layouts may be use with any other template, including other layouts. Any level of nesting is also possible.
Body tags
Layouts use a body as the insertion point for other templates. The syntax assemble uses for the body tag is:
{% body %}
Admittedly, it's a strange syntax, but that's why we're using it. assemble shouldn't collide with templates that you might be using in your documentation.
Usage
Layouts can be defined in template locals:
// either of these work (one object or two)
assemble.page('toc.hbs', { content: 'Table of Contents...'}, { layout: 'default' });
assemble.partial('foo.hbs', { content: 'partial stuff', layout: 'block' });
Or in the front matter of a template. For example, here is how another layout would use our layout example from earlier:
// using this 'inline' template format to make it easy to see what's happening
// this could be loaded from a file too
assemble.layout('sidebar', {content: [
'---',
'layout: default',
'---',
'<div>',
' {% body %}',
'</div>'
].join('\n')});
Add helpers to be used in templates.
assemble.helper('read', function(filepath) {
return fs.readFileSync(filepath, 'utf8');
});
//=> {%= read("foo.txt") %}
Add engines for rendering templates templates.
assemble.engine('tmpl', require('engine-lodash'));
Load data to pass to templates.
Any of these work:
assemble.data({foo: 'bar'});
assemble.data('package.json');
assemble.data(['foo/*.{json,yml}']);
Install dev dependencies.
npm i -d && npm test
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue
Jon Schlinkert
Brian Woodward
Copyright (c) 2014-2015 Assemble
Copyright (c) 2014 Fractal contact@wearefractal.com (for completions and CLI)
Released under the MIT license
This file was generated by verb-cli on March 17, 2015.
FAQs
Get the rocks out of your socks! Assemble makes you fast at creating web projects. Assemble is used by thousands of projects for rapid prototyping, creating themes, scaffolds, boilerplates, e-books, UI components, API documentation, blogs, building websit
The npm package assemble receives a total of 3,877 weekly downloads. As such, assemble popularity was classified as popular.
We found that assemble demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.