2-й пост из серии про приложение Career Buddy. Предыдущий пост был Напарник по карьере, часть 1: добавление адаптивной легенды к диаграммам D3 с помощью Angular.

В этом посте подробно описан полный рабочий процесс Grunt и Heroku, включая:

  • очистка целевой папки
  • создание файлов css из файлов sass
  • минификация и объединение файлов .js и .css
  • очистка кеша
  • копирование файлов в папку dist/
  • создание папки dist/ при развертывании в Heroku

Ссылка на этот Gruntfile в посте.

Очистка целевой папки

Первым шагом в процессе сборки является удаление всех ранее созданных файлов и папок из dist/.

Создание файлов CSS из файлов SASS

SASS — это язык сценариев, который интерпретируется в CSS. Думайте об этом как о CSS со сверхспособностями. В Career Buddy основное использование SASS заключалось в следующем:

  1. Сохраняйте переменные, такие как цвета и шрифты, чтобы их можно было повторно использовать при стилизации приложения.
  2. Устраните необходимость вручную добавлять префиксы браузера для свойств CSS3, таких как box-shadow и border-radius.

Установите ‘grunt-contrib-compass’. Задача «компас» анализирует любые файлы sass/scss и генерирует файлы css. Просто укажите, куда должен идти сгенерированный файл css.

В приложении нет уменьшенных фрагментов html или изображений, поэтому эти файлы, а также index.html просто копируются в dist/.

Минификация и объединение

Минимизация и объединение файлов позволяет веб-странице быстрее обслуживать свои ресурсы, потому что 1) выполняется меньше запросов к серверу и 2) каждый запрос передает меньше данных.

Установите ‘grunt-contrib-compass’. Задача «компас» анализирует любые файлы sass/scss и генерирует файлы css. Просто укажите, куда должен идти сгенерированный файл css.

Очистка кеша

Одна из проблем с папками dist/ (или public/) заключается в том, что исходные файлы могут изменяться, но сгенерированные файлы будут кэшироваться браузером и не обновляться.

grunt-hashres хеширует файлы js и css и переименовывает объявления ‹script› и ‹link›, которые ссылаются на них в index.html.

Развертывание в Heroku

Повторяю, минимизация и объединение файлов ускоряют обслуживание ресурсов веб-сайта. Проблема с таким рабочим процессом заключается в том, что коммит сгенерированных файлов забивает историю git. Какое решение?

Сначала я попытался добавить свою задачу сборки grunt в свойство postinstall моего файла package.json, но Heroku не смог запустить задачу grunt.

У @stephanmelzer есть отличное решение в форке официального пакета Node.js от Heroku, которое проверяет, существует ли файл Grunt (Gruntfile.js, Gruntfile.coffee или grunt.js), и, если он существует, выполняет задачу heroku, запуская grunt. геройку. Следуйте инструкциям в README репозитория. Если компас не является частью вашего процесса сборки, используйте версию с поддержкой только grunt.

Первоначально опубликовано на www.shanemkeller.com, сентябрь 2014 г.