node.js - Metalsmith - 静态站点生成器 - 配置

Question

我是 Metalsmith 的新手。我想在windows8中配置它。以前我用过 Grunt js可以轻松快速地进行配置(给出了干净且简单的步骤)。我用过Jade和 Sass对于 Grunt js，这是一个非常有用的工具，我一直在我的网页中使用它。现在我想在 Metalsmith 中尝试 Jade 和 Sass。我试过a tutorial和一些 YouTube 视频。还是没有收获。任何简单步骤的帮助将不胜感激。提前致谢。

注意:我尝试安装 Metalsmith，我的目录结构是

我不知道如何保存 jade 和 sass 文件以及如何构建或编译。

Answer 1

是的，配置非常简单。但我们需要了解文件夹结构。下面是我的目录结构。

    newproject    + build    + node_modules    + src      index.js

If we expand the directories, it will look like

    newproject    - build       + css       + images       + scripts       home.html    - node_modules       + .bin       + metalsmith       + metalsmith-jade       + metalsmith-sass    - src       + css       + images       + scripts       home.jade      index.js

Configuration steps:

You need to have node/npm installed in your computer. If you want to install them now, click here to view website

Step 1: create a folder named newproject in windows explorer

Step 2: open command prompt and go to the specified folder path

Step 3: Type the npm install metalsmith in the command prompt to install Metalsmith

Eg:

C: \newproject>npm install metalsmith

第 4 步:在命令提示符中键入 npm install metalsmith-sass 以安装 Metalsmith Sass 插件

例如:

C: \newproject>npm install metalsmith-sass

第 5 步:在命令提示符中键入 npm install metalsmith-jade 以安装 Metalsmith Jade 插件

例如:

C: \newproject>npm install metalsmith-jade

所有安装将自动在“node_modules”目录中完成(“node_modules”文件夹将在安装过程中创建)。

第5步:创建一个名为index.js的文件

我们需要创建变量并调用index.js中的插件。

    var Metalsmith  = require('metalsmith'),        jade        = require('metalsmith-jade'),        sass        = require('metalsmith-sass');    Metalsmith(__dirname)        .destination('./build')            .use(jade())        .use(sass({            outputStyle: "expanded"        }))            .build(function(err, files) {            if (err) { throw err; }        });

完成这些配置步骤后，在“src”目录中创建 jade 和 sass 文件，一旦通过键入“node index.js”运行该文件，您将在“build”中获得 html 和 css 文件的输出' 目录。

如果有人有任何疑问，请告诉我! :)