静态方法创建静态map

静态方法创建静态map

My previous posts discussed reasons why you should or should not consider a static site generator. In summary, a static site generator builds HTML-only page files from templates and raw data typically contained in Markdown files. It offers some of the benefits of a CMS without the hosting, performance and security overheads.

我以前的帖子讨论了为什么应该或不应该考虑使用静态网站生成器的原因。 总而言之，静态网站生成器会通过Markdown文件中通常包含的模板和原始数据构建仅HTML页面文件。 它提供了CMS的一些优点，而没有托管，性能和安全性开销。

A static site may be appropriate for a range of projects, including:

静态站点可能适用于一系列项目，包括：

A small website or personal blog. Sites with a few dozen pages, infrequent posts and one or two authors could be ideal.

小型网站或个人博客。 站点只有几十页，不经常发布并且只有一两个作者的网站可能是理想的选择。 Technical documentation such as a REST API.

技术文档，例如REST API。 Application prototypes requiring a series of web page views.

需要一系列网页视图的应用程序原型。 An eBook — Markdown files can be converted to PDF or other formats as well as HTML.

电子书— Markdown文件可以转换为PDF或其他格式以及HTML。

In essence, a static site generator is a build tool. You could use one for running tasks or project scaffolding like you could with Grunt or Gulp.

本质上，静态站点生成器是构建工具。 您可以像使用Grunt或Gulp一样使用它来运行任务或项目支架。

为什么选择金属匠？ (Why Metalsmith?)

The undisputed static site champion is Jekyll—a Ruby project launched in 2008. You don’t necessarily require Ruby expertise to use Jekyll but it will help. Fortunately, there is a wide range of open source static site generators for most popular languages. JavaScript options include Hexo, Harp and Assemble. You could also use a build tool such as Gulp for simpler projects.

毫无疑问，静态站点冠军是Jekyll，这是2008年启动的Ruby项目。使用Jekyll不一定需要Ruby专业知识，但它会有所帮助。 幸运的是，对于大多数流行的语言，有各种各样的开源静态站点生成器 。 JavaScript选项包括Hexo ， Harp和Assemble 。 您也可以使用诸如Gulp之类的构建工具来简化项目。

I choose Metalsmith for this tutorial because it:

我选择本教程的Metalsmith是因为：

is not aimed at specific project types such as blogs

不针对特定项目类型，例如博客 supports a wide range of template and data format options

支持多种模板和数据格式选项 is lightweight

轻巧 has few dependencies

很少有依赖 uses a modular structure

使用模块化结构 offers a simple plug-in architecture, and

提供了一个简单的插件架构，并且 is easy to get started.

很容易上手。

A demonstration website has been built for this tutorial. It won’t win any design awards but it illustrates the basic concepts. The Metalsmith build code can be examined and installed from the GitHub repository. Alternatively, you can follow the instructions here and create your own basic site.

本教程已建立了一个演示网站 。 它不会获得任何设计奖项，但可以说明基本概念。 可以从GitHub存储库中检查和安装Metalsmith构建代码。 或者，您可以按照此处的说明创建自己的基本站点。

I have used Metalsmith a couple of times—please don’t presume this is the definitive way to build every static site!

我已经使用Metalsmith了几次，请不要以为这是构建每个静态站点的明确方法！

安装Metalsmith (Install Metalsmith)

Ensure you have Node.js installed (for example using nvm) then create a new project directory, e.g. project and initialize your package.json file:

