• доступно о веб-разработке
17.12.2014 JavaScript, Node.JS, Сервер, Технологии, Уроки , , , ,

Gulp — автоматизация процесса разработки

gulp

Значимую роль в технологиях веб-разработки приобрели система автоматизации процесса разработки. Наиболее известные из них — это старичок Grunt и более молодой Gulp, который отличается более простым и понятным синтаксисом.

Если вы не пользуетесь этой программой, то самое время начать это делать.

Потому что она может:

  • Автоматически перезагружать браузер при любых изменениях в файлах проекта (более не надо затирать клавиши Ctrl/Cmd+R)
  • Сжимать и склеивать скрипты и стили
  • Проверять скрипты и стили на ошибки
  • Использовать различные препроцессоры — SASS/LESS/Stylus, Jade и так далее.
  • Оптимизировать изображения

Конечно, возможностей больше. Здесь лишь перечислены основные из них.

Давайте попробуем пройти весь путь от установки Gulp до создания простейшей конфигурации программы. Посмотрим, насколько она облегчит жизнь в рамках одного проекта.

Установка

Устанавливается Gulp при помощи NPM (Node Package Manager).

Подразумевается под тем, что вы уже установили Node.JS на свой компьютер. Или, по-крайней мере, знаете, как это сделать.

Если ещё не установили, то обязательно пройдите по ссылке. Скачайте установщик для вашей операционной системы и установите его.

Устанавливаем Gulp:

npm install gulp -g

Структура папок в проекте носит произвольный характер. Здесь указана такая структура, которая удобна автору статьи.

Перейдём в директорию с проектом и создадим пустой файл для конфигурации.

touch gulpfile.js

Теперь нам необходимо установить все дополнительные пакеты, которые мы будем использовать по ходу автоматизации рабочего процесса.

sudo npm install gulp-jade gulp-stylus gulp-coffee gulp-livereload nib gulp-imagemin gulp-uglify gulp-concat connect connect-livereload serve-static --save-dev

Конфигурация

Приступаем к настройке файла конфигурации gulpfile.js, который мы создали в корневом каталоге проекта.


После сохранения файла, в консоли, находясь в папке проекта, запустите команду gulp.

 

Тестовый проект с уже созданными файлами для Stylus, Jade и CoffeeScript можно скачать по адресу:

Simple template for gulp working dir.
https://github.com/codemotion/gulp-tpl
4 forks.
1 stars.
0 open issues.
Recent commits:

 

Если у вас есть какие-либо вопросы по этой теме, задавайте их в комментариях.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Создаем VPS на DigitalOcean

Последний ролик на канале товарища Sorax рассказывает о том, как создать VPS на сервисе DigitalOcean. httpvh://www.youtube.com/watch?v=W__6m_meMm0

Закрыть