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 заключалось в следующем:
- Сохраняйте переменные, такие как цвета и шрифты, чтобы их можно было повторно использовать при стилизации приложения.
- Устраните необходимость вручную добавлять префиксы браузера для свойств 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 г.