generator infinitely static

бесконечно статичный

Это генератор статических страниц с базовой поддержкой маршрутизации. Идея этого инструмента состоит в том, чтобы упростить разработку статических веб-страниц с помощью лучших инструментов Webpack и связанных с ним инструментов.

Что включено?

• Инструменты линтинга с разумными настройками по умолчанию — stylelint и eslint
• Горячая перезагрузка в разработке
• Babel с активированной предустановкой env, которая также заботится о полифилах.
• Минимизация JavaScript и удаление мертвого кода
• SASS-компиляция, префикс и минификация
• Библиотека для управления точками останова мультимедиа (медиа-блендер)
• Handlebars как язык шаблонов (с помощниками, макетами и партиалами)
• Поддержка маршрутов (плоская и вложенная структура сборки)

Начиная

Запустить это действительно просто. Вам понадобится этот генератор и yo установка.

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

Примечание . После инициализации проекта запустите npm install husky --save-dev .

Разработка

Когда Yeoman закончит, у вас будет рабочий проект.

Запуск сервера горячей перезагрузки

 npm start

Производственная сборка

 npm run build

Маршруты

Добавлять маршруты также просто. В корне проекта вы найдете routes.json , содержащий исходный index маршрут. Конфигурация маршрута также поддерживает данные вложения и шаблона.

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

После этого в своих шаблонах вы можете использовать включенный помощник {{linkTo}} следующим образом:

 < a href =" {{linkTo 'index'}} " > Home </ a >

А для пользовательских данных вы можете использовать помощник getDataAsString :

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

Если данные простые (массив, строка, число и т. д.), они будут отображаться как обычно, но если вы ссылаетесь на объект, вы получите строковый JSON. Но помните, что доступ к данным можно получить напрямую, используя объект htmlWebpackPlugin.options в шаблоне:

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

Таким образом, вы можете перебирать массив, указанный в контексте, используя встроенные помощники.

Лицензия

Лицензия MIT

© 2016 Инфинум Инк.