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

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

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

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

Моя настройка: Coffeescript, позвоночник + марионетка, руль для шаблоны и Zurb Foundation с SASS.

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

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

  1. есть что-то вроде манифеста Rails для javascript, поэтому я могу объявить порядок зависимостей, который будет взорван в индекс.html
  2. для всех .СКС файлы .запись css добавлена в индекс.html
  3. каждый файл просматривается и компилируется, когда необходимо

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

  1. Все .файлы scss компилируются, минимизируются и объединяются в приложение.css
  2. все файлы bower объединены и уменьшены до поставщика.js
  3. Все файлы приложения coffeescript компилируются, минимизируются и объединяются в приложение.js
  4. все шаблоны скомпилированы, уменьшены и объединены с шаблонами.js
  5. индекс.html изменен, чтобы включить только эти четыре файла.

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

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

3 16
bower coffeescript backbone.js gruntjs yeoman

3 ответа:

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

Путь Йомена

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

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

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

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

Можно использовать несколько генераторы для настройки вашего собственного стека, каждый раз, когда Yeoman обнаруживает, что генератор перезаписывает существующий файл, он будет подсказывать, Что делать, и вы должны быть в состоянии управлять конфликтом самостоятельно. Некоторые фреймворк-генераторы, очевидно, столкнутся (не имеет смысла пытаться использовать Угловой генератор поверхмагистрального ).

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

Вы можете использовать суб-генераторы для scafold больше определенные части вашего приложения, см. Эдди Османи видео .

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

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

Путь Хрюка и Бауэра

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

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

  • пакет.json - все ваши зависимости узлов идут сюда
  • Бауэр.json-для управления зависимостями клиента
  • Gruntfile.js-здесь вы определяете задачи

Завершение работы

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

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

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

  • глоток.js альтернатива Хмыкнуть. Чем больше вы погружаетесь в ворчание, тем больше вам захочется глотнуть (ИМХО).
  • browserify альтернатива Requiere. Прочитайте это
  • соберите генератор статического сайта для узла.Джей Си, ворчи.js, и Йомен
5

Роман,

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

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

yo webapp --coffee

Обработка заказа активов, который можно обработать из индекса.HTML-файл.

Когда вы хотите подготовить приложение к работе, просто введите

grunt build

, что позволит унифицировать и минимизировать все ваши активы и выкинуть все это из папки dist.

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

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

1

Не ответ на мой первоначальный вопрос, а скорее указатель для кого-то, кто хотел бы реализовать тот же рабочий процесс, который я искал. Я закончил тем, что написал пользовательский Gruntfile, используя Grunt-инжектор, чтобы сделать " взрыв активов в индекс.HTML-код" часть, грунт-беседка-установить, чтобы добавить активы Bower и настройка на грунт-usemin, хрюкать-ВНО-функция concat, хрюкать-ВНО-cssmin и хрюкать-ВНО-уродовать соответственно.

0