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

我是Metalsmith的新手。我正在寻找在Windows8中配置它。以前我用Grunt js，它可以很容易和快速配置（给出了简洁的步骤）。我用Grunt js使用Jade和Sass，这是我用于我的网页的一个非常有用的工具。现在我想在Metalsmith尝试Jade和Sass。我试过a tutorial和少数youtube视频。仍然没有收获。任何帮助简单的步骤将不胜感激。提前致谢。Metalsmith - 静态站点生成器 - 配置

注：我试图安装Metalsmith和我的目录结构是

Directory structure

我不知道怎么养玉& SASS文件，并建立或编译的。

来源

2015-05-27 Som

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

 

    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

配置步骤：

您需要安装在您的计算机节点/ NPM。如果您想现在安装它们，click here to view website

步骤1：在Windows资源管理器创建一个文件夹命名newproject

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

第3步：输入NPM安装metalsmith在命令提示安装metalsmith

例如：

C: \newproject>npm install metalsmith

步骤4：输入NPM在命令提示来安装的Met安装metalsmith-SASS alsmith萨斯插件

例如：

C: \newproject>npm install metalsmith-sass

第5步：输入NPM安装metalsmith玉在命令提示符下安装Metalsmith玉插件

如：

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”目录，一旦你键入“节点index.js”运行该文件，你会得到输出HTML和CSS文件在'build'目录中。

让我知道如果有人有任何问题！ :)

来源

2015-06-03 07:55:37 Som

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

回答

相关问题