Как использовать gulp.js

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

Все команды выполняются через консоль. Если у вас Windows, то можете использовать ее стандартный терминал или более удобный эмулятор консольного окна ConEmu.

1. Устанавливаем gulp сначала глобально:

npm install gulp -g

2. Переходим в папку нашего проекта:

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

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

npm init

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

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

npm install gulp --save-dev

5. Устанавливаем необходимые gulp плагины:

npm install gulp-clean-css gulp-uglify gulp-concat gulp-sourcemaps --save-dev

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

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

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

gulp

Теперь в папке temp/olive/css создаются файлы styles.min.css и styles.min.css.map:

а в папке temp/olive/js файлы scripts.min.js и scripts.min.js.map:

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

gulp task othertask

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

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

gulp watch

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

Ctrl+C