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 - 靜態站點生成器 - 配置

回答

相關問題