Как добавить gsap в gulp?

Question

[Enickckey]

Приветствую.
Подскажите как правильно добавить gsap и именно scrolltrigger в gulp?
Вот моя сборка

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const watch = require('gulp-watch');
const concatCss = require('gulp-concat-css');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemap = require('gulp-sourcemaps')
const pug = require('gulp-pug')
const del = require('del')

gulp.task('pug', (callback) => {
    return gulp.src('./src/pug/pages/**/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream())
    callback()
})

gulp.task('scss', (callback) => {
    return gulp.src('./src/scss/style.scss')
        .pipe(sourcemap.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 4 versions']
        }))
        .pipe(sourcemap.write())
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback()
});

gulp.task('cleanbuild', () => {
    return del('./build')
})

gulp.task('copyimg', (callback) => {
    return gulp.src('./src/img/**/*.*')
        .pipe(gulp.dest('./build/img/'))
    callback()
})

gulp.task('copyjs', (callback) => {
    return gulp.src('./src/js/**/*.*')
        .pipe(gulp.dest('./build/js/'))
    callback()
})
gulp.task('copyfonts', (callback) => {
    return gulp.src('./src/fonts/**/*.*')
        .pipe(gulp.dest('./build/fonts/'))
    callback()
})

gulp.task('watch', () => {
    watch(['./build/js/**/*.*', './build/img/**/*.*'], gulp.parallel(browserSync.reload))
    watch(['./src/scss/**/*.scss'], gulp.parallel('scss'))
    watch(['./src/pug/**/*.pug'], gulp.parallel('pug'))
    watch(['./src/img/**/*.*'], gulp.parallel('copyimg'))
    watch(['./src/js/**/*.*'], gulp.parallel('copyjs'))
});


gulp.task('server', () => {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
});

gulp.task('default',
    gulp.series(
        gulp.parallel('cleanbuild'),
        gulp.parallel('scss', 'pug', 'copyimg', 'copyjs','copyfonts'),
        gulp.parallel('server', 'watch')
    )
);

Я скачал gsap.
Но в файле main.js при импорте

import {gsap} from "gsap"
import {ScrollTrigger} from "gsap/ScrollTrigger.min.js"

Я получаю такую ошибку

Как правильно импортировать файлы, чтобы можно было бы работать с библиотекой?

Answer 1

[Александр]

Подключайте в HTML только тот main.js, т. к. gsap и ScrollTrigger Вы подключили в него.

Comments

[Enickckey]

Первая ошибка действительно пропала. Но вторая увы нет и все равно ничего не работает

[Александр]

Enickckey, теперь Вы должны не просто копировать JS, а собирать его. Например при помощи Rollup:

package.json

{
  "name": "workspace",
  "version": "1.0.0",
  "scripts": {
    "build": "gulp"
  },
  "dependencies": {
    "gsap": "^3.9.1"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.1.3",
    "gulp": "^4.0.2",
    "rollup": "^2.70.0"
  }
}

Gulpfile.js

const { series } = require('gulp');
const rollup = require('rollup');
const { nodeResolve } = require('@rollup/plugin-node-resolve');

const build = async (done) => {
    const bundle = await rollup.rollup({
        input: './src/index.js',
        plugins: [nodeResolve()]
    });

    await bundle.write({
        dir: './dist',
        format: 'umd',
        sourcemap: true
    });

    done();
};

exports.build = build;
exports.default = series(build);

src/index.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

Результат

Документация к формату вывода.