КАК: разобрать файл конфигурации для пользовательских сборок с помощью gulp.js

КАК: Анализировать файл конфигурации для пользовательских сборок с помощью gulp 🥛

Что я узнал из рефакторинга 🤓

Некоторые из моих проектов - CSS решения. Один конкретный проект имеет дело с коллекцией CSS анимаций. Все началось как один файл. Он рос и рос, и вскоре кто-то предложил модульность проекта.

Это логично. Но я был в раздумьях относительно того, как это сделать. Я думал просто придерживаться своих CLI инструментов, а не использовать инструмент для сборки. Я довольно много играл с gulp и вместо этого решил использовать его с рядом плагинов, чтобы улучшить рабочий процесс.

Итак, что мне нужно было сделать?

Мне нужно было разделить мой файл на несколько файлов для разных анимаций. Я хотел, чтобы каждый мог выпускать свои собственные сборки. Это указывает на некоторую форму файла конфигурации.

Итак, я создаю один.

{
   "whirls": {
      "bar": {
        "bar": true,
        "bar-follow": true
      },
      "double-up": {
        "double-up": true
      },
      "duo": {
        "duo": true
      },
      "line": {
        "line": true,
        "line-grow": true,
        "line-back-and-forth": true,
        "line-back-and-forth-grow": true
      },
      "shadow": {
        "shadow": true,
        "shadow-oval-left": true,
        "shadow-oval-right": true
      },
      "spherical": {
        "spherical-horizontal": true,
        "spherical-vertical": true
      },
      "traditional": {
        "traditional": true
      }
   }
}

Этот файл определяет, какие анимации я хочу включить при запуске сборки.

В моем gulpfile мне нужно ссылаться на эту конфигурацию всякий раз, когда я строю, чтобы строить только желаемый источник. Для этого я написал следующую функцию, которая создает массив исходных строк для использования в моей задаче сборки.

gatherSrc = function (sources, path, ext) {
  for (var src in sources ) {
   if (sources[src] === true) {
    processSrc.push('src/' + ext + '/sources/' + path + src + '.' + ext);
   } else if (Object.keys(sources[src]).length > 0) {
    var newPath = (path === undefined) ? src + '/' :path + src + '/';
    gatherSrc(sources[src], newPath, ext);
   }
  }
 };

Я вызываю эту функцию в своей задаче сборки, передавая корневой ключ конфигурации и расширение файлов, которые я хочу построить. Это потому, что у меня есть файлы scss и less , и я хочу стараться придерживаться принципа DRY как можно лучше. processSrc - это пустой массив, который определяется как содержащий только файл ядра _10 _ / _ 11_ перед тем, как мы вызываем gatherSrc в соответствующих задачах сборки для любого языка.

var config = require('./path/to/config/file');
...
//inside build task
processSrc = [‘src/style/core’];
gatherSrc(config.animations, undefined, 'scss');

Функция дает мне набор исходных строк, которые затем передаются в задачу сборки. Затем, используя такой пакет, как gulp-concat, мы можем объединить источник и передать его в задачу сборки.

Вот и все!

С относительной легкостью мне удалось провести рефакторинг, сделав его модульным и настраиваемым с помощью gulp 🥛 🎉

Как всегда, любые вопросы, предложения или если я что-то пропустил, не стесняйтесь оставлять заметку или твитнуть меня 🐦!