Данный шаблон сверстан по HTML5 и оптимизирован под Google PageSpeed, и содержит все что могло ускорить верстку и облегчить выполнение однообразных операций, возникающих при старте любого проекта.
Шаблон состоит из:
- папка
app: содержит исходный код проекта;- папка
css: содержит css файлы, транслированные из sass файлов папка sass; - папка
fonts: содержит шрифты проекта; - папка
js: содержит js файлы- файл
main.js: пользователские js коды пишется; - файл
libs.min.js: объедененные и минифицированные js файлы всех библиотек проекта; - файл
main.min.js: минифицированный main.js;
- файл
- папка
libs: содержит все библиотеки проекта; - папка
sass: содержит sass файлы; - файл
.htaccess: содержит правила для кэширования файлов на сервере;
- папка
- папка
dist: содержит готовый проект с html файлом, шрифтами, оптимизированными рисунками для Google PageSpeed, и минифицированные css и js файлы; - папка
bower_components: содержит скачанные bower пакеты; - файл
.bowerrc: содержит путь в папку, куда bower скачивает пакеты. Если нет этого файла, то по умолчанию скачивает в папку bower_components; - файл
.gitignore: содержит список директорий и файлов, которые git должен игнорировать; - файл
README.md: содержит инструкцию для проекта; - файл
bower.json: файл манифест, где хранится информация о нашем bower пакете и о его зависимостях; - файл
gulpfile.js: содержит gulp таски - файл
package.json: файл манифест, где хранится информация о нашем проекте и о его зависимостях;
- Скачайте start-template-gulp с GitHub;
- Установите модули Node.js выполнив команду npm i в терминале;
- Установите пакеты Bower командой bower-installer i в терминале;
- Открываете командную строку в корневой папке проекта, и запускаете команду gulp в терминале;
- Все HTML файлы должны иметь одинаковые стартовые наполнения, как у файла app/index.html;
- Весь ваш JS код пишите в app/js/common.js;
- Все Sass переменные размещаете в app/sass/_var.scss;
- Все CSS медиазапросы размещаете в app/sass/_media.scss;
- Все базовые стили размещаете в app/sass/_base.scss;
- Подключаем шрифты в файле app/sass/_fonts.scss;
- Если хотите установить другие пакеты или библиотеки, тогда
- выполняете в терминале команду bower i --save название_пакета;
- проверяете все ли нужные файлы пакета написаны в файле bower.json скаченного пакета в свойстве main;
- если нет, тогда в файле bower.json нашего проекта в свойстве sources создаем новое свойство с названием пакета, а его значением будет массив путей нужных файлов пакета;
- запускаем команду bower-installer, чтобы копировать эти нужные файлы с папкой bower_components в папку app/libs;
- импортируем css файлы пакета в файле libs.sсss;
- добавляем пути к js файлам пакета в таск libs-js в файле gulpfile.js;
- если пакет использует шрифты или изображения, то надо их переместить в папку fonts или img, и поменять пути к этим шрифтам и изображениям в файле libs.sсss. Там будет переопределятся css значение библиотек.
- gulp: запуск дефолтного gulp таска (sass, libs-js, main-js, watch, brower-sync) для разработки;
- build: сборка проекта на продакшн в папку dist (очистка, сжатие картинок, удаление всего лишнего);
Bower — клиентский пакетный менеджер, который упрощает установку сторонних библиотек с их зависимостями. Документацию по Bower можете прочитать (здесь)[https://bower.io]. Если не установлен Bower на вашем компьютере глобально, то установите выполнив в терминале команду:
npm install -g bower
Bower-Installer — инструмент, который скачивает bower пакеты в папку bower_components, потом перемещает нужные файлы из этих пакетов в папку, которая указана в bower.json проекта. Если нужные файлы не определены в bower.json соответствующего пакета, тогда пользователь прописывает их в bower.json проекта. Документацию по Bower-Installer можете прочитать (здесь)[https://github.com/rquadling/bower-installer]. В этом проекте используется bower-installer вместо bower.
Если не установлен Bower-Installer на вашем компьютере глобально, то установите выполнив в терминале команду:
npm install -g bower-installer