Gulp инструмент для удобной и быстрой front-end разработки!

tsumbaluk.in.ua 5 Октябрь 2016

Что такое система сборки и что она умеет?

Это инструмент для автоматизации повторяющихся задач таких как:

  • Сборка файлов для разработки и продакшн окружений.
  • Минификаци и конкатенация CSS-файлов JS-файлов.
  • Компиляция SASS, LESS
  • Авто растановка необходимых вендорных префиксов.
  • Так как gulp работает на Node.js то легко позволяет насторить слежение за файлами(livereload, browser-sync).
  • Оптимизация картинок, а так же работа со спрайтами, и многое другое.

Установка

Для начала нужно установить Node.js. Запустить консоль (я использую консоль Git).
Команда ниже установит gulp глобально.

$ npm install -g gulp
также необходимо установить Jade шаблонизатор. Команда ниже установи его глобально
$ npm install jade --global
после установки скачайте готовый стартовый шаблон вот здесь: StartGulp!
Зайдите в корень проекта и введите следуюющую команду (она проиницилизирует зависимости проекта):
$ npm install --save-dev gulp
У вас должна появиться новая папка node_modules. Теперь установим туда все необходимые плагины веедите:
$ npm install
По завершению достаточно продолжительной как по мне установки достаточно запустить проект:
$ gulp
Ну вот и все теперь ваш проект доступен по ссылке http://localhost:3000/ (на даном порту у вас не возникнет проблем со скайпом и службами windows).

Что входит в проект?

В первую очередь необходимо описать зависимости gulp для этого существует package.json где есть имя проекта, версия, описание и самое главное разнообразные зависимости которые и творят чудеса!
Стоит отметить что установить каждый плагин можно отдельно и сузить либо расширить функционал данного шаблона!

И так что же есть в шаблоне:

  • 'gulp-concat-css': конкатенация css
  • 'gulp-minify-css': минимизация css
  • 'gulp-sass': компилятор популярного css препроцессора
  • 'gulp-autoprefixer': авто расстановка вендорных префиксов
  • 'browser-sync': перезагружает окно при изменении отслеживаемых файлов
  • 'gulp-imagemin': оптимизация изображений
  • 'gulp-concat': конкатенация javaScript
  • 'gulp-uglify': минимизация javaScript
  • 'gulp-jade': Html препроцессор

Новое в блоге

Бесплатный хостинг!
tsumbaluk.in.ua || 29.06.2017

Бесплатный хостинг!

e2e тестирование приложений. Используя Protractor
tsumbaluk.in.ua || 30.04.2017

e2e тестирование приложений. Используя Protractor

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Как определить страну и город по IP адресу, javascript?
tsumbaluk.in.ua || 05.10.2016

Как определить страну и город по IP адресу, javascript?