Как использовать 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