2015-05-27 86 views
2

我是Metalsmith的新手。我正在尋找在Windows8中配置它。以前我用Grunt js,它可以很容易和快速配置(給出了簡潔的步驟)。我用Grunt js使用JadeSass,這是我用於我的網頁的一個非常有用的工具。現在我想在Metalsmith嘗試Jade和Sass。我試過a tutorial和少數youtube視頻。仍然沒有收穫。任何幫助簡單的步驟將不勝感激。提前致謝。Metalsmith - 靜態站點生成器 - 配置

注:我試圖安裝Metalsmith和我的目錄結構是

Directory structure

我不知道怎麼養玉& SASS文件,並建立或編譯的。

回答

5

是的,配置非常簡單。但我們需要了解文件夾結構。以下是我的目錄結構。

 

    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'目錄中。

讓我知道如果有人有任何問題! :)

相關問題