Question

我是Metalsmith的新手。我想在windows8中配置它。以前我使用了Grunt js，可以轻松快速地进行配置（给出了简洁明了的步骤）。我将Jade和Sass与Grunt js一起使用，这是我用于网页的非常有用的工具。现在我想在Metalsmith尝试Jade和Sass。我试过了a tutorial和很少的YouTube视频。仍然没有收获。任何有关简单步骤的帮助都将非常感激。提前谢谢。

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

Directory structure

我不确定如何保持玉器和耳机sass文件以及构建或编译。

Answer 1

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


    newproject

    + build
    + node_modules
    + src
      index.js

如果我们扩展目录，它将看起来像


    newproject

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

配置步骤：

您需要在计算机中安装node / npm。如果您想立即安装它们，click here to view website

步骤1：在Windows资源管理器中创建名为newproject的文件夹

步骤2：打开命令提示符并转到指定的文件夹路径

步骤3：在命令提示符下键入npm install metalsmith以安装Metalsmith

例如：

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

所有安装都将在目录＆＃39; node_modules＆＃39;自动（＆＃39; node_modules＆＃39;文件夹将在安装过程中创建）。

步骤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; }
        });

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

如果有人有任何问题，请告诉我！：）

Metalsmith - 静态站点生成器 - 配置

1 个答案: