Skip to content

Latest commit

 

History

History
77 lines (63 loc) · 5.25 KB

README.md

File metadata and controls

77 lines (63 loc) · 5.25 KB
Raw

Сборка проекта на Gulp 4

Быстро настроить сборку вашего проекта на Gulp и писать код на:

  • HTML
  • CSS, SCSS, SASS,
  • Java Script, Type Script

Функционал сборки

  • компиляция препроцессора PUG
  • минификация HTML
  • компиляция препроцессоров SASS
  • минификация CSS
  • автоматическое добавление префиксов CSS
  • транспиляция языков Type Script
  • преобразования кода ECMAScript 2015 + в обратно совместимую версию JavaScript с помощью Babel
  • минификация JavaScript
  • объединение нескольких файлов JavaScript в один
  • сжатие изображений
  • отслеживание новых изображений, которые еще не были сжаты
  • отслеживание изменений в файлах и автоматический запуск повторной обработки
  • генерация sourcemaps
  • отображение размеров файлов в терминале
  • локальный сервер с автоматическим обновлением страницы при изменении файлов

Input

HTML Styles Scripts Images
Каталог src/ src/styles/ src/scripts/ src/img/
Расширение .html .css, .sass, .scss .js, .ts .jpg, .png, .gif

Output

HTML CSS JavaScript Images
Путь dist/ dist/css/style.min.css dist/js/main.min.js dist/img/

Зупуск:

  1. Скачать все файлы проекта
  2. В терминале перейти в каталог проекта
  3. Выполнить команду: npm i (должен быть установлен node.js)
  4. Создать каталоги и файлы
  5. Выполнить команду: gulp (запуск таска default)
  6. Писать свой код и наслаждаться автоматической сборкой проекта.

Используемые NPM пакеты

gulp Сборщик Gulp
gulp-htmlmin Минификация HTML файлов
gulp-pug Pug препроцессор HTML кода
gulp-less Компиляция Less файлов
gulp-stylus Компиляция Styl файлов
sass Компилятор Sass
gulp-sass Компиляция Sass и Scss файлов
gulp-uglify Сжатие и оптимизация Java Script кода
gulp-coffee Преобразует Coffee Script в Java Script
gulp-typescript Преобразует Type Script в Java Script
typescript Язык Type Script
gulp-babel Преобразует Java Script в старый стандарт
@babel/core Ядро Babel
@babel/preset-env Пресет для компиляции Babel
gulp-clean-css Минификация и оптимизация CSS файлов
del Удаление каталогов и файлов
gulp-sourcemaps Карта строк кода для инструментов разработчика
gulp-autoprefixer Автоматическое добавление префиксов в CSS
gulp-imagemin Сжатие изображений
gulp-concat Объединение нескольких файлов в один
gulp-newer Отслеживание только новых файлов
gulp-rename Переименовывает файлы
gulp-size Отображение информации о размерах файлов в терминале
browser-sync Автоматическое обновление сайта при изменении файлов

Установка