[Из песочницы] 7 шагов к запуску gh-pages для AngularJS-проектов, созданных с помощью Yeoman
В этой публикации я расскажу о том, как создать GitHub Pages для AngularJS-проектов, которые были созданы с помощью генераторов Yeoman. gh-pages удобен тем, что позволяет наглядно увидеть веб-страницу, а не ее исходный код. Как написано в описании gh-pages, они используются для статических HTML-страниц [1]. Однако, и в случае AngularJS-фреймворка, gh-pages могут быть полезны.
Для того, чтобы все работало, должны быть установлены заранее несколько компонент:
- git [2]
- node [3]
- npm [4]
- yeoman [5]
- grunt [6]
- bower [7]
- yeoman angular генератор [8]
Инструкции по установке этих компонент можно найти в сети или здесь на Хабре. Проверить, что все установлено можно так:
В этой статье я бы хотела сконцентрироваться на том, как сделать так, чтобы заработали gh-pages, поэтому переходим дальше.
1) Для начала нам понадобится создать новый репозиторий на GitHub [9]
Клонируем репозиторий в папку с нашими проектами [10], и переходим во вновь созданную директорию.
2) Надо создать новый проект, используя yeoman angular генератор [11]
Чтобы проверить, что все работает корректно, запускаем grunt serve . Проект запускается локально, и открывается в браузере.
Теперь нужно вернуться обратно в консоль, и остановить сервер. Запускаем grunt build. После того, как проект сбилдился, надо открыть .gitignore в текстовом редакторе или IDE. Оттуда надо удалить строку dist
3) Собственно, переходим к тому, ради чего я начала писать эту статью. Будем добавлять dist в gh-pages. Подробную инструкцию можно найти здесь [12]. Надо запустить grunt build. После того, как проект успешно сбилдился, в консоли добавляем dist в GitHub-репозиторий.git add dist && git commit -m "Initial dist subtree commit"
4) Деплоим subtree в ветку gh-pages (мы сейчас в master-ветке)git subtree push --prefix dist origin gh-pages
5) Дальше продолжаем работать в master-ветке. Каждый раз, когда надо задеплоить изменения в gh-pages, запускаем grunt build и пушаем изменения в sbtree git subtree push --prefix dist origin gh-pages
6) Страницу можно посмотреть по такой ссылке http(s):// . В моем случае это github.com/sleepydisaster/ghpage2
7) А так она выглядит в репозитории на GitHub.
В ветку gh-pages добавилась только папка dist с ее содержимым.
Далее можно продолжать работать в master-ветке, и комитить изменения как обычно. Когда же захочется добавить изменения в ветку gh-pages надо будет сначала сбилдить проект (grunt build). Потом запушать эти изменения в ветку gh-pagesgit subtree push --prefix dist origin gh-pages
Таким образом, теперь у нас есть страница, где можно посмотреть на результат своих трудов не в форме кода, а в форме обычной страницы. В данной заметке не рассмотрен случай, когда к нашему сайту прикручен бэкэнд. Почитать об одном из таких случаев можно здесь: [13]
