Работа со скриптами
Используемые решения:
gulp-concat
объеденение скриптов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