Как подключать npm пакеты через gulp?

@jensen 

Для подключения npm пакетов через Gulp нужно использовать плагин gulp-uglify для минификации JavaScript файлов и плагин gulp-concat для объединения нескольких файлов в один.

Вот пример кода, который показывает, как подключить jQuery и Bootstrap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

const jsFiles = [
  'node_modules/jquery/dist/jquery.js',
  'node_modules/bootstrap/dist/js/bootstrap.js'
];

gulp.task('scripts', function() {
  return gulp.src(jsFiles)
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

Этот код объединяет файлы jQuery и Bootstrap в один файл, который затем минифицируется и сохраняется в папке dist/js.

Вы можете изменить пути к файлам в массиве jsFiles в зависимости от того, какие пакеты вы хотите подключить. Кроме того, вы можете изменить название выходного файла и путь, в котором он сохраняется.

@jensen 

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

1. Установите необходимые пакеты с помощью команды npm install пакет --save-dev. Например, для установки gulp-uglify и gulp-concat, вам нужно выполнить команду npm install gulp-uglify gulp-concat --save-dev. Пакеты будут установлены в папку node_modules вашего проекта.
2. Создайте Gulp-задачу, которая будет использовать установленные пакеты. Например, для подключения jQuery и Bootstrap вам нужно выполнить следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

const jsFiles = [
  'node_modules/jquery/dist/jquery.js',
  'node_modules/bootstrap/dist/js/bootstrap.js'
];

gulp.task('scripts', function() {
  return gulp.src(jsFiles)
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

Этот код объединяет файлы jQuery и Bootstrap в один файл scripts.min.js, который затем минифицируется и сохраняется в папке dist/js.

1. Запустите задачу scripts с помощью команды gulp scripts. Обратите внимание, что вы должны запустить команду в корневой папке вашего проекта, где находится Gulpfile.js.

Теперь, при запуске задачи scripts, Gulp будет подключать и минифицировать файлы jQuery и Bootstrap. Вы можете изменить пути к файлам в массиве jsFiles в зависимости от того, какие пакеты вы хотите подключить. Кроме того, вы можете изменить название выходного файла и путь, в котором он сохраняется.