В последнее время я перешел на Gulp с Grunt в своих любимых проектах. Почему ты спрашиваешь? Потому что это проще, быстрее и фокусируется на коде, а не на конфигурации. Мне нравится код! В этом посте я дам краткое введение в Gulp и поделюсь простым рабочим процессом, который является отличным началом для начала использования Gulp.

Краткое введение в Gulp

Gulp, как и Grunt, — это средство запуска задач для javascript, использующее для запуска Node.js. Причина использования средства запуска задач состоит в том, чтобы автоматизировать трудоемкие, но важные задачи в вашей повседневной работе, что сделает вас более продуктивным разработчиком. В Gulp вы пишете все задачи на… подождите… javascript! Будучи написанным в коде, он дает вам больше гибкости, чем конфигурация, выполненная с объектами javascript. Он использует потоки Node.js, что в упрощенном виде означает, что вы:

  1. иметь ввод (некоторые файлы, возможно, javascript или css)
  2. над которым вы выполняете действие
  3. и, наконец, отправить на некоторый выход

Думайте об этом как о конвейере, в котором в определенных точках выполняются действия, например. анализ, объединение, преобразование, минимизация, тестирование и т. д.

Чтобы еще больше конкретизировать, давайте посмотрим на простой API, который предоставляет Gulp:

  • gulp.task: задача/действие для выполнения
  • gulp.src: ввод, какие файлы
  • gulp.dest: вывод
  • gulp.watch: автоматически обнаруживает изменения и запускает задачи.

Может быть проще? 🙂

Простой рабочий процесс в Gulp

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

Установить

Я предполагаю, что вы знакомы с Node.js и у вас установлен менеджер пакетов npm. Давайте создадим проект node и package.json:

npm init

Установить глоток:

npm install gulp -g

Установите плагины Gulp, необходимые для нашего рабочего процесса:

npm install gulp-jshint gulp-mocha gulp-concat gulp-uglify gulp-livereload --save-dev

Создайте gulpfile.js (наш файл конфигурации Gulp.js) и потребуйте плагины:

var gulp = require('gulp'),
var jshint = require('gulp-jshint'),
var mocha = require('gulp-mocha'),
var concat = require('gulp-concat'),
var uglify = require('gulp-uglify'),
var livereload = require('gulp-livereload');

Линтинг с помощью gulp-jshint

JSHint — это «инструмент, который помогает обнаруживать ошибки и потенциальные проблемы в вашем коде JavaScript». Давайте используем его в качестве первого шага в задаче сборки, добавим следующий код в gulpfile.js:

gulp.task('build', function() { 
   return gulp.src('src/scripts/**/*.js')
      .pipe(jshint()) 
      .pipe(jshint.reporter('default'));
});

Что здесь случилось? Была определена задача под названием «сборка» и предоставлена ​​функция, являющаяся содержанием задачи. Функция Gulp src api используется для выбора входных данных (наших файлов javascript) перед использованием канала для передачи на следующий шаг, который использует JSHint для анализа нашего кода и, наконец, передачи на следующий шаг в канале, который сообщает результат. Следующую задачу можно запустить из командной строки:

gulp build

Конкатенация с помощью gulp-concat

Этот плагин объединяет несколько файлов javascript в один связанный файл, который затем является единственным файлом, на который нужно ссылаться с нашей HTML-страницы. Давайте добавим его к нашей существующей задаче:

gulp.task('build', function() { 
   return gulp.src('src/scripts/**/*.js')
      .pipe(jshint()) 
      .pipe(jshint.reporter('default'))
      .pipe(concat('bundle.min.js'))
      .pipe(gulp.dest('public/js'));
});

Как видите, мы просто добавляем это в цепочку каналов, то есть оно будет принимать выходные данные предыдущего действия и продолжать работать с ними, объединяя несколько исходных файлов в один новый файл с именем bundle.min.js. Он поместит его в папку public/js с помощью Gulp dest api.

