Данный пакет содержит в себе необходимые npm плагины для быстрой верстки:
- browser-sync – встроенный сервер для редактирвоаниия sccs файлов без перезагрузи страницы.
- gulp-sass – компилятор sass файлов
- gulp.spritesmith – автоматическое создание спрайтов
- gulp-autoprefixer – создание префиксов css для кросброузерности
- gulp-sourcemaps – для генерации карты css
- gulp-ftp – для отправки изменений на сервер
- gulp-file-include – для подключения частей шаблона, например header, footer
- gulp-imagemin – минификатор изображений
- gulp-group-css-media-queries – для групировки медиазапросов
- и другие важные плагины…
Как начать работу
- Копируем репозиторий в папку в которой планируем делать верстку. Для этого запускаем в консоли
$ git clone https://github.com/karakushan/start-sass-gulp.git - Запускаем
npm updateв консоли для скачивания, обновления npm плагинов - Для старта сервера запускаем команду
gulp
Описание папок
Папка app содержит поддиректории в которых должны находится исходники, которые будут преобазованны в файлы пригодные для отображения на сайте.
- html – содержит исходники html файлов.
- scss – исходники sass файлов в формате scss
- img – папка с исходными изображениями
- img/icons – папка с иконками (для генерации спрайта)
- js – javascript файлы
Папка dist содержит в себе компилированные файлы пригодные для отображения на сайте.
Поключение частей шаблона в html
Теперь нет необходимости верстать весь шаблон наново потому что у нас есть прекрасный плагин под названием gulp-file-include. Это удобно для подключения повторяющихся блоков на всех страницах html шаблона. Использйте конструкцию @@include('./view.html') для того, чтобы включить блок view.html в общем шаблоне.
Благодарности
Если мой проект помогает вам, то я не против если вы отблагодарите хоть какой-то суммой. Для сотрудничества пишите на мою почту: я дам вам реквизиты для перечисления средств.
Желаю плодотворной работы, и хорошего настроения. Удачи вам!!!
