Как использовать Gulp?

Сейчас расплодилось очень много всяких модных инструментов, которые помогают нам выполнять свою работу. Одним из таких инструментов есть Gulp JS (gulpjs.com). Это простой надежный и удобный помощник, который за вас выполнит много монотонной грязной работы.

В данной зарисовке речь пойдет о его настройке под некоторые нужды. Я не стану углубляться, что такое Gulp JS, что он может делать для вас (для этого понадобилось бы очень много времени и букв). Я расскажу на своем примере, что именно он мне помог сделать в последнем проекте.

Итак, представим, что вы уже установили его себе глобально и в папку с проектом. Далее вам необходимо будет создать в корне папки проекта файл с именем «gulpfile.js» — это файл с настройками нашего помощника. В нем мы будем описывать, что будет делать Gulp в нашем проекте.

Пустой стартовый gulpfile.js будет выглядеть так:

Пока что он ничего не будет делать. Предположим, мы хотим, чтобы Gulp конвертировал Sass (Scss) в CSS и минифицировал результирующий  CSS файл. При этом, пусть он следит за изменениями исходного Sass файла (или нескольких).

Для этих задач нам понадобятся несколько плагинов для Gulp:

  • gulp-sass
  • gulp-cssmin
  • gulp-rename

Ищем их тут http://gulpjs.com/plugins/ и устанавливаем таким же способом, каким поставили себе Gulp.

Далее идем в файл gulpfile.js и подключаем новые модули:

Теперь нужно каждому модулю рассказать, что мы от него хотим. Для начала, конвертируем Sass в CSS:

Добавили таск «styles». Объясню, что он выполняет: берем все файлы с расширением «.scss» из всех внутренних папок из папки «scss», конвертируем их и складываем в папку «css». Папки «scss» и «css» в данном случае находятся в корневой папки проекта на одном уровне. В моем случае был один файл «app.scss», который конвертировался в файл «app.css»

Далее минифицируем результирующий файл «app.css», добавляя к нему суффикс «.min»:

Добавили таск «cssmin». Тут мы берем файл «app.css» из папки «css», минифицируем его, переименовываем, добавляя суффикс «.min», и закидываем в папку «dist», которая тоже находится на одном уровне с папкой «css».

Теперь добавим предпоследний штрих — заставим Gulp следить за изменениями в Sass файлах:

Мы добавили таск «watch», который будет следить за всеми файлами с расширением «.scss» из всех внутренних папок из папки «scss», и при любом изменении выполнять таск «styles», который, напомню, конвертирует scss в css.

Теперь осталось вызвать все задачи при запуске Gulp, добавив их в основной таск «default»:

При старте Gulp выполнятся все три таска, потому что «watch» косвенно выполнит «styles».

Надеюсь, что-нибудь из вышеописанного вам понятно. Gulp может выполнять гораздо больше полезных вещей, как, например, объединение (конкатенация) файлов, оптимизация изображений и так далее… Полный список возможностей тут: http://gulpjs.com/plugins/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *