Настройка и работа с Gulp.js

Рассмотрим процесс установки и порядок работы с потоковым сборщиком проектов Gulp.js

1. В консоли устанавливаем gulp сначала глобально

npm install gulp -g

2. В консоли переходим в папку нашего проекта
(например, F:\OpenServer\domains\codeguru.dev)

3. Рассмотрим работу с gulp на примере создания скрипта для минификации и конкатенации css и js файлов.

Для создания файла package.json выполняем команду

npm init

В результате в корневой папке проекта получим файл package.json

4. В консоли устанавливаем gulp локально в корень проекта

npm install gulp --save-dev

5. В консоли устанавливаем необходимые gulp плагины

npm install gulp-minify-css gulp-concat gulp-uglify --save-dev

Теперь наш файл package.json выглядит так:

6. В корне проекта создаем файл gulpfile.js такого содержания

7. Для запуска созданного дефолтного сценария выполняем команду

gulp

Теперь в папке temp/foxy/css создается файл styles.min.css, а в папке temp/foxy/js создается файл scripts.min.js

8. Для запуска определенного сценария выполняем команду

gulp task othertask

Например: gulp minify-concat-styles

9. Для запуска отслеживания изменений в наших стилях и скриптах запускаем

gulp watch

10. Для остановки gulp watch используем команду

Ctrl+C