Darcey Posted October 24, 2020 Share Posted October 24, 2020 Hi, I seem to have an issue when trying to use gulp to concat and minify gsap, error reads: libs.js:4 Uncaught TypeError: Cannot set property window of #<Window> which has only a getter So I created a new folder and setup the following: 1. CMD: npm init -y 2. CMD: npm i -S gsap gulp gulp-contact gulp-terser gulp-rename 3. Create gulpfile.js let jsFiles = [ "./node_modules/gsap/dist/gsap.js", ]; let buildLibsProd = function (done) { gulp.src(jsFiles) .pipe(concat('libs.min.js')) .pipe(terser()) .on("error", function (e) { console.log(e.toString()); this.emit("end"); }) .pipe(gulp.dest('./')); done(); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - gulp.task("buildJs", gulp.parallel( buildLibsProd )); // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 4. Create index.html 5. Add script tag link in head to libs.min.js (will give you console log error). 6. Comment out script tag 7. Add another script tag link in head to ./node_modules/gsap/dist/gsap.min.js (no console errors) Any ideas? Works fine in my Webpack projects... Link to comment Share on other sites More sharing options...
GreenSock Posted October 24, 2020 Share Posted October 24, 2020 Yeah, that definitely sounds like a Gulp question, not a GSAP question. Sorry - we're pretty focused around here on GSAP-specific questions. I wish I had more knowledge of the inner workings of Gulp but perhaps a Gulp-focused forum could help? From that error, it sounds like "this" in the context that's running is an object that has a read-only window property. Not exactly sure how you can alter that in Gulp. 1 Link to comment Share on other sites More sharing options...
Darcey Posted October 25, 2020 Author Share Posted October 25, 2020 Ye, thought it might be, not sure what has changed, I'msure I was using this fine a month or 2 ago.. I tried v3.0.0 but terser still messes it up. https://github.com/duan602728596/gulp-terser/issues/21 Link to comment Share on other sites More sharing options...
GreenSock Posted October 25, 2020 Share Posted October 25, 2020 Is terser expecting an ES module? If so, you're pointing at the wrong GSAP file. The "/dist/" directory contains all the standard non-ES-Module stuff. You could try: // old: "./node_modules/gsap/dist/gsap.js", // new: "./node_modules/gsap/index.js", Just a thought. Link to comment Share on other sites More sharing options...
Darcey Posted October 25, 2020 Author Share Posted October 25, 2020 Na old school ES5... Thanks for the try though. I did try it but it does need the ES5 file. Link to comment Share on other sites More sharing options...
Solution Darcey Posted October 26, 2020 Author Solution Share Posted October 26, 2020 Found the issue... Was me just being blind and going to fast with auto complete!! I started to create a public git repo for the github forums, built all from scratch and found it worked... Done a little visual compare on files and found auto complete inserted type="module" Into the script tag... Can't believe I missed that... It's always the smallest of things that get you... 2 Link to comment Share on other sites More sharing options...
GreenSock Posted October 26, 2020 Share Posted October 26, 2020 Thanks for letting us know. Glad you figured it out. Happy tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now