В этой статье я приведу краткую инструкцию по основным для себя функциям gulp’a. Что они из себя представляют и как ими пользоваться.
browser-sync // Для обновления файлов в реальном времени
gulp // Основной инструмент для сборки приложения
gulp-autoprefixer // Авто префексы для css атрибутов
gulp-clean-css // минификация css
gulp-ftp // Для выгрузки проеткта на ftp
gulp-json-transform // Для извлечения данных и ftp.json для gulp-ftp
gulp-rigger // Подключения файлов (include)
gulp-sass // Sass синтаксис
gulp-sourcemaps // Создание sourcemaps для css/js
gulp-uglify // Минимизация js
gulp-watch // Следит за изменением файлов
rimraf // Удалает все файлы. Например папку build.
GIT
1) git clone https://github.com/space2pacman/frontend-starterpack.git
CMD
1) cd C:/Путь/до/репозитория
2) npm install -i установка всех зависимостей.
3) gulp _default запуск проекта
CSS
Все файлы scss подключаем в main.scss через @import из него же на выходе будет main.css.
JavaScript
Все файлы js подключаем в main.js через //= на выходе main.js соответственно.
HTML
В html можно подключать файлы через //=. Удобно делать единый header и footer страницы и везде их подключать дабы потом удобно было редактировать.