Рабочий процесс на стороне клиента

Я пытаюсь настроить рабочий процесс на стороне клиента с помощью yoman (http://yeoman.io/), и, когда я иду из фона Rails, m используется для тонкостей конвейера активов, который поддерживается Sprockets (https://github.com/sstephenson/sprockets).

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

Первый вопрос, который приходит на ум, - это хорошо зарекомендовавший себя (например, соглашение по конфигурации, например, в мире Rails), способ разработки клиентского приложения с йоменом? Может быть, какой-то окончательный справочник (помимо основного руководства по веб-сканеру)? Некоторые предлагают использовать requirejs (которые я предпочитаю не использовать, потому что, хотя это упрощает процесс разработки, мне нужно будет перепрыгнуть через обручи, чтобы упаковать приложение (например, использовать Almond.js или AMDclean.js или нести ненужные накладные расходы requirejs).

Моя настройка: Coffeescript, Backbone + Marionette, Handlebars для шаблонов и ZURB Foundation с SASS.

То, что я хотел бы сделать в конце, - это следующая настройка при использовании беседы для управления зависимостями сторонних разработчиков:

В разработке:

  • Есть что-то вроде манифеста Rails для javascript, поэтому я могу объявить порядок зависимостей, который будет взорван в index.html
  • Для всех .scss файлов добавлена ​​запись .css в index.html
  • Каждый файл просматривается и компилируется при необходимости

В производстве (dist):

  • Все .scss файлы, скомпилированные, обобщенные и объединенные в app.css
  • Все файлы bower объединяются и сводятся к vendor.js
  • Все файлы coffeescript приложения, скомпилированные, обобщенные и объединенные в app.js
  • Все шаблоны, скомпилированные, минимизированные и объединенные в templates.js
  • index.html изменен, чтобы включить только те четыре файла.

Есть ли что-то вроде этой настройки?

Я также открыт для предложений и/или других альтернативных рабочих процессов.

ОТВЕТЫ

Ответ 1

Yeomam не приблизит вас к рабочему процессу Rails, как вы могли бы ожидать. Мои два цента - это то, что вы смотрите на что-то вроде Middleman, что делает то, что вы хотите из коробки.

Йоменский путь

Использование генераторов

Вы можете использовать генераторы Yeoman и попытаться выяснить комбинацию генераторов, которые лучше подходят для стека, который вы ищете, из того, что вы описали, я мог бы взглянуть на:

На этом этапе большинство ваших требований (как разработки, так и производства) будут выполнены:

  • четко определенная структура проекта
  • скомпилировать coffeeScript и .scss
  • смотреть и компилировать
  • генераторы для модели, вида, коллекции,...
  • скомпилировать и минимизировать все файлы для производства

Вы можете использовать несколько генераторов для настройки собственного стека, каждый раз, когда Йомен обнаруживает, что генератор перезаписывает существующий файл, он подскажет, что делать, и вы должны иметь возможность самостоятельно управлять конфликтом. Некоторые рамочные генераторы, очевидно, столкнутся (не имеет смысла пытаться использовать генератор angular поверх backbone).

Точная настройка

Вы можете использовать подгенераторы для scafold более конкретных частей вашего приложения, см. видео Ady Osmani.

Генераторы зданий

Если вы чувствуете ограниченность некоторыми вариантами, которые может наложить генератор (например, вы предпочитаете браузер, а не requirejs), вам может потребоваться разветкить генератор и добавить его в качестве опции. Вы даже можете создать скругление формы генератора, которая будет создавать ваш собственный стек!

Трассировка и путь Bower

Йомен строит поверх этих двух, но вы можете в любой момент отказаться и создать свой собственный стек, используя эти два. Вы можете добавить свои расхождения через беседку, а ваши задачи - использовать хрюканье. Есть много примеров, которые могут дать вам некоторые рекомендации, вы можете начать с Yeoman webapp. В github также есть хорошие примеры, например juanghurtado/puppeteer.

Есть 3 файла, которые вы должны следить:

  • package.json - все ваши зависимости node находятся здесь.
  • bower.json - для управления клиентскими зависимостями
  • Gruntfile.js - здесь вы определяете задачи

Обертка

Возможно, я заявляю очевидное, но Йомен делает какую-то магическую работу и помогает вам управлять Grunt и беседкой, эта магия происходит только тогда, когда вы полностью понимаете, как это работает. Поэтому я бы рекомендовал сначала погрузиться в какой-то код и полностью понять, как работают Grunt и Bower, а затем вы можете использовать магию Йомана.

Некоторые другие инструменты

Вы попросили несколько предложений, вот оно:

  • gulp.js Альтернатива Grunt. Больше вы погружаетесь в Grunt больше, вы захотите Gulp (IMHO).
  • browserify Альтернатива Requiere. Прочитайте
  • assemble Статический генератор сайта для Node.js, Grunt.js и Yeoman

Ответ 2

Roman,

Отвечай за свой первый вопрос, вот руководство по использованию Йомана: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254

Если вы хотите использовать coffeescript по умолчанию, просто передайте параметр -coffee

yo webapp --coffee

обрабатывает заказ активов, который вы можете обрабатывать из файла index.html.

Если вы хотите, чтобы приложение было готово для производства, просто введите

grunt build

который объединит и минимизирует все ваши активы и выбросит все файлы dist.

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

Надеюсь, я дал вам полезную информацию:)

Ответ 3

Не ответ на мой оригинальный вопрос, а скорее указатель для тех, кто хотел бы реализовать тот же рабочий процесс, который я искал. Я закончил тем, что написал пользовательский файл Grunt, используя команду grunt-injector, чтобы "разбить активы на index.html", grunt-bower-install, чтобы добавить активы bower и настроить grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin и grunt-contrib-uuglify соответственно.