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.
Visit the website →
Why use Assemble?
- Most popular site generator for Grunt.js and Yeoman. Assemble is used to build hundreds of web projects, ranging in size from a single page to 14,000 pages (that we're aware of!). Let us know if you use Assemble.
- Allows you to carve your HTML up into reusable fragments: partials, includes, sections, snippets... Whatever you prefer to call them, Assemble does that.
- Optionally use
layouts
to wrap your pages with commonly used elements and content. - "Pages" can either be defined as HTML/templates, JSON or YAML, or directly inside the Gruntfile.
- It's awesome. Lol just kidding. But seriously, Assemble... is... awesome! and it's fun to use.
The "assemble" task
Getting Started
~0.4.1
npm install assemble --save-dev
grunt.loadNpmTasks('assemble');
The "assemble" task
grunt assemble
command.assemble
to the data object passed into grunt.initConfig()
.assemble: {
options: {
assets: 'assets',
plugins: ['permalinks'],
partials: ['includes/**/*.hbs'],
layout: ['layouts/default.hbs'],
data: ['data/*.{json,yml}']
},
site: {
src: ['docs/*.hbs'],
dest: './'
}
},
Options
assets
String
Default: undefined
{{assets}}
variable to resolve the relative path from the dest file to the assets folder.data
String|Array|Object
Default: src/data
JSON
, YAML
, YAML front matter, or passed directly as an object. Wildcard patterns may also be used.layoutdir
String
Default: undefined
layout
String
Default: undefined
layoutext
String
Default: undefined
---
layout: default
---
partials
String|Array
Default: undefined
plugins
String|Array
Default: undefined
helpers
String|Array
Default: handlebars-helpersext
String
Default: .html
marked
Object
Default: Marked.js defaults{{#markdown}}{{/markdown}}
and {{md ""}}
helpers to use when converting content.engine
String
Default: Handlebars
flatten
Boolean
Default: false
.
in the destination path, then append this value. In other words, when files are generated from different source folders this "flattens" them into the same destination directory. See building the files object dynamically for more information on files
formats.Usage Examples
.json
and .yml
format to build Handlebars templates.assemble: {
options: {
data: 'src/data/**/*.{json,yml}'
},
docs: {
files: {
'dist/': ['src/templates/**/*.hbs']
}
}
}
Using multiple targets
assemble: {
options: {
assets: 'assets',
layoutdir: 'docs/layouts'
partials: ['docs/includes/**/*.hbs'],
data: ['docs/data/**/*.{json,yml}']
},
site: {
options: {
layout: 'default.hbs'
},
src: ['templates/site/*.hbs'],
dest: './'
},
blog: {
options: {
layout: 'blog-layout.hbs'
},
src: ['templates/blog/*.hbs'],
dest: 'articles/'
},
docs: {
options: {
layout: 'docs-layout.hbs'
},
src: ['templates/docs/*.hbs'],
dest: 'docs/'
}
},
Contributing
Assemble plugins
- assemble-middleware-anchors: Assemble middleware for creating anchor tags from generated html.
- assemble-middleware-contextual: Assemble middleware for generating a JSON file containing the context of each page. Basic middleware to help see what's happening in the build.
-
assemble-middleware-decompress: Assemble plugin for extracting zip, tar and tar.gz archives.
- assemble-middleware-download: Assemble middleware for downloading files from GitHub.
- assemble-middleware-drafts: Assemble middleware (v0.5.0) for preventing drafts from being rendered.
- assemble-middleware-i18n: Assemble middleware for adding i18n support to projects.
- assemble-middleware-lunr: Assemble middleware for creating a search engine within your static site using lunr.js.
- assemble-middleware-permalinks: Permalinks middleware for Assemble, the static site generator for Grunt.js and Yeoman. This plugin enables powerful and configurable URI replacement patterns, presets, uses Moment.js for parsing dates, and much more.
- assemble-middleware-rss: Assemble middleware for creating RSS feeds with Assemble. (NOT published yet!)
- assemble-middleware-sitemap: Assemble middleware for generating sitemaps.
- assemble-middleware-toc: Assemble middleware for creating a table of contents in the generated HTML, using Cheerio.js
-
assemble-middleware-wordcount: Assemble middleware for displaying a word-count, and estimated reading time on blog posts or pages.
Authors
assemble
Looking for the grunt plugin? Please visit grunt-assemble.
(Note that the current website assemble.io, is for grunt-assemble. Thanks for your patience while we work on updating the site with documentation for the latest assemble).
Overview
(Click the following sections to expand them)
Table of contents
What is Assemble?
Who uses assemble?
Why should I use assemble?
What can I do with Assemble?
Rapid development toolkit
Features
Quickstart
Installing assemble
Add assemble your project's devDependencies
using npm:
$ npm install -D assemble
You should now be able to run assemble directly (using node assemblefile.js
etc) or using npm
scripts. For example, add the following to package.json:
{
"scripts": {
"build": "assemble"
}
}
Then run
$ npm run build
Installing assemble's CLI
You can also assemble's CLI globally, which adds the assemble
command to your system path, allowing it to be run from any directory.
$ npm install --global assemble
Note that even if assemble is installed globally, it's good practice to install it locally in every project to ensure that your projects are protected against any potentially breaking changes that might occur in assemble between development cycles.
assemblefile.js
To use assemble's CLI, you'll need to add an assemblefile.js
to your project. The fastest way to do this is to run the following command:
$ assemble
If no assemblefile.js
exists in the current
project, assemble will ask if you want to add one. If you answer yes,
assemble will then generate a basic assembfile.js
for you.
CLI
Run assemble from the command line.
$ assemble <tasks> [options]
Running tasks
Specify one or more space-separated tasks to run.
Examples
Run task foo
$ assemble foo
Run tasks foo
and bar
$ assemble foo bar
Specifying options
Non-task options are prefixed with --
.
Examples
Set the --cwd
to run an assemblefile.js in a different directory:
$ assemble --cwd=docs
Emit views as they're loaded and log them to stderr
:
$ assemble --emit=view
See more [command line options](#command line options)
Object expansion
Object-paths may be specified using dot-notation for either the key or value in a command line argument.
Additionally, assemble uses expand-object (and some custom parsing) to make it easier to pass non-trivial options and commands via command line. So all of the following formats are possible.
Examples
Boolean values:
$ assemble --foo
# { foo: true }
Key-value pairs:
$ assemble --foo=bar
# { foo: 'bar' }
Nested booleans:
$ assemble --option=foo
# {options: { foo: true }}
Nested key-value pairs:
$ assemble --option=foo:bar
# {options: { foo: 'bar' }}
Deeply nested key-value pairs:
$ assemble --option=foo.bar.baz:qux
# {options: foo: { bar: { baz: 'qux' }}}}
Or on the left-side of the =
:
$ assemble --option.foo.bar.baz=qux
# {options: foo: { bar: { baz: 'qux' }}}}
Command line options
cwd
Change the cwd
for the assemblefile.js
to run, optionally specifying any tasks to run:
$ assemble <tasks> --cwd [directory]
Example
To run the scaffolds
example in the examples/
directory, you would enter:
$ assemble --cwd examples/scaffolds
If successful, in the command line, you should see something like this:
file
Specify the name of the config file for assemble's CLI to run, the default is assemblefile.js
.
Example
$ assemble --file assemblefile.dev.js
from https://github.com/assemble/assemble
------
Assemble 是一个使用 Node.js,Grunt.js,Gulp,Yeoman 等来实现的静态网页生成系统。已被 Zurb Foundation, Zurb Ink, H5BP/Effeckt, Less.js/lesscss.org, Topcoat, Web Experience Toolkit 等数百个项目用来生成项目网站、主题、组件、文档、博客和 github 页面。
grunt 生态系统下的一个新玩具,前端工程师们可以没事捣鼓捣鼓。
(Assemble 是一个强大的静态网站生成器(SSG),旨在简化静态网站的创建和管理过程。它是由 Assemble.io 团队开发和维护的,提供了一套丰富的工具和功能,使开发者能够轻松构建、组织和发布静态网站。
需要注意的是,Assemble 是一个相对较早期的静态网站生成器,已经多年没有更新迭代了。
No comments:
Post a Comment