GSAP Integration with Gulp and Node 20.6.1

[rusticblonde]

Hi guys,

 

I am completely new to the GSAP interface so please bare with me. I am trying to get GSAP to compile into a bundled JS file. All of my modules are obviously within folder which are obviously concatenated into a main.js, suffixed and obviously placed into a dist folder.

 

Would it be easier if i loaded in the JS itself within the bundler folder (IE copied the relevant js file from the node module folder) in order to build? This is my current run script which compiles obviously fine.

 

gulp.task('scripts', async function() {
    gulp.src('assets/scripts/bundler/*', {"allowEmpty": true}) // Read from these directories

        .pipe(plumber({errorHandler: function(err){ // Pipe in error messages
            notify.onError({
                title:    projectName,
                message:  "Error: <%= error.message %>",
                "icon": path.join(__dirname + "/gulp-images/js--failed.png")
            })(err);
        }}))

        .pipe(concat('main.js')) // Concatenate JS files
        .pipe(rename({ suffix: '.min' })) // Rename to add '.min'
        .pipe(uglify()) // Minify JS

        .pipe(gulp.dest('../_dist/js')) // Spit out in '../_dist/js'

        .pipe(notify({ // Pipe in success messages
            title: projectName,
            "icon": path.join(__dirname + "/gulp-images/js.png")
        }));

});

 

Thankyou in advance

 

[GSAP Helper]

Sorry, I'm pretty lost - is there some kind of problem you're running into and trying to solve? I'm not a Gulp guy at all. We really try to keep the questions here focused on GSAP and its API, but maybe someone else with Gulp experience can chime in. If you need UMD files, you can grab them from the /dist/ directory. 

[rusticblonde]

On 10/11/2023 at 8:26 PM, GSAP Helper said:

Sorry, I'm pretty lost - is there some kind of problem you're running into and trying to solve? I'm not a Gulp guy at all. We really try to keep the questions here focused on GSAP and its API, but maybe someone else with Gulp experience can chime in. If you need UMD files, you can grab them from the /dist/ directory. 

Hi,

 

Sorry i didnt get a notification for this post. I thought this was a forum for everything GSAP related. This is to be able compile GSAP with gulp? Are these questions not allowed? (Just so i am clear). 

I thought with this being a forum for integration and asking how to best integrate into Gulp? I have the files locally, but calling them and compiling them with Gulp isnt working (I've resorted to loading the individual files into my JS folder, then compiling them with Gulp with a task runner, as that is the only way I could get them to compile, and not from the npm folder which I was looking for assistance with. Hopefully that clarifies

[Rodrigo]

Hi,

 

Do you have a minimal demo  that we can tinker with? I know that a demo that includes bundling can be a challenge but Gulp is not exactly the most up-to-date bundling system, it latest release is from 2019. Now a days most workflows use tools like Webpack, Parcel, Vite, Rollup, etc.

 

Maybe you could setup something in repl.it in order to check there.

 

Happy Tweening!

[rusticblonde]

35 minutes ago, Rodrigo said:

Hi,

 

Do you have a minimal demo  that we can tinker with? I know that a demo that includes bundling can be a challenge but Gulp is not exactly the most up-to-date bundling system, it latest release is from 2019. Now a days most workflows use tools like Webpack, Parcel, Vite, Rollup, etc.

 

Maybe you could setup something in repl.it in order to check there.

 

Happy Tweening!

Hi Rodrigo, 

Thanks for the response. Ill try get demo online. The problem is that some of my current employment legacy is still using Gulp and yet to move to VIte or Webpack

Atm, the bundler is working if i load the JS singularly and compile as I would usually do any form of JS, so i obviously have a tangible working solution until I can get this demo placed on

thankyou!

[Rodrigo]

Hi,

 

I would definitely try to remove GSAP from the building process and use the CDN links or download the files and use them directly on script tags. I know is not the ideal approach, but sticking to old and outdated building systems has a toll. All victories come with a cost I'm afraid 🤷‍♂️

 

Happy Tweening!