1

I'm new to Metalsmith. I'm looking to configure it in windows8. Previously I used Grunt js which can be configured easily and quickly (Clean and simple steps are given). I used Jade and Sass with Grunt js, that was a very helpful tool that I had been using for my web pages. Now I want to try Jade and Sass in Metalsmith. I tried a tutorial and few youtube videos. Still no gain. Any help with easy steps would be much appreciated. Thanks in advance.

Note: I tried to install Metalsmith and my directory structure was

Directory structure

I'm not sure how to keep jade & sass files and to build or compile.

Som
  • 270
  • 1
  • 13

1 Answers1

5

Yes, the configuration is very easy. But we need to understand the folder structure. Below is my directory structure.


    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

Step 4: Type the npm install metalsmith-sass in the command prompt to install Metalsmith Sass plugin

Eg: 

C: \newproject>npm install metalsmith-sass

Step 5: Type the npm install metalsmith-jade in the command prompt to install Metalsmith Jade plugin

Eg: 

C: \newproject>npm install metalsmith-jade

All installation will be done in the directory 'node_modules' automatically ('node_modules' folder will be created during the installation).

Step 5: Create a file called index.js

We need to create variables and to call the plugins in the 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; }
        });

Once these configuration steps are done, create your jade and sass files in the 'src' directory and once you run the file by typing "node index.js" you will get the output as html and css files in the 'build' directory.

Let me know if anyone has any questions! :)

Som
  • 270
  • 1
  • 13