Работа со скриптами

Используемые решения:

1. gulp-concat объеденение скриптов
2. gulp-uglify-es сжатие скриптов

Давайте установим gulp-concat и gulp-uglify-es командой:

npm i gulp-concat gulp-uglify-es --save-dev

Для начала определим константы в gulpfile.js:

gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require('gulp');
// подключаем gulp-concat
const concat = require('gulp-concat');
// подключаем gulp-uglify-es
const uglify = require('gulp-uglify-es').default;

Напишем функцию, которая определит логику работы gulp-concat и gulp-uglify-es:

gulpfile.js// определяем логику обработки скриптов
function scripts() {
  // берем файлы из источников
  return src([ 
    // пример подключения библиотеки
    'node_modules/jquery/dist/jquery.min.js', 
    // пользовательские скрипты, использующие библиотеку, должны быть подключены в конце
    'app/js/app.js', 
    ])
  // конкатенируем в один файл
  .pipe(concat('app.min.js')) 
  // сжимаем JavaScript
  .pipe(uglify()) 
  // выгружаем готовый файл в папку назначения
  .pipe(dest('app/js/')) 
}

• Создаем функцию scripts()
• Возвращаем через return и тут-же открываем источник посредством src для объекта Vinyl
• Файл в качестве источника
• Файл в качестве источника
• Конкатенация (слияние) содержимого перечисленных выше файлов в один виртуальный посредством модуля gulp-concat. Здесь мы должны указать название результирующего файла, в нашем случае это app.min.js. Для удобства каждый новый вызов .pipe() рекомендую писать с новой строки
• Сжатие скриптов посредством модуля gulp-uglify-es, обратите внимание, что данный модуль необходимо подключать с параметром .default в конце
• Выгрузка результирующего файла в указанную директорию посредством dest()

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

gulpfile.js// экспортируем функцию scripts() в таск scripts, значение после знака = это имеющаяся функция
exports.scripts = scripts;

Запускаем таск командой:

gulp scripts

Запуск в автоматическом режиме

Давайте сделаем так, чтобы при сохранении скриптов, происходило автоматическое обновление итогового файла. Для этого создадим новую функцию startwatch(), которая запустит наблюдение за изменениями файлов. Данную функию позже мы добавим в дефолтный экспорт для запуска вотчинга при старте:

gulpfile.js// автозапуск
function startwatch() {
  // мониторим все файлы JS в проекте и вызываем функцию scripts(), если есть изменения
  watch(["app/**/*.js", "!app/**/*.min.js"], scripts);
}

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

gulpfile.js// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(startwatch);

Полный gulpfile.js

gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем gulp-concat
const concat = require("gulp-concat");
// подключаем gulp-uglify-es
const uglify = require("gulp-uglify-es").default;
// автозапуск
function startwatch() {
  // мониторим все файлы JS в проекте и вызываем функцию scripts(), если есть изменения
  watch(["app/**/*.js", "!app/**/*.min.js"], scripts);
}
// определяем логику обработки скриптов
function scripts() {
  // берем файлы из источников
  return (
    src([
      // пример подключения библиотеки
      "node_modules/jquery/dist/jquery.min.js",
      // пользовательские скрипты, использующие библиотеку, должны быть подключены в конце
      "app/js/app.js",
    ])
      // конкатенируем в один файл
      .pipe(concat("app.min.js"))
      // сжимаем JavaScript
      .pipe(uglify())
      // выгружаем готовый файл в папку назначения
      .pipe(dest("app/js/"))
  );
}
// экспортируем функцию scripts() в таск scripts
exports.scripts = scripts;

Запускаем таск командой:

gulp