我是Metalsmith的新手。我正在寻找在Windows8中配置它。以前,我使用Grunt js可以轻松快速地对其进行配置(给出了简洁的步骤)。我在Grunt js中使用了JadeSass,这是我用于网页的非常有用的工具。现在,我想在Metalsmith中尝试Jade和Sass。我尝试了a tutorial和一些youtube视频。仍然没有收获。任何简单步骤的帮助将不胜感激。提前致谢。

注意:我尝试安装Metalsmith,目录结构为



我不确定如何保存玉石和萨斯文件以及如何构建或编译。

最佳答案

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


    newproject

    + build
    + node_modules
    + src
      index.js

If we expand the directories, it will look like


    newproject

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

Configuration steps:

You need to have node/npm installed in your computer. If you want to install them now, click here to view website

Step 1: create a folder named newproject in windows explorer

Step 2: open command prompt and go to the specified folder path

Step 3: Type the npm install metalsmith in the command prompt to install Metalsmith

Eg:

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'),
        翡翠= require('metalsmith-jade'),
        sass = require('metalsmith-sass');

    金属匠(__dirname)
        .destination('./ build')
        .use(jade())
        .use(sass({
            outputStyle:“展开”
        }))
        .build(function(err,files){
            如果(err){抛出err; }
        });



完成这些配置步骤后,在“ src”目录中创建jade和sass文件,然后通过键入“ node index.js”运行文件,您将在“ build”目录中将输出作为html和css文件获取。

让我知道是否有人有任何疑问! :)

10-07 18:27