Metalsmith - генератор статических сайтов - конфигурация

Я новичок в Metalsmith. Я хочу настроить его в Windows8. Раньше я использовал Grunt js, который можно легко и быстро настроить (даны четкие и простые шаги). Я использовал Jade и Sass с Grunt js, это был очень полезный инструмент, который я использовал для своих веб-страниц. Теперь я хочу попробовать Jade и Sass в Metalsmith. Я попробовал руководство и несколько роликов на YouTube. видео. Все равно никакого выигрыша. Любая помощь с простыми шагами будет высоко оценена. Заранее спасибо.

Примечание. Я пытался установить Metalsmith, и моя структура каталогов была

Структура каталогов

Я не уверен, как хранить файлы jade и sass, а также создавать или компилировать.


node.js static-site build-automation metalsmith
person Som    schedule 27.05.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Да, настройка очень проста. Но нам нужно понять структуру папок. Ниже представлена ​​моя структура каталогов.


    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

Шаги настройки:

На вашем компьютере должен быть установлен node/npm. Если вы хотите установить их сейчас, нажмите здесь, чтобы просмотреть веб-сайт

Шаг 1: создайте папку с именем newproject в проводнике Windows.

Шаг 2: откройте командную строку и перейдите по указанному пути к папке.

Шаг 3: Введите npm install metalsmith в командной строке, чтобы установить Metalsmith.

Eg: 

C: \newproject>npm install metalsmith

Шаг 4: Введите npm install metalsmith-sass в командной строке, чтобы установить плагин Metalsmith Sass.

Eg: 

C: \newproject>npm install metalsmith-sass

Шаг 5: Введите npm install metalsmith-jade в командной строке, чтобы установить плагин Metalsmith Jade.

Eg: 

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; }
        });

После выполнения этих шагов настройки создайте файлы jade и sass в каталоге «src», и как только вы запустите файл, набрав «node index.js», вы получите выходные данные в виде файлов html и css в каталоге «build».

Дайте мне знать, если у кого-то есть вопросы! :)

person Som    schedule 03.06.2015