确保已安装Node.js (例如， 使用nvm )，然后创建一个新的项目目录(例如project并初始化package.json文件：

cd project && cd project npm init -y

Now install Metalsmith and the assorted plugins we’ll use to build our site. These are:

现在安装Metalsmith和我们将用来构建站点的各种插件。 这些是：

metalsmith-assets — includes static assets in your Metalsmith build

metalsmith-assets —在您的Metalsmith版本中包含静态资产

metalsmith-browser-sync — incorporates BrowserSync into your workflow

metalsmith-browser- sync-将BrowserSync集成到您的工作流程中

metalsmith-collections — adds collections of files to the global metadata

metalsmith-collections —将文件集合添加到全局元数据

metalsmith-feed — generates an RSS feed for a collection

metalsmith-feed-为集合生成RSS feed

metalsmith-html-minifier — minifies HTML files using kangax/html-minifier

metalsmith-html-minifier-使用kangax / html-minifier最小化HTML文件

metalsmith-in-place — renders templating syntax in source files

Metalsmith-in-place —在源文件中渲染模板语法

metalsmith-layouts — applies layouts to your source files

metalsmith-layouts-将布局应用于源文件

metalsmith-mapsite — generates a sitemap.xml file

metalsmith-mapsite —生成一个sitemap.xml文件

metalsmith-markdown — converts markdown files

metalsmith-markdown —转换markdown文件

metalsmith-permalinks — applies a custom permalink pattern to files

metalsmith-permalinks-将自定义的永久链接模式应用于文件

metalsmith-publish — adds support for draft, private, and future-dated posts

metalsmith-publish —增加了对草稿，私人和未来职位的支持

metalsmith-word-count — computes word count / average reading time of all paragraphs in a HTML file

metalsmith-word-count —计算HTML文件中所有段落的字数/平均阅读时间

npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars

项目结构 (Project Structure)

We’ll use the following structure for source (src) and build (build) directories within the project.

我们将在项目内的源( src )和构建( build )目录中使用以下结构。

You can create your example files as described below or copy them directly from the demonstration src directory.

您可以按照以下说明创建示例文件，或直接从demos src目录中复制它们。

页数 (Pages)

Page Markdown files are contained in src/html. This can contain one level of sub-directories for each website section, i.e.

页面Markdown文件包含在src/html 。 每个网站部分可以包含一个子目录级别，即

src/html/start — pages describing the project in a specific order

src/html/start —以特定顺序描述项目的页面

src/html/article — assorted articles in reverse chronological order

src/html/article —按相反的时间顺序排列的各种文章

src/html/contact — a single contact page

src/html/contact —单个联系页面

Each directory contains a single index.md file which is the default page for that section. Other pages can use any unique name.

每个目录都包含一个index.md文件，该文件是该部分的默认页面。 其他页面可以使用任何唯一名称。

The build process will transform these files into directory-based permalinks, e.g.

构建过程会将这些文件转换为基于目录的永久链接，例如

src/html/start/index.md becomes /start/index.html

src/html/start/index.md变成/start/index.html

src/html/start/installation.md becomes /start/installation/index.html

src/html/start/installation.md变为/start/installation/index.html

Each Markdown file provides the content and meta information known as “front-matter” at the top between --- markers, e.g.

每个Markdown文件在---标记之间的顶部提供称为“前题”的内容和元信息，例如

--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.

Most front-matter is optional but you can set:

大多数前端是可选的，但您可以设置：

priority: a number between 0 (low) and 1 (high) which we’ll use to order menus and define XML sitemaps.

priority ：介于0(低)和1(高)之间的数字，我们将使用它来排序菜单和定义XML网站地图。

publish: can be set to draft, private or a future date to ensure it is not published until required.

publish ：可以设置为draft ， private日期或将来的日期，以确保直到需要时才发布。

date: the date of the article. If none is set, we’ll use any future publish date or the file creation date.

date ：文章的日期。 如果未设置，我们将使用将来的任何发布日期或文件创建日期。

layout: the HTML template to use.

layout ：要使用HTML模板。

范本 (Templates)

HTML page templates are contained in src/template. Two templates have been defined:

HTML页面模板包含在src/template 。 定义了两个模板：

src/html/template/page.html the default layout

src/html/template/page.html 默认布局

src/html/template/article.md an article layout showing dates, next/back links, etc.

src/html/template/article.md 文章布局，显示日期，下一个/后退链接等。

The Handlebars templating system is used although alternative options are supported. A typical template requires a {{{ contents }}} tag to include the page content as well as any front-matter values such as {{ title }}:

尽管支持其他选项，但仍使用Handlebars模板系统。 一个典型的模板需要一个{{{ contents }}}标签来包含页面内容以及诸如{{ title }}类的所有前值：

<!DOCTYPE html> <html lang="en"> <head> {{> meta }} </head> <body> {{> header }} <main> <article> {{#if title}} <h1>{{ title }}</h1> {{/if}} {{{ contents }}} </article> </main> {{> footer }} </body> </html>

References to {{> meta }}, {{> header }} and {{> footer }} are partials…

对{{> meta }} ， {{> header }}和{{> footer }}引用是局部的…

部分 (Partials)

Partials—or HTML snippet files—are contained within src/partials. These are mostly used within templates but can also be included within content pages using the code:

部分(或HTML片段文件)包含在src/partials 。 这些通常在模板中使用，但也可以使用以下代码包含在内容页面中：

{{> partialname }}

where partialname is the name of the file in the src/partials directory.

其中， partialname是src/partials目录中文件的名称。

静态资产 (Static Assets)

Static assets such as images, CSS and JavaScript files are contained in src/assets. All files and sub-directories will copied to the root of the website as-is.

静态资源(例如图像，CSS和JavaScript文件)包含在src/assets 。 所有文件和子目录将原样复制到网站的根目录。

自定义插件 (Custom Plugins)

Custom plugins required to build the site are contained in the lib directory.

建立站点所需的自定义插件包含在lib目录中。

建立目录 (Build Directory)

The website will be built in the build directory. We will build the site in two ways:

该网站将建立在build目录中。 我们将以两种方式构建站点：

Development mode: HTML will not be minified and a test web server will be started.

开发模式：不会缩小HTML并将启动测试Web服务器。

Production mode: if NODE_ENV is set to production, the build directory is wiped and final minified files are generated.

生产模式：如果将NODE_ENV设置为production ，那么将擦除build目录并生成最终的最小化文件。

定义第一个构建文件 (Defining Your First Build File)

A basic example named build.js can be created in the root of your project directory:

可以在项目目录的根目录中创建一个名为build.js的基本示例：

// basic build 'use strict'; var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert markdown to HTML .build(function(err) { // build the site if (err) throw err; // and throw errors });

Run this using node ./build.js and a static site will be created in the build directory. The Markdown will be parsed into HTML but it won’t be usable because we haven’t included templates in our build process.

使用node ./build.js运行此node ./build.js ，将在build目录中创建一个静态站点。 Markdown将被解析为HTML，但由于我们在构建过程中未包含模板，因此无法使用。

Metalsmith插件 (Metalsmith Plugins)

Superficially, Metalsmith build files look similar to those used in Gulp (although it doesn’t use streams). A plugin is invoked by passing it to the Metalsmith use method with any appropriate arguments. The plugin itself must return another function which accepts three parameters:

从表面上看，Metalsmith构建文件看起来类似于Gulp中使用的文件(尽管它不使用流)。 通过use任何适当的参数将插件传递给Metalsmith use方法来调用插件。 插件本身必须返回另一个接受三个参数的函数：

a files array containing information about every page

一个files数组，其中包含有关每个页面的信息

a metalsmith object containing global information such as meta data, and

包含全局信息(例如元数据)的metalsmith对象，以及

a done function which must be called when the plugin has finished working

插件完成工作后必须调用的done函数

This simple example logs all meta and page information to the console (it can be defined in build.js):

这个简单的示例将所有元和页面信息记录到控制台(可以在build.js定义)：

function debug(logToConsole) { return function(files, metalsmith, done) { if (logToConsole) { console.log('\nMETADATA:'); console.log(metalsmith.metadata()); for (var f in files) { console.log('\nFILE:'); console.log(files[f]); } } done(); }; };

The Metalsmith build code can be updated to use this plugin:

可以更新Metalsmith构建代码以使用此插件：

ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert Markdown to HTML .use(debug(true)) // *** NEW *** output debug information .build(function(err) { // build the site if (err) throw err; // and throw errors });

This debugging function may help you create your own custom plugins but most of the functionality you could ever require has already been written—there’s a long list of plugins on the Metalsmith website.

该调试功能可以帮助您创建自己的自定义插件，但是您可能需要的大多数功能已经编写完毕-Metalsmith网站上的插件列表很长。

进行更好的构建 (Making a Better Build)

Key parts of the demonstration site build file are explained below.

下面说明了演示站点构建文件的关键部分。

A variable named devBuild is set true if the NODE_ENV environment variable has been set to production (export NODE_ENV=production on Mac/Linux or set NODE_ENV=production on Windows):

如果将NODE_ENV环境变量设置为production (在Mac / Linux上为export NODE_ENV=production或在Windows上为set NODE_ENV=production )， NODE_ENV名为devBuild的变量设置为true ：

devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production')

The main directories are defined in a dir object so we can reuse them:

主目录在dir对象中定义，因此我们可以重复使用它们：

dir = { base: __dirname + '/', lib: __dirname + '/lib/', source: './src/', dest: './build/' }

The Metalsmith and plugin modules are loaded. Note:

Metalsmith和插件模块已加载。 注意：

the excellent Browsersync test server is only required when creating a development build

仅在创建开发版本时才需要出色的Browsersync测试服务器

the HTML minifier module referenced by htmlmin is only required when creating a production build

通过引用HTML minifier模块htmlmin创建生产版本时，才需要

three custom plugins have been defined: setdate, moremeta and debug (explained in more detail below)

定义了三个自定义插件： setdate ， moremeta和debug (下面将详细介绍)

metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), publish = require('metalsmith-publish'), wordcount = require("metalsmith-word-count"), collections = require('metalsmith-collections'), permalinks = require('metalsmith-permalinks'), inplace = require('metalsmith-in-place'), layouts = require('metalsmith-layouts'), sitemap = require('metalsmith-mapsite'), rssfeed = require('metalsmith-feed'), assets = require('metalsmith-assets'), htmlmin = devBuild ? null : require('metalsmith-html-minifier'), browsersync = devBuild ? require('metalsmith-browser-sync') : null, // custom plugins setdate = require(dir.lib + 'metalsmith-setdate'), moremeta = require(dir.lib + 'metalsmith-moremeta'), debug = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,

A siteMeta object is defined with information which applies to every page. The important values are domain and rootpath which are set according to the development or production build:

用适用于每个页面的信息定义siteMeta对象。 重要值是domain和rootpath ，它们是根据开发或生产版本设置的：

siteMeta = { devBuild: devBuild, version: pkg.version, name: 'Static site', desc: 'A demonstration static site built using Metalsmith', author: 'Craig Buckler', contact: 'https://twitter.com/craigbuckler', domain: devBuild ? 'http://127.0.0.1' : 'https://rawgit.com', // set domain rootpath: devBuild ? null : '/sitepoint-editors/metalsmith-demo/master/build/' // set absolute path (null for relative) }

A templateConfig object has also been defined to set template defaults. This will be used by both the metalsmith-in-place and metalsmith-layouts plugins which enable in-page and template rendering using Handlebars:

还定义了templateConfig对象来设置模板默认值。 这将由metalsmith-in-place metalsmith-layouts插件和metalsmith-layouts插件一起使用，这些插件可使用Handlebars实现页面内和模板渲染：

templateConfig = { engine: 'handlebars', directory: dir.source + 'template/', partials: dir.source + 'partials/', default: 'page.html' }

The Metalsmith object is now initiated as before but we also pass our siteMeta object to the metadata method to ensure that information is available on every page. Therefore, we can reference items such as {{ name }} in any page to get the site name.

Metalsmith对象现在像以前一样启动，但是我们还将siteMeta对象传递给metadata方法，以确保每个页面上的信息都可用。 因此，我们可以在任何页面中引用诸如{{ name }}项目来获取站点名称。

var ms = metalsmith(dir.base) .clean(!devBuild) // clean build before a production build .source(dir.source + 'html/') // source directory (src/html/) .destination(dir.dest) // build directory (build/) .metadata(siteMeta) // add meta data to every page

Our first plugin invocation calls metalsmith-publish which removes any file which has its front-matter publish value set to draft, private or a future date:

我们的第一个插件调用调用metalsmith-publish ，它会删除其前值publish值设置为draft ， private或将来日期的任何文件：

.use(publish()) // draft, private, future-dated

setdate is a custom plugin contained in lib/metalsmith-setdate.js. It ensures every file has a ‘date’ value set even if none has been defined in front-matter by falling back to the publish date or the file creation time where possible:

setdate是lib / metalsmith-setdate.js中包含的自定义插件。 通过在可能的情况下回退到publish日期或文件创建时间，即使在开头没有定义任何文件，它也可以确保为每个文件设置一个“日期”值：

.use(setdate()) // set date on every page if not set in front-matter

metalsmith-collections is one of the most important plugins since it allocates each page to a category or taxonomy based on its location in the source directory or other factors. It can re-order files using front-matter such as date or priority and allows you to set custom meta data for that collection. The code defines:

metalsmith-collections是最重要的插件之一，因为它根据页面在源目录中的位置或其他因素将每个页面分配到类别或分类法。 它可以使用date或priority等最重要的内容对文件重新排序，并允许您为该集合设置自定义元数据。 该代码定义：

a start collection for every file in the src/html/start directory. It orders them by the priority value set in the file’s front-matter.

src/html/start目录中每个文件的启动集合。 它按照文件前部设置的priority值对它们进行排序。

an article collection for every file in the src/html/article directory. It orders them by date in reverse chronological order

src/html/article目录中每个文件的文章集合。 它按date按相反的时间顺序排序

a page collection for every default page named index.*. It orders them by the priority value set in the file’s front-matter.

每个名为index.*默认页面的页面集合。 它按照文件前部设置的priority值对它们进行排序。

.use(collections({ // determine page collection/taxonomy page: { pattern: '**/index.*', sortBy: 'priority', reverse: true, refer: false }, start: { pattern: 'start/**/*', sortBy: 'priority', reverse: true, refer: true, metadata: { layout: 'article.html' } }, article: { pattern: 'article/**/*', sortBy: 'date', reverse: true, refer: true, limit: 50, metadata: { layout: 'article.html' } } }))

Next comes Markdown to HTML conversion followed by the metalsmith-permalinks plugin which defines a directory structure for the build. Note that :mainCollection is set for each file by moremeta below:

接下来是Markdown到HTML的转换，接着是metalsmith-permalinks插件，该插件定义了构建的目录结构。 注意:mainCollection是通过下面的moremeta为每个文件设置的：

.use(markdown()) // convert Markdown .use(permalinks({ // generate permalinks pattern: ':mainCollection/:title' }))

metalsmith-word-count counts the number of words in an article and calculates approximately how long it takes to read. The argument { raw: true } outputs the numbers only:

metalsmith-word-count计数文章中的单词数，并计算大约需要花费多长时间。 参数{ raw: true }仅输出数字：

.use(wordcount({ raw: true })) // word count

moremeta is another custom plugin contained in lib/metalsmith-moremeta.js. It appends additional metadata to each file:

moremeta是lib / metalsmith-moremeta.js中包含的另一个自定义插件。 它将附加元数据附加到每个文件：

root: an absolute or calculated relative file path to the root directory

root ：到根目录的绝对或计算的相对文件路径

isPage: set true for default section pages named index.*

isPage ：将名为index.*默认节页面设置为true index.*

mainCollection: the primary collection name, either start or article

mainCollection ：主要集合名称， start或article

layout: if not set, the layout template can be determined from the main collection’s meta data

layout ：如果未设置，则可以根据主集合的元数据确定布局模板

navmain: an array of top-level navigation objects

navmain ：顶级导航对象的数组

navsub: an array of secondary-level navigation objects

navsub ：二级导航对象的数组

The plugin code is relatively complex because it handles the navigation. There are easier options should you require a simpler hierarchy.

插件代码相对复杂，因为它可以处理导航。 如果您需要更简单的层次结构，则可以使用更简单的选项。

.use(moremeta()) // determine root paths and navigation

The metalsmith-in-place and metalsmith-layouts plugins control in-page and template layouts respectively. The same templateConfig object defined above is passed:

metalsmith-in-place和metalsmith-layouts插件分别控制页面内和模板布局。 传递了上面定义的相同templateConfig对象：

.use(inplace(templateConfig)) // in-page templating .use(layouts(templateConfig)); // layout templating

If htmlmin is set (in a production build), we can minify the HTML:

如果设置了htmlmin (在生产版本中)，我们可以缩小HTML：

if (htmlmin) ms.use(htmlmin()); // minify production HTML

debug is our final custom plugin contained in lib/metalsmith-debug.js. It is similar to the debug function described above:

debug是lib / metalsmith-debug.js中包含的最后一个自定义插件。 它类似于上述debug功能：

if (debug) ms.use(debug()); // output page debugging information

The Browsersync test server is started so we can test development builds. If you’ve not used it before it’ll seem like magic: your site will magically refresh every time you make a change and views in two or more browsers are synchronised as you scroll or navigate around the site:

Browsersync测试服务器已启动，因此我们可以测试开发版本。 如果您从未使用过它，那么它看起来就像是魔术：每次进行更改时，网站都会神奇地刷新，并且在您滚动或浏览该网站时，两个或多个浏览器中的视图会同步：

if (browsersync) ms.use(browsersync({ // start test server server: dir.dest, files: [dir.source + '**/*'] }));

Finally, we can use:

最后，我们可以使用：

metalsmith-mapsite to generate an XML sitemap

metalsmith-mapsite生成XML网站地图

metalsmith-feed to generate an RSS feed containing pages in the article collection

metalsmith-feed生成包含文章集中页面的RSS feed

metalsmith-assets to copy files and directories from src/assets directly to build without modification.

metalsmith-assets直接从src/assets复制文件和目录以直接build而无需修改。

ms .use(sitemap({ // generate sitemap.xml hostname: siteMeta.domain + (siteMeta.rootpath || ''), omitIndex: true })) .use(rssfeed({ // generate RSS feed for articles collection: 'article', site_url: siteMeta.domain + (siteMeta.rootpath || ''), title: siteMeta.name, description: siteMeta.desc })) .use(assets({ // copy assets: CSS, images etc. source: dir.source + 'assets/', destination: './' }))

All that remains is the final .build() step to create the site:

剩下的就是创建站点的最后.build()步骤：

.build(function(err) { // build if (err) throw err; });

Once complete, you can run node ./build.js to build your static site again.

完成后，您可以运行node ./build.js再次构建您的静态站点。

陷阱 (The Gotchas)

I learned a lot building a simple Metalsmith website but be aware of the following issues:

我在建立一个简单的Metalsmith网站方面学到了很多，但是要注意以下问题：

不兼容的插件 (Incompatible Plugins)

Plugins can clash with others. For example, metalsmith-rootpath which calculates relative root paths does not play nicely with metalsmith-permalinks which creates custom build directory structures. I solved this issue by writing custom root path calculation code in the lib/metalsmith-moremeta.js plugin.

插件可能会与其他人冲突。 例如，计算相对根路径的metalsmith-rootpath与创建自定义构建目录结构的metalsmith-permalinks不能很好地配合。 我通过在lib / metalsmith-moremeta.js插件中编写自定义root路径计算代码来解决此问题。

插件顺序至关重要 (Plugin Order is Critical)

Plugins can depend on each other or conflict if placed in the wrong order. For example, the RSS-generating metalsmith-feed plugin must be called after metalsmith-layouts to ensure RSS XML is not generated within a page template.

如果放置顺序错误，插件可能会相互依赖或冲突。 例如，必须在metalsmith布局之后调用生成RSS的metalsmith-feed插件，以确保不会在页面模板中生成RSS XML。

Browsersync重建问题 (Browsersync Re-Build Issues)

When Browsersync is running and files are edited, collections are re-parsed but the old data appears to remain. It’s possibly an issue with the custom lib/metalsmith-moremeta.js plugin but menus and next/back links to be thrown out of synchronization. To fix it, stop the build with Ctrl/Cmd + C and restart the build.

当Browsersync运行并编辑文件时，将重新解析集合，但似乎保留了旧数据。 自定义的lib / metalsmith-moremeta.js插件可能是一个问题，但是菜单和next / back链接无法同步。 要解决此问题，请使用Ctrl / Cmd + C停止构建，然后重新启动构建。

您还需要吞咽吗？ (Do You Still Need Gulp?)

Those using a task manager such as Gulp will notice Metalsmith offers a familiar build process. There are plugins for CSS pre-processing with Sass, image minification, file concatenation, uglification and more. It may be enough for simpler workflows.

那些使用任务管理器(例如Gulp)的人会注意到Metalsmith提供了熟悉的构建过程。 有一些用于CSS预处理的插件， 包括Sass ， 图像缩小 ， 文件串联 ， uglification等。 对于更简单的工作流程可能就足够了。

However, Gulp has a more extensive range of plugins and permits complex build activities such as linting, deployment and PostCSS processing with auto-prefixer. There are a couple of Gulp/Metalsmith integration plugins although I experienced several issues and they should not be necessary because a Gulp task can run Metalsmith directly, e.g.

但是，Gulp具有更广泛的插件范围，并允许使用自动前缀对linting ，部署和PostCSS处理等复杂的构建活动。 有几个Gulp / Metalsmith集成插件，尽管我遇到了几个问题，但它们不是必需的，因为Gulp任务可以直接运行Metalsmith，例如

var gulp = require('gulp'), metalsmith = require('metalsmith'), publish = require('metalsmith-publish'), markdown = require('metalsmith-markdown'); // build HTML files using Metalsmith gulp.task('html', function() { var ms = metalsmith(dir.base) .clean(false) .source('src/html/') .destination('build') .use(publish()) .use(markdown()) .build(function(err) { if (err) throw err; }); });

This process prevents the Browsersync re-build issues mentioned above. Remember to use .clean(false) to ensure Metalsmith never wipes the build folder when other tasks are active.

此过程可防止上面提到的Browsersync重建问题。 请记住使用.clean(false)以确保Metalsmith在其他任务处于活动状态时从不擦除build文件夹。

Metalsmith适合您吗？ (Is Metalsmith for You?)

Metalsmith is ideal if you have simple or highly-customized website requirements. Perhaps try it with a documentation project and add features one at a time. Metalsmith is not as feature-complete as alternatives such as Jekyll but it’s not intended to be. You may well have to write your own plugins but the ease of doing that is a huge benefit to JavaScript developers.

如果您有简单或高度定制的网站要求，Metalsmith是理想的选择。 也许尝试使用一个文档项目并一次添加一个功能。 Metalsmith的功能不如Jekyll这样的替代品完整，但并非如此。 您可能必须编写自己的插件，但是这样做的简便性对JavaScript开发人员来说是巨大的好处。

Creating a Metalsmith build system takes time and we haven’t considered the effort involved in HTML templating and deployment. However, once you have a working process, it becomes remarkably simple to add, edit and remove Markdown files. It can be easier than using a CMS and you have all the benefits of a static site.

创建Metalsmith构建系统需要花费时间，我们还没有考虑HTML模板和部署中涉及的工作。 但是，一旦有了工作流程，添加，编辑和删除Markdown文件就变得非常简单。 它比使用CMS更容易，并且您拥有静态站点的所有好处 。

翻译自: https://www.sitepoint.com/create-static-site-metalsmith/

静态方法创建静态map