Создание файлов и структуры проекта по шаблонам с помощью Grunt

Grunt — это набор инструментов командной строки, облегчающих разработку на JavaScript. Он умеет склеивать и минифицировать JS-файлы, запускать тесты и JSHint, запускать задачи при изменении файлов и даже содержит простейший веб-сервер. Но самое интересное для меня — команда init, создающая файлы (или структуру папок) по шаблону.

В репозитории Гранта уже есть полдюжины шаблонов, но мне они были не слишком полезны, поэтому я сделал пачку своих.

Например, набрав grunt init:readme, я получаю в текущей папке файлы Readme.md и License.md, в которых уже стоят текущий год, моё имя и т. п.

Шаблон состоит из:

  1. Файла templatename.js. В нём можно описать, что должен ввести пользователь; как эти параметры будут преобразованы и т. п. Тут доступны любые возможности JavaScript и Node.
  2. Папки templatename/root со всеми файлами, которые будут скопированы при выполнении шаблона.
  3. Файла templatename/rename.json с описанием правил переименования файлов.

Сами шаблоны должны лежать в ~/.grunt/tasks/init или %USERPROFILE%\.grunt\tasks\init.

Например, шаблон простейшего HTML-файла может выглядеть так. Файл html.js:

// Описание шаблона, которое можно увидеть выполнив grunt init (список доступных шаблонов)
exports.description = 'Create a simple HTML5 file.';

exports.template = function(grunt, init, done) {
  grunt.helper(
    'prompt',
    {},
    [
      // Пользовательские параметры
      // Имя файла (такой запрос уже есть в Гранте, поэтому нужно вызывать его с помощью grunt.helper)
      // index -- значение по умолчанию
      grunt.helper('prompt_for', 'name', 'index'),
      // Язык (такого запроса в Гранте нет, поэтому нам нужно описать все параметры)
      {
        name: 'lang',
        message: 'Document language',
        default: 'en'
      }
    ],
    function(err, props) {
      // Достаём параметры по умолчанию (находятся в файле defaults.json)
      grunt.utils._.defaults(props, init.defaults);

      // Список файлов для копирования
      var files = init.filesToCopy(props);

      // Список файлов для копирования
      init.copyAndProcess(files, props);

      // Готово :)
      done();
    }
  );
};

В папке html/root лежит один файл name.html. (Шаблон вымышленный, чтобы показать возможности Гранта.

<!DOCTYPE html>
<html lang="{%= lang %}">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="copyright" content="© {%= grunt.template.today('yyyy') %} {%= author_name %}">
</head><body>
</body></html>

Остаётся задать правила переименования. Файл html/rename.json:

{
  "name.html": "{%= name %}.html"
}

Всё, шаблоном можно пользоваться:

Grunt.js

Что ещё посмотреть про Грант:

Вы можете улучшить этот пост, отредактировав его на Гитхабе.

Обо мне

Я живу в Берлине и работаю фронтенд-разработчиком в Вэйфейре, а в свободное время фотографирую, глажу своих собак и пью кофе.

Читайте обо мне на моём сайте и подписывайтесь на мой блог о фотографии и твитер.