В этой статье я приведу краткую инструкцию по основным для себя функциям 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 страницы и везде их подключать дабы потом удобно было редактировать.