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

Question

我是Metalsmith的新手.我想在windows8中配置它.以前我使用过Grunt js,它可以轻松快速地配置(给出简洁明了的步骤).我使用Jade和Sass和Grunt js,这是我一直用于我的网页的非常有用的工具.现在我想在Metalsmith尝试Jade和Sass.我尝试了一个教程和几个YouTube视频.仍然没有收获.任何有关简单步骤的帮助都将非常感激.提前致谢.

注意:我试图安装Metalsmith,我的目录结构是

我不知道如何保存jade和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.如果您想立即安装它们,请单击此处查看网站

步骤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

所有安装都将自动在"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文件.

如果有人有任何问题,请告诉我!:)