I have just started this video. But before I complete watching it, I just want to tell that I have been watching your previous videos in this Gulp tutorial series, and brother, I am totally loving it!. The way you explain it, the way you speak, neither too fast nor too slow, is perfect. You, sir, are the best!
There are a few changes I had to make to not get errors with gulp 4.0.0 and because of Babel 7. I had to install @babel/core and @babel/preset-env and @babel/cli to the package.json. I had to add "babel": { "presets": ["@babel/preset-env"] } to the package instead of "babel": { "presets": ["env"] } being added. I had to add @babel/env instead of env to the statement .transform(babelify, {presets:['@babel/env']}) . I had to add done in the parameters section of the first nameless function of the js task and then at the end of the task done(); to signify the end of the async process.
Yes, Gulp4 messed up my tutorials. I'm thinking to do a quick update series. Thank you so much for the info, I will pin this comment to the top as it will be useful for other users.
Hey Timothy. Thanks so much for your comment! I still don't get it with the "done". Where exactly should the done() be placed? I get an "Path must be a string"-Error
@@myperfectwebguy801 The done goes here: gulp.task('js', function(done){ //all the code }); done(); }); But if you would have a problem with it the error will be "The following tasks did not complete: js Did you forget to signal async completion?" In your case just check all the path definitions (jsFolder....)
Thank Alessandro, the problem with the folder structure has confused me in the past so i am very happy to finally have that explained. Good job and thank you :)
Hi, it's great setup! but, if I make mistake, then gulp stopped. Where in this setup can i put .pipe(plumber()) or something else what do not stop gulp any time?
In this tutorial I'm using GUlp3, but later on in the series I upgrade to Gulp 4 which comes with an error() callback method that can catch errors in your piping and prevent exiting the watch method.
Luxon Es6 import not working pls help import { DateTime } from 'luxon'; ^^^^^^^^ SyntaxError: The requested module 'luxon' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export. For example: import pkg from 'luxon'; const { DateTime } = pkg;
Hi, just wanna say really clear tutorial. I was wondering though, doesn't this become a hassle when working with a team via git? By default all node modules are excluded from the git, i'm guessing it would be too large to upload the entire node modules for every push. Does this mean everyone has to go through the installation process of all the different modules manually? What's the advantage of using this over something like codekit or prepros where if everyone has the app installed no setup is required?
That's the whole point of the package.json file. Maybe I forgo to show it in the tutorial :D Anyway, you don't need to redo all of this from scratch, you just need to upload to git the gulpfile,js and package.json file. Then, any other developer can, after cloning the repo locally, simply run "npm install", and all the modules and setup will be automatically available. In these videos I showed the process of building a compiler from scratch just because I think it's important to fully understand how something works and all the technical reasons behind it, but there are plenty of pre-built solutions where you just need the package.json file in order to install and setup everything in one command. Cheers
I feel like covering the uglification was a bit of overkill for this tutorial, especially since it shouldn't be an issue until a site is ready for production. 5 of the 10 steps in the task can be eliminated without affecting the end results. It's definitely good stuff to know, but probably would have been easier to follow if that part of the process were covered after everything else was already in place and working.
Hi Alessandro, I have a question. When it consoles error it stops running, how to set it up like for SASS/SCSS, to continue running when you fix the error, instead of typing again command gulp watch? Thanks a lot.
That's, unfortunately, an issue of Gulp. It stops watching if it encounters an error. I recently switch to webpack and it doesn't happen. I'll do a series about it on how to set it up with the same features. Cheers
Alesandro, i am having some trouble with the export/import portion of the video. Gulp is can't find my "test.js" file in the destination specified even though i know it is there. "Error: Cannot find module 'test.js'" my import line of code is "import sayHello from 'test.js';" Any thoughts ?
Mh, that's weird. Are you sure test.js is in that exact location? Not into a subfolder? Also, try require('test.js'); instead of import and see if you still have that error.
Do you have your code on gitHub? Do you have a link? I followed your code exactly, but my visual studio didn't like the syntax. When I fixed it and tried to run it pointed out an error that I fixed.
Thanks for this video. You make complicated things look easy. I followed the whole video, and made sure I had the same code, but either browserify or buffer (vinyl) seems to copy the whole file path (including the folders) instead of just the source file. I end up with application/src/js/app.min.js copied in my dist/js/ folder. Any idea? I've looked everywhere!
Found the fix, after 3 hours of looking on the net. It might be very obvious to some but rename() can take a parameter: dirname: ''" . In the absence of this parameter, it copied the whole folder structure along with the source file.
Hello Alex, I think instead of showing Elementor ad you can make Video on how to create custom elements in elementor page builder:b may be I am wrong but it will good for learning like how to customize pre-built plugins, Understanding the built-in plugin codes and mess up with them:D:D You can also get sponsorship from Plugin author's:D:D Keep Going:)
I don't really want to spend time in doing tutorials about other plugins, I prefer to code and show how to code stuff from scratch. Elementor is an amazing plugin that I use daily, and they already sponsor me with an affiliate program, I'm fine to just have a quick Ad once in a while. Thanks for the suggestion tho :D
Awesome video! But how does this relate to importing libraries from node_modules? In example, I want to use React in my scripts and I have to do import React from 'react';. Could you guide me?
I have to correct this line to use in new browser "" adding "type=module" and I have to correct the class App adding "()" to constructor like this: class App { constructor() { console.info( 'App Initialized' ); } } export default App;
I am having problems with the following error. I've tried doing npm install --save-dev @babel/core also removing and is not removing "babel-core": "^6.26.3", but it doesn't seem to work . My Json file is at the bottom of this comment. Error: Cannot find module '@babel/core' babelify@10 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babelify@8 "devDependencies": { "@babel/core": "^7.1.2", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babelify": "^10.0.0", "browserify": "^16.2.3", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.1", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.1", "gulp-watch": "^5.0.1", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0" }, "babel": { "presets": [ "env" ] } }
Sorry for the issue, but some dependencies have changed since the time I recorded this video. Here's the updated NPM command to install the new version of bable-core. npm install --save-dev @babel/core @babel/preset-env
What would be the purpose of that? Doesn't really make sense as you won't be using both the unminified and minified file at the same time. You should only use the minified file with the relative map.
Hey Alessandro, I've recently discovered your tutorials on Gulp and I enjoyed it a lot. In another comment section under the Gulp v4 tutorial you mentioned that you are welcoming ideas for the new Gulp tutorials. Here is my suggestion: I would appreciate if you could make a tutorial on merging multiple source-maps. The problem arises if one are using multiple compilations. F.ex: I've used gulp-concat to merge several files into one app.js and then I used your suggested browserify-babelify-uglify method to implement bkw compatibility and minification. My sourcemaps are lost now due to the multiple transformations. It would be cool if you could teach people how to use modules like sorcery [github.com/rich-harris/sorcery] or others alike, since it still to confusing for a rookie like me :)
I'm having some issues in this section. When I enter gulp js I get: DESKTOP-ADSNBV2 C:\gulp # gulp js module.js:549 throw err; ^ Error: Cannot find module 'vinyl-buffer' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object. (C:\gulp\gulpfile.js:10:14) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) Then if I change vinyl-buffer to vinyl-source-buffer I get: DESKTOP-ADSNBV2 C:\gulp # gulp js [13:04:04] Using gulpfile ~\gulp\gulpfile.js [13:04:04] Starting 'js'... [13:04:04] Finished 'js' after 12 ms events.js:183 throw er; // Unhandled 'error' event ^ Error: Cannot find module 'C:\src\js\script.js' from 'C:\gulp' at C:\gulp ode_modules\browser-resolve ode_modules esolve\lib\async.js:55:21 at load (C:\gulp ode_modules\browser-resolve ode_modules esolve\lib\async.js:69:43) at onex (C:\gulp ode_modules\browser-resolve ode_modules esolve\lib\async.js:92:31) at C:\gulp ode_modules\browser-resolve ode_modules esolve\lib\async.js:22:47 at FSReqWrap.oncomplete (fs.js:152:21) DESKTOP-ADSNBV2 C:\gulp #
Mh, this is really strange. I see you're using Windows, and I'm not sure how this tutorial translates on non Unix-based systems. Are you using the Linux Subsystem on Windows?
Fellow developers on here...I must vent. I HATE RUclips's AI algorithms and how it picks up Wix commercials ALL THE FREAKIN TIME. Anyone else find those really annoying?
What Wix commercials speaks to me.... "Hey!!!! I know you love programming. Why don't you just forget about JavaScript and go to Wix.com instead? It's perfect for web developers who don't know HTML and CSS."
I have just started this video. But before I complete watching it, I just want to tell that I have been watching your previous videos in this Gulp tutorial series, and brother, I am totally loving it!. The way you explain it, the way you speak, neither too fast nor too slow, is perfect.
You, sir, are the best!
Thank you so much :D
There are a few changes I had to make to not get errors with gulp 4.0.0 and because of Babel 7.
I had to install @babel/core and @babel/preset-env and @babel/cli to the package.json.
I had to add "babel": { "presets": ["@babel/preset-env"] } to the package instead of "babel": { "presets": ["env"] } being added.
I had to add @babel/env instead of env to the statement .transform(babelify, {presets:['@babel/env']}) .
I had to add done in the parameters section of the first nameless function of the js task and then at the end of the task done(); to signify the end of the async process.
Yes, Gulp4 messed up my tutorials. I'm thinking to do a quick update series. Thank you so much for the info, I will pin this comment to the top as it will be useful for other users.
Hey Timothy. Thanks so much for your comment! I still don't get it with the "done". Where exactly should the done() be placed? I get an "Path must be a string"-Error
@@myperfectwebguy801 The done goes here:
gulp.task('js', function(done){
//all the code
});
done();
});
But if you would have a problem with it the error will be "The following tasks did not complete: js
Did you forget to signal async completion?"
In your case just check all the path definitions (jsFolder....)
is gulp 4 worth it?
You're a hero
Hi Alessandro, I just wanted to say thank you, your video helped me a lot!
You're very welcome, I'm glad my videos are helpful for you
Thank Alessandro, the problem with the folder structure has confused me in the past so i am very happy to finally have that explained. Good job and thank you :)
I'm glad I was able to help :D
I've been looking for this tutorial in the past few days! finally, I found it!!!!
Hi, it's great setup! but, if I make mistake, then gulp stopped. Where in this setup can i put .pipe(plumber()) or something else what do not stop gulp any time?
In this tutorial I'm using GUlp3, but later on in the series I upgrade to Gulp 4 which comes with an error() callback method that can catch errors in your piping and prevent exiting the watch method.
@@alecaddd ok 👍
Great tutorial and great series about gulp!! Thanks😊
+Marko Nikolajević Thank you so much 😃
Next video about browser-sync will be released later this week
Luxon Es6 import not working pls help
import { DateTime } from 'luxon';
^^^^^^^^
SyntaxError: The requested module 'luxon' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'luxon';
const { DateTime } = pkg;
If I use node modules in my JS files, will they be also included in the dist file?
Hi, just wanna say really clear tutorial. I was wondering though, doesn't this become a hassle when working with a team via git? By default all node modules are excluded from the git, i'm guessing it would be too large to upload the entire node modules for every push. Does this mean everyone has to go through the installation process of all the different modules manually? What's the advantage of using this over something like codekit or prepros where if everyone has the app installed no setup is required?
That's the whole point of the package.json file. Maybe I forgo to show it in the tutorial :D
Anyway, you don't need to redo all of this from scratch, you just need to upload to git the gulpfile,js and package.json file. Then, any other developer can, after cloning the repo locally, simply run "npm install", and all the modules and setup will be automatically available.
In these videos I showed the process of building a compiler from scratch just because I think it's important to fully understand how something works and all the technical reasons behind it, but there are plenty of pre-built solutions where you just need the package.json file in order to install and setup everything in one command.
Cheers
Ahh that makes a lot more sense. Thanks for the reply :)
I feel like covering the uglification was a bit of overkill for this tutorial, especially since it shouldn't be an issue until a site is ready for production. 5 of the 10 steps in the task can be eliminated without affecting the end results. It's definitely good stuff to know, but probably would have been easier to follow if that part of the process were covered after everything else was already in place and working.
Remember, "Everything should be made as simple as possible, but no simpler" ;)
Thanks for that, helped me a lot!
Hi Alessandro, I have a question. When it consoles error it stops running, how to set it up like for SASS/SCSS, to continue running when you fix the error, instead of typing again command gulp watch? Thanks a lot.
That's, unfortunately, an issue of Gulp. It stops watching if it encounters an error.
I recently switch to webpack and it doesn't happen. I'll do a series about it on how to set it up with the same features.
Cheers
Can't wait : )
I can't wait for that series!!
Hi Alessandro, what is the name of the software you are using to write the code? Thanks for your reply.
Sublime Text 3, here's a video about my setup: ruclips.net/video/oHmPrjSzmwU/видео.html
Alessandro Castellani thanks how do I install java enterpise edition on sublime text
Alesandro, i am having some trouble with the export/import portion of the video. Gulp is can't find my "test.js" file in the destination specified even though i know it is there. "Error: Cannot find module 'test.js'" my import line of code is "import sayHello from 'test.js';" Any thoughts ?
Mh, that's weird.
Are you sure test.js is in that exact location? Not into a subfolder?
Also, try require('test.js'); instead of import and see if you still have that error.
Thanks for the help i made a silly mistake but your response made me double(and triple check) it works now!
Error gulp
The following tasks did not complete: jsx2
Did you forget to signal async completion?
will this tutorial help if I need to setup auto-reloading page, when I make changes in js file?
Do you have your code on gitHub? Do you have a link? I followed your code exactly, but my visual studio didn't like the syntax. When I fixed it and tried to run it pointed out an error that I fixed.
Here's the source code: github.com/Alecaddd/gulp-es6
Thanks for this video. You make complicated things look easy. I followed the whole video, and made sure I had the same code, but either browserify or buffer (vinyl) seems to copy the whole file path (including the folders) instead of just the source file. I end up with application/src/js/app.min.js copied in my dist/js/ folder. Any idea? I've looked everywhere!
Found the fix, after 3 hours of looking on the net. It might be very obvious to some but rename() can take a parameter: dirname: ''" . In the absence of this parameter, it copied the whole folder structure along with the source file.
Hello Alex,
I think instead of showing Elementor ad you can make Video on how to create custom elements in elementor page builder:b may be I am wrong but it will good for learning like how to customize pre-built plugins, Understanding the built-in plugin codes and mess up with them:D:D
You can also get sponsorship from Plugin author's:D:D
Keep Going:)
I don't really want to spend time in doing tutorials about other plugins, I prefer to code and show how to code stuff from scratch.
Elementor is an amazing plugin that I use daily, and they already sponsor me with an affiliate program, I'm fine to just have a quick Ad once in a while.
Thanks for the suggestion tho :D
Hi Alessandro,
Are you planning to make a Video on how to require browserSync as well?
Excellent Video as usual!
Cheers
I just saw that you are going to cover that in this series as well, never mind.
Yup, I should release it early next week.
Thanks for watching :D
Awesome video! But how does this relate to importing libraries from node_modules? In example, I want to use React in my scripts and I have to do import React from 'react';. Could you guide me?
Install react via NPM with: npm install --save react
Then import it into your JS with: import React from 'react';
I have to correct this line to use in new browser "" adding "type=module" and I have to correct the class App adding "()" to constructor like this:
class App {
constructor() {
console.info( 'App Initialized' );
}
}
export default App;
I am having problems with the following error. I've tried doing npm install --save-dev @babel/core also removing and is not removing "babel-core": "^6.26.3", but it doesn't seem to work . My Json file is at the bottom of this comment.
Error: Cannot find module '@babel/core'
babelify@10 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babelify@8
"devDependencies": {
"@babel/core": "^7.1.2",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"env"
]
}
}
Sorry for the issue, but some dependencies have changed since the time I recorded this video. Here's the updated NPM command to install the new version of bable-core.
npm install --save-dev @babel/core @babel/preset-env
@@alecaddd whats next
@@alecaddd any change in gulp.js code?
How to create both versions of script.js and map?
I want something like this:
script.js script.js.map
and
script.min.js script.min.js.map
What would be the purpose of that? Doesn't really make sense as you won't be using both the unminified and minified file at the same time. You should only use the minified file with the relative map.
@@alecaddd I know how to use script.js. But I need both of them. Do you know how to do that?
in gulp documentation search for output in phases and you can get both versions gulpjs.com/docs/en/getting-started/working-with-files#output-in-phases
give to this guy two sixpacks and a big bag of weed. thanks...
Yes please :D
Thank you
You're very welcome
Hey Alessandro, I've recently discovered your tutorials on Gulp and I enjoyed it a lot. In another comment section under the Gulp v4 tutorial you mentioned that you are welcoming ideas for the new Gulp tutorials. Here is my suggestion: I would appreciate if you could make a tutorial on merging multiple source-maps. The problem arises if one are using multiple compilations. F.ex: I've used gulp-concat to merge several files into one app.js and then I used your suggested browserify-babelify-uglify method to implement bkw compatibility and minification. My sourcemaps are lost now due to the multiple transformations. It would be cool if you could teach people how to use modules like sorcery [github.com/rich-harris/sorcery] or others alike, since it still to confusing for a rookie like me :)
Thanks for the recommendation.
I'm having some issues in this section. When I enter gulp js I get:
DESKTOP-ADSNBV2 C:\gulp
# gulp js
module.js:549
throw err;
^
Error: Cannot find module 'vinyl-buffer'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (C:\gulp\gulpfile.js:10:14)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
Then if I change vinyl-buffer to vinyl-source-buffer I get:
DESKTOP-ADSNBV2 C:\gulp
# gulp js
[13:04:04] Using gulpfile ~\gulp\gulpfile.js
[13:04:04] Starting 'js'...
[13:04:04] Finished 'js' after 12 ms
events.js:183
throw er; // Unhandled 'error' event
^
Error: Cannot find module 'C:\src\js\script.js' from 'C:\gulp'
at C:\gulp
ode_modules\browser-resolve
ode_modules
esolve\lib\async.js:55:21
at load (C:\gulp
ode_modules\browser-resolve
ode_modules
esolve\lib\async.js:69:43)
at onex (C:\gulp
ode_modules\browser-resolve
ode_modules
esolve\lib\async.js:92:31)
at C:\gulp
ode_modules\browser-resolve
ode_modules
esolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:152:21)
DESKTOP-ADSNBV2 C:\gulp
#
Mh, this is really strange. I see you're using Windows, and I'm not sure how this tutorial translates on non Unix-based systems.
Are you using the Linux Subsystem on Windows?
Not using Linux. I was following the plugin tutorials till I got to the gulp section. I'm doing all of this on xampp and windows.
Do you have a completed copy of this to I can check the code?
mmmh ....sounds suspicious .
works fine for me on windows 10 and I am using Windows PowerShell, node and live server from vs code extension
Fellow developers on here...I must vent. I HATE RUclips's AI algorithms and how it picks up Wix commercials ALL THE FREAKIN TIME. Anyone else find those really annoying?
I created my stunning website with Wix.com, let me show you how I did it...
What Wix commercials speaks to me.... "Hey!!!! I know you love programming. Why don't you just forget about JavaScript and go to Wix.com instead? It's perfect for web developers who don't know HTML and CSS."
@@alecaddd wonderful tutorial by the way! I haven't used Gulp in nearly 2 years, this brought me up to speed.
works
most sickening workflow ever just for building a simple webpage or webapp
The bright future that modern javascript and nodeJS gave us!
likes += 1000
Eheh, thanks
Very bad tutorial ever seen. where its starting and where is ending.
It starts at 0:00 and it ends at 27:34
What kind of an idiotic comment is this on such an informative tutorial