Как добавить отдельный js в Gulp 4 (сборка от Фрилансер по жизни)?

Для добавления отдельного JavaScript-файла в сборку с помощью Gulp 4 (сборка от Фрилансер по жизни) вам потребуется выполнить несколько шагов.

1. Установите Gulp 4 и необходимые плагины:

Убедитесь, что у вас установлена последняя версия Node.js, затем установите Gulp 4 глобально с помощью команды в командной строке:

npm install gulp-cli -g

Перейдите в корневую папку вашего проекта и создайте новый файл package.json с помощью команды:

npm init

Далее установите Gulp 4 и необходимые плагины локально:

npm install [email protected] gulp-concat gulp-uglify --save-dev

2. Создайте файл gulpfile.js:

В корневой папке вашего проекта создайте новый файл с именем gulpfile.js. В этом файле мы будем писать сценарии для Gulp. Откройте файл в текстовом редакторе.

3. Подключите необходимые модули:

Сначала импортируйте модули, включая Gulp, и необходимые плагины:

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

4. Создайте задачу для сборки JavaScript:

Добавьте следующий код, чтобы создать задачу для сборки отдельного JavaScript-файла:

gulp.task('scripts', function() {
return gulp.src('src/**/*.js') // путь к исходным файлам JavaScript
.pipe(concat('bundle.js')) // объединение всех файлов в один
.pipe(uglify()) // минификация JavaScript
.pipe(gulp.dest('dist/js')); // путь для сохранения результата
});

Здесь мы берем все JavaScript-файлы из папки "src", объединяем их в один файл "bundle.js", минифицируем его и сохраняем в папку "dist/js".

5. Создайте задачу для отслеживания изменений:

Создайте также задачу, которая будет отслеживать изменения в ваших JavaScript-файлах и автоматически запускать задачу сборки:

gulp.task('watch', function() {
gulp.watch('src/**/*.js', gulp.series('scripts'));
});

Здесь мы отслеживаем все JavaScript-файлы в папке "src" и при изменении запускаем задачу "scripts".

6. Создайте задачу по умолчанию:

Добавьте задачу по умолчанию, которая будет выполняться при запуске Gulp без указания конкретной задачи:

gulp.task('default', gulp.series('scripts', 'watch'));

Здесь мы указываем, что при запуске Gulp по умолчанию будут запускаться задачи "scripts" и "watch" одна за другой.

7. Запустите Gulp:

Сохраните изменения в файле gulpfile.js и перейдите в командную строку. Запустите Gulp, введя команду:

gulp

Gulp начнет отслеживать изменения в ваших JavaScript-файлах и автоматически компилировать их при каждом изменении.

Вот и всё! Теперь вы добавили отдельный JavaScript-файл в вашу сборку с помощью Gulp 4. У вас есть полный контроль над процессом сборки и возможность автоматической компиляции ваших JavaScript-файлов при изменении.