Минификация с помощью gulp-uglify

Этот плагин возьмет файл (ы) javascript и «разберет, сожмет и украсит». Мы хотим сделать наш окончательный файл javascript как можно меньше, чтобы сократить время загрузки. Добавим:

gulp.task('build', function() { 
   return gulp.src('src/scripts/**/*.js')
      .pipe(jshint()) 
      .pipe(jshint.reporter('default'))
      .pipe(concat('bundle.min.js'))
      .pipe(gulp.dest('public/js'))
      .pipe(uglify())
      .pipe(gulp.dest('public/js'));
});

На этом наша задача по сборке завершена, и теперь у нас есть без проблемный (э-э-э, надеюсь), минимизированный единственный файл javascript, на который можно ссылаться с нашей HTML-страницы.

Тестирование с глоток-мокко

Mocha — это «тестовая среда javaccript, работающая на Node.js, с поддержкой браузера, асинхронным тестированием, отчетами о покрытии тестами и использованием любой библиотеки утверждений. Это довольно круто, поэтому давайте добавим для него задачу:

gulp.task('test', function() { 
   return gulp.src('test/*.js')
      .pipe(mocha());
});

Это возьмет все тестовые файлы javascript и передаст их mocha, который проведет все тесты.

Автоматическая перезагрузка с помощью gulp-livereload

Этот плагин отслеживает изменения в вашей файловой системе (например, ваш CSS, изображения или javascripts). Как только изменение обнаружено, браузер автоматически обновляется. (Чтобы это заработало, вам нужно установить плагин (вот для Chrome) или включить фрагмент скрипта.) Давайте создадим задачу watch, используя gulp-livereload и Gulp api watch:

gulp.task('watch', function() {
   gulp.watch('src/scripts/**/*.js', ['build']);
   livereload.listen();
   gulp.watch(['public/**']).on('change', livereload.changed);
});

Используя Gulp watch api, мы обнаруживаем изменения в наших файлах javascript и запускаем задачу «сборки». Затем я запустил сервер livereload и буду слушать изменения. Наконец, когда новый пакет bundle.js будет создан и помещен в общедоступную папку, livereload обнаружит это изменение и перезагрузит браузер. Это означает, что как только вы сохраните исходный файл javascript, изменения будут отражены в браузере.

Задача по умолчанию, чтобы сделать все это

Наконец, давайте создадим задачу по умолчанию, которая будет собирать и просматривать наши исходные файлы:

gulp.task('default', ['watch', 'test', 'build']);

Эта задача «по умолчанию» имеет три зависимости, которые она будет запускать, это наши недавно созданные задачи «тест», «наблюдение» и «сборка». Итак, теперь все, что вам нужно сделать, это запустить это из командной строки:

gulp

Конечно, вы можете запускать эти задачи по отдельности:

gulp test
gulp build
gulp watch

Вот окончательный код в gulpfile.js

var gulp = require('gulp'),
var jshint = require('gulp-jshint'),
var mocha = require('gulp-mocha'),
var concat = require('gulp-concat'),
var uglify = require('gulp-uglify'),
var livereload = require('gulp-livereload');

gulp.task('build', function() { 
   return gulp.src('src/scripts/**/*.js')
      .pipe(jshint()) 
      .pipe(jshint.reporter('default'))
      .pipe(concat('bundle.min.js'))
      .pipe(gulp.dest('public/js'))
      .pipe(uglify())
      .pipe(gulp.dest('public/js'));
});

gulp.task('test', function() { 
  return gulp .src('test/*.js')
      .pipe(mocha());
});

gulp.task('watch', function() {
   gulp.watch('src/scripts/**/*.js', ['build']);
   livereload.listen();
   gulp.watch(['public/**']).on('change', livereload.changed);
});

gulp.task('default', ['watch', 'test', 'build']);

Надеюсь, вам понравилось это введение в Gulp.

Первоначально опубликовано на сайте thecuriousdeveloper.com 4 июня 2015 г.