Sure thing! And believe it or not, there are several newer tools that do a lot of this out of the box, like ViteJS! Hoping to get a video up soon. Thanks for saying something.
привіт пишу з україни!) цим коментарем передаю велику вдячність за цей контент! зараз (під час цієї війни) в мене з'явилося більше часу на навчання і ваші відео уроки мені дуже допомагають! дякую!
I somewhere bullishly implemented webpack into a php project. I worked out the js side well enough and chucked up the scripts, all went well. When I tried to bundle up the css files it all got crazy because webpack assumes you're building a js framework app and it alters and changes your url paths inside the css, and does a lot of complaining if it doesn't find your image files in src. Anyway, after wasting a day trying to set it up for css I remembered Gulp as a thing.
Awesome video. Wish I would have found this video earlier. I just have a couple of questions. What about browser-sync? Do you use it in your workflow? How would you modify this gulpfile.js for Wordpress? Also, how would I insert the webp images into Wordpress? Thanks for this great video. Am now subscribing for more great tips.
Glad you enjoyed it! I haven't used gulp for probably 1.5 years? So it's been a while. I also haven't developed on Wordpress for a few years, so not sure I know :) Sorry! Glad you found the video helpful though!
Thank you very much for your video, it helped me a lot. I found a plugin for gulp that automatically does what you do at 18:30, the plugin is called "gulp-html-img-wrapper"
Hi Chris, I don't know what's wrong with my code because when I start Gulp I get an error. This is what appeared: Error in plugin "gulp-sass" Message: gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the `sass` and `node-sass` packages are permitted. For example, in your gulpfile: var sass = require('gulp-sass')(require('sass')); [23:00:33] The following tasks did not complete: default, compilescss [23:00:33] Did you forget to signal async completion? idk know what more information I can send you that is useful. Thanks anyway.
Sure thing! Looking at the error, it looks like you need to add one extra item to the variable for the sass plugin. It takes a module to provide additional features, in this case setting a default compiler. It looks like if you just replace the line with the variable for the sass plugin with the example code they gave you, it should work. Let me know if that doesn’t make sense or doesn’t work.
@@CodinginPublic Maybe it will be useful, but maybe the errors also depend of the computer features. Right now almost everything is work effecty except the plugin webp and before when i used gulp, this thing always has happened so it's sad because the automatization it's very useful, but if doesn't work, there no way to avoid it :(
By the way, if you know the answer of this error i will appreciate so much const gulp = require('gulp'); const webp = require('gulp-webp');
gulp.task('default', () => gulp.src('dist/img/*.{jpg,png}') .pipe(webp()) .pipe(gulp.dest('dist/img')) ); //There is most text but i think the main problem is this little string 'default' errored after 101 ms [11:36:35] Error in plugin "gulp-webp" Message: CoCreateInstance(MAKE_REFGUID(CLSID_WICImagingFactory), NULL, CLSCTX_INPROC_SERVER, MAKE_REFGUID(IID_IWICImagingFactory), (LPVOID*)&factory) failed 80040154
Yeah, I’ve found it helpful in smaller sites. Because of all the dependencies, I find it sometimes tedious on larger sites. But it’s great for those little builds.
Sir, the way you speak and explain is brilliant. can you make pls video about the whole gulp build? or that is it? and also woulb be perfect to see your explanations of swiper js. i love the way you explain.
Thanks for your kind words, @Kirill L! Glad you enjoyed it. I’ve done a few more videos on gulp, including a more recent one on JS here: th-cam.com/video/yZPfIFOxYWo/w-d-xo.html That's a great idea to do something on SwiperJS. I'll see if I can't work that in my future videos. Thanks again!
@@anwardeen1446 no, it will only work on pngs and jpgs, I think. But there are gulp plugins that will minify SVGs, like www.npmjs.com/package/gulp-svgo! Let me know if you try it!
Hi, I followed every step in your video but I got Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. Instead change the require of index.js to a dynamic import() which is available in all CommonJS modules. I tried to use import() but also am getting other errors. Do you know how to fit this? Thank you!
Sorry you're having trouble. Hmm…let's try changing index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from your package.json
open the package.json and see if there is some "type": "module". if so, just delete that line of code. this happens whenever you're trying to use import taskname from without the type module and same in the other case
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jarjis/Projects/Learning/sass/node_modules/gulp-autoprefixer/index.js from /Users/jarjis/Projects/Learning/sass/gulpfile.js not supported. Instead change the require of index.js in /Users/jarjis/Projects/Learning/sass/gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (/Users/jarjis/Projects/Learning/sass/gulpfile.js:4:16) { code: 'ERR_REQUIRE_ESM' } show this error please help
No worries. Good question. If you look at the postcss documentation, you can actually use it with Gulp. I've never done it, but you can. Since Tailwind is a postcss plugin, you should be able to use it with gulp, too! I just haven't done it.
great explanation an display. But unfortunately I got an Error when trying to run gulp after coding it up. It said Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/.../gulp-imagemin/index.js from /Users/.../gulpfile.js not supported. Instead change the require of index.js in /Users/.../gulpfile.js to a dynamic import() which is available in all CommonJS modules. What does that mean?
Thanks for you tuto, really helpfull ! It was easier than webpack to setup in my pov. I had to run 'npm install --save-dev --save exact gulp-imagemin@7.1.0' because imagemin 8and above are now ESM only.. For images, i'll use it for image as jpg fallback, but at the moment i'm using imageKit that is really usefull to get adapted sizes for each images, delivering adapted format for each browser (with nice cdn) I have to find a way to generate different stylesheet now : 1 min.css (adding prefix min), 1 standart and 1 css map too . (I was compiling with sass only before, generating map, min and standart, i liked it^^) If you have some advices for this, feel free to answer me. (i'll do some research too) Thanks again, it will improve my workflow
@medaillonet, thanks for the reply. Yes, I've heard that about imagemin 8+. Yeah, I use cloudinary now for nearly all my image transformations (cdn, on-the-fly transformations, etc.). As to the different stylesheets, you should be able to include maps in the sass plugin (I'd just look into the options for gulp-sass) and I think you can export multiple files from the pipe. If I have a chance tomorrow, I'll try to look into it more. Thanks again for the ocmment!
@@CodinginPublic thanks for your answer. Cloudinary ? I'll check that. Don't bother searching, I already found it. Atm, I'm thinking about migrate to webpack because gulp brings too much vulnerability depencies..., I'm sad about it cause It was easier to setup... I'll learn how to create my webpack boilerplate without vulnerability from scratch ! Thanks anyway for gulp, perhaps I'll use it again if they update those vulnerability issues...
Well if it means anything I’ve started moving most every thing to some of the newer build tools like ViteJS or Parcel2 because they require almost no set up. (Although you can still customize them however you want.)
@@CodinginPublic Hey, I was a confused about the purpose of package.json/bundlers/task runners that whole aspect of web. dev. I've done some reading/watching since I asked you that question. I have a better idea now of the purpose of them now. If I could reword my question, it would be "can you show us how to configure PostCSS and a few plugins using Vite.". Hope this shows where I was confused and maybe a video on those type of topics would be helpful for people new to that area, like myself. Thanks for the reply!
@@Naz-yi9bs I'll give it some thought. I've been wanting to do something explaining Vite, but need to do more research myself. I use it fairly basically right now myself :)
Hi, I'm trying to use es6 modules but it throws the error "ReferenceError: require is not defined". I think it is related to gulp-babel or something. Is there any way to use es6 modules with Gulp?
You should be able to use es6. Looks like this section of the docs on transpilation should help: gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles
Thanks for the question. Just to be sure I'm understanding. The array up top contains your sources, parameters, etc. and the code below is your attempt to incorporate it into gulp?
@@CodinginPublic Correct. Actually I figured it out little after I raised you the question. You are welcome to provide feedback if you'd like. function jpegmin(cb) { transforms.map(function(transform){ return src(transform.src) .pipe(imageResize({ width: transform.params.width, crop: transform.params.crop })) .pipe(imagemin([ imagemin.mozjpeg({quality: 80, progressive: true}), ])) .pipe(dest(transform.dest)) } ); cb(); };
Thanks, @Vishal Kank! I haven't used jest/enzyme before, so I'm not sure! Looks like there’s an npm package for using gulp with jest. Perhaps start there? www.npmjs.com/package/gulp-jest
IF ANYONE CAN HELP!!! WHENEVER I USE GULP-WEBP OR GULP-AVIF IT ROTATES MY PORTRAIT IMAGES TO LANDSCAPE (OF COURSE THE IMAGE IS NOT CORRECT IN LANDSCAPE) HOW DO I PREVENT THIS???
I CAN TRY TO HELP! :) That's a bit odd. Are you sure the image is actually rotated? Or is it just showing rotated in the web page? Like when you open the image itself on your system is it rotated?
Hi, I really love your content. while following this tutorial I came across with gulp-imagemin plugin issue. could this be due to versions im using and if so whats the workaround? node --version v16.14.1, gulp --version CLI version: 2.3.0 - Local version: 4.0.2
Thanks for the kind words! Glad you're enjoying the channel. Yes, I believe the new version of gulp-imagemin (version 8, I think?) doesn't work. The quickest workaround is to stay on version 7. Type … npm install --save-dev gulp-imagemin@7.1.0 or you can convert everything to ESM, but that is hard to explain in a comment :)
I added .js to the module names but same error: import gulp from "gulp.js"; import imagemin from "gulp-imagemin.js"; import sass from ("gulp-sass.js" , "sass.js");
When you reference node modules, you’re actually referencing the directory name, not a particular file. So adding the extension won’t help. What error are you getting?
@@CodinginPublic SyntaxError: Unexpected token '(' at ESMLoader.moduleStrategy (node:internal/modules/esm /translators:117:18) at ESMLoader.moduleProvider (node:internal/modules/esm /loader:337:14) at async link (node:internal/modules/esm/module_job:70 :21) I took the JS off as it didn't make a diff. I read as much as I could find out but the info is scattered through the past few years so its hard to tell if there is a current fix. here is a codepen of my file: codepen.io/DrennanFlynn/pen/GVgwNy
@@CodinginPublic Can you please make a detailed video like this on Parcel 2? Initially, I was trying to setup Parcel bundler but there are no video tutorials on Parcel 2.
@@CodinginPublic I have already watched that one. That's surely helpful but can we have separate folders for different types files in dist folder like we have in src folder? I want to remove those .maps files. Basically, I want more control over how things are stored inside dist. Please suggest something. I checked the documentation but it wasn't much helpful and I am not a "pro developer" yet.
Hi, I don't know what's wrong with my code because when a try tu use gulp i get an error: " Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ... ode_modules\gulp-imagemin\index.js require() of ES modules is not supported. require() of ... ode_modules\gulp-imagemin\index.js from ...\gulpfile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ... ode_modules\gulp-imagemin\package.json."
Hey! In the video I used an older syntax. The newer syntax (Node 13+) uses ES6. If you change the declaration up top to… import ‘imagemin’ from ‘gulp-imagemin’ … that should work. You may also want to try updating NodeJS. Let me know if you’re still running into trouble.
Thank you for nice tutorial 💙, but i have an error when import js library. the error is " regular expression error" inside lib js. i tried a lot ,but I can't solve this .🥺 if you have any suggestions
I want to know something. I installed npm dependencies for web designing. And I installed dependencies bootstrap, jquery, poper.js, font-awesome as well as devDependencies gulp gulp-sass sass browser-sync But I faced problems when I started to work. Like when run command npm start then only html file runs on the browser-sync. But scss design or bootstrap classes isn't working. How can I fix it? Please reply or make a tutorial for it. I used some commands 1) npm init -y Dependencies: 2) npm install bootstrap@4.6 jquery popper.js font-awesome --save devDependencies: 3) npm install --save-dev gulp sass gulp-sass gulp browser-sync After than creating gulpfile.js, I used this command : gulp But browser-sync isn't working properly. Please help.
Thanks for the comment! Did you link the files in your HTML file area? You need to add a link to your css file and the bootstrap css file for it to effect the content on the page. If you have your html page, feel free to post it somewhere along with your package.json file and I can look it over.
@Bipronath Saha, I took at look and I'm not totally sure what's going on. It looks like with all the different libraries things are getting confused. Any chance you could use Live Server or something with VS Code to avoid the browser-sync? It seems like that's what's causing the problems from what I can tell?
@@CodinginPublic yeah, please. After setting all the dependencies, I give command "npm start" then it open on browser using browser-sync but the problem comes when I use any bootstrap classes on html code and add some custom css, it doesn't work properly. But after opening it on the browser-sync, I cancel the browser-sync tab from browser and open live server extension from vs code. Then it works perfectly but it doesn’t work perfectly on browser-sync. Thanks for reply.
I have tried installing gulp using so many different tutorials and every time I get this error: zsh: command not found: gulp anyone can help me out please?
Sorry you’ve had so much trouble! Where did you get stuck in the tutorial? Did you install Node JS from home brew by any chance? Is it properly installed? Type the following to check on gulp: which gulp -- What does that 👆return? Installing gulp globally on your machine might help, too. Open a terminal and type the following: npm i --global gulp In addition, if you throw your code up somewhere like GitHub and DM on Twitter with the link, I’m happy to take a look. I suspect it’s local to your machine but there may be something in the code causing it. Hope that helps.
@@CodinginPublic Thanks so much for your quick reply! I think that the issue is that I am using a Mac with a M1 chip. as it works on my other mac that has an intel chip.
Okay, that helps! The M1 shouldn’t have a problem with Node. It sounds like a path problem. It may be worth checking out these forum posts: stackoverflow.com/questions/29817857/zsh-command-not-found-gulp stackoverflow.com/questions/12743928/command-not-found-after-npm-install-in-zsh/40375497
@@CodinginPublic Thanks so much for your help so far! This seemed to work for me: npm config set prefix /usr/local npm link gulp However now I get these errors: ReferenceError: primordials is not defined at fs.js:47:5 at req_ (/Users/sodutch/node_modules/natives/index.js:143:24) at Object.req [as require] (/Users/sodutch/node_modules/natives/index.js:55:10) at Object. (/Users/sodutch/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) Have been googling but no success so far
Hi Chris , Could you please help me to out of this error, actually when I am run with gulp then comes the following error --- PS D:\work\Project-Gulp-First> gulp Error [ERR_REQUIRE_ESM]: require() of ES Module D:\work\Project-Gulp-First ode_modules\gulp-imagemin\index.js from D:\work\Project-Gulp-First\gulpfile.js not supported. Instead change the require of index.js in D:\work\Project-Gulp-First\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (D:\work\Project-Gulp-First\gulpfile.js:8:18) at async Promise.all (index 0) { code: 'ERR_REQUIRE_ESM' }
Thanks for asking, Subir. You're on a newer version of node (which I wasn't using in this video). If you change each of the statements up top to … import { src, dest, watch, series } from 'gulp-sass'; import sass from 'gulp-sass'; etc. … that should work. Let me know if you have any trouble.
@@CodinginPublic Hello I tried your solution but I get this error. import {src, dest, watch, series} from 'gulp-sass' ^^^^^^ SyntaxError: Cannot use import statement outside a module Thank you.
@@anuzpandey3326 I had the same issue, the problem for me was that I had a version of imagemin that was too new and it was causing conflicts. npm install --save-dev gulp-imagemin@7.1.0 this is the version you need
@@CodinginPublic First I appreciate for your reply, What I search in vite how to make it split js modules to chunks, how to make it minify images and all other things I read about on other build systems like webpack My first build system is vite, so I don’t know if vite support all this stuff I tried to search in vite doc, they talk about chunks but for people who have weak English like me it is not clear, there is a litttttle examples Also I tried to search for these stuff in TH-cam, but there is no complete tutorial although all talk vite is next generation and blablabla
![ILLSLICK - KILLSHOT REMIX [FULL VERSION]](http://i.ytimg.com/vi/RIK8RrqIAzE/mqdefault.jpg)
First time stumbling on Gulp -- looks like a lot of fun and very useful. Looking forward to following this video and getting my bearings. Thanks!
Sure thing! And believe it or not, there are several newer tools that do a lot of this out of the box, like ViteJS! Hoping to get a video up soon. Thanks for saying something.
привіт пишу з україни!)
цим коментарем передаю велику вдячність за цей контент!
зараз (під час цієї війни) в мене з'явилося більше часу на навчання і ваші відео уроки мені дуже допомагають! дякую!
Wow! Amazing that you’re still keeping on in spite of the war!
This video was just a gulp epiphany! Very well explained.
So glad it was a help! Thanks for saying something.
Hey man, thank you so much for the video, I learn the basic gulp in 30 minutes. Great.
Glad it was a help!
Hey dude, amazing content! Very well explained and not only copy/paste code! Thx for the content!
Keep going!
That’s so kind! Glad it was a help!
I somewhere bullishly implemented webpack into a php project. I worked out the js side well enough and chucked up the scripts, all went well. When I tried to bundle up the css files it all got crazy because webpack assumes you're building a js framework app and it alters and changes your url paths inside the css, and does a lot of complaining if it doesn't find your image files in src. Anyway, after wasting a day trying to set it up for css I remembered Gulp as a thing.
Awesome video. Wish I would have found this video earlier. I just have a couple of questions. What about browser-sync? Do you use it in your workflow? How would you modify this gulpfile.js for Wordpress? Also, how would I insert the webp images into Wordpress?
Thanks for this great video. Am now subscribing for more great tips.
Glad you enjoyed it! I haven't used gulp for probably 1.5 years? So it's been a while. I also haven't developed on Wordpress for a few years, so not sure I know :) Sorry! Glad you found the video helpful though!
Hi from Ukraine bro! Thanks for the video.
Thanks for watching! Stay strong :)
Thank you very much for your video, it helped me a lot. I found a plugin for gulp that automatically does what you do at 18:30, the plugin is called "gulp-html-img-wrapper"
Awesome! Thanks for saying something!
Absolutely brilliant . . . many thanks Chris
Sure thing! Thanks for the kind comment!
Hi Chris, I don't know what's wrong with my code because when I start Gulp I get an error.
This is what appeared:
Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[23:00:33] The following tasks did not complete: default, compilescss
[23:00:33] Did you forget to signal async completion?
idk know what more information I can send you that is useful.
Thanks anyway.
Sure thing! Looking at the error, it looks like you need to add one extra item to the variable for the sass plugin. It takes a module to provide additional features, in this case setting a default compiler. It looks like if you just replace the line with the variable for the sass plugin with the example code they gave you, it should work. Let me know if that doesn’t make sense or doesn’t work.
@@CodinginPublic Thank you so much, the reason is because the name of the package changed so i finally solve the problem.
Ah, sounds good. Great work! Would it help if I updated the code pen to match?
@@CodinginPublic Maybe it will be useful, but maybe the errors also depend of the computer features. Right now almost everything is work effecty except the plugin webp and before when i used gulp, this thing always has happened so it's sad because the automatization it's very useful, but if doesn't work, there no way to avoid it :(
By the way, if you know the answer of this error i will appreciate so much
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('default', () =>
gulp.src('dist/img/*.{jpg,png}')
.pipe(webp())
.pipe(gulp.dest('dist/img'))
);
//There is most text but i think the main problem is this little string
'default' errored after 101 ms
[11:36:35] Error in plugin "gulp-webp"
Message:
CoCreateInstance(MAKE_REFGUID(CLSID_WICImagingFactory), NULL, CLSCTX_INPROC_SERVER, MAKE_REFGUID(IID_IWICImagingFactory), (LPVOID*)&factory) failed 80040154
Gulp seems perfect for simple HTML/PHP websites, even though it can do way more than that.
Yeah, I’ve found it helpful in smaller sites. Because of all the dependencies, I find it sometimes tedious on larger sites. But it’s great for those little builds.
Sir, the way you speak and explain is brilliant. can you make pls video about the whole gulp build? or that is it?
and also woulb be perfect to see your explanations of swiper js.
i love the way you explain.
Thanks for your kind words, @Kirill L! Glad you enjoyed it. I’ve done a few more videos on gulp, including a more recent one on JS here: th-cam.com/video/yZPfIFOxYWo/w-d-xo.html
That's a great idea to do something on SwiperJS. I'll see if I can't work that in my future videos.
Thanks again!
Very clear explanation 👌 waiting for your more videos. New subscriber
Thanks so much for saying something! And for the sub!
@@CodinginPublic is the Image minifier will support svg format?
@@anwardeen1446 no, it will only work on pngs and jpgs, I think. But there are gulp plugins that will minify SVGs, like www.npmjs.com/package/gulp-svgo! Let me know if you try it!
Hi, I followed every step in your video but I got Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. Instead change the require of index.js to a dynamic import() which is available in all CommonJS modules. I tried to use import() but also am getting other errors. Do you know how to fit this? Thank you!
Sorry you're having trouble. Hmm…let's try changing index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from your package.json
open the package.json and see if there is some "type": "module". if so, just delete that line of code.
this happens whenever you're trying to use import taskname from without the type module and same in the other case
15:00 what is the name of that clipboard manager?
Great video by the Way! Thanks
Pastebot!
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jarjis/Projects/Learning/sass/node_modules/gulp-autoprefixer/index.js from /Users/jarjis/Projects/Learning/sass/gulpfile.js not supported.
Instead change the require of index.js in /Users/jarjis/Projects/Learning/sass/gulpfile.js to a dynamic import() which is available in all CommonJS modules.
at Object. (/Users/jarjis/Projects/Learning/sass/gulpfile.js:4:16) {
code: 'ERR_REQUIRE_ESM'
}
show this error please help
Noob question. Can Gulp be used to watch Tailwindcss as well? I'm trying to set up a WordPress environment using TW.
No worries. Good question. If you look at the postcss documentation, you can actually use it with Gulp. I've never done it, but you can. Since Tailwind is a postcss plugin, you should be able to use it with gulp, too! I just haven't done it.
great explanation an display. But unfortunately I got an Error when trying to run gulp after coding it up. It said Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/.../gulp-imagemin/index.js from /Users/.../gulpfile.js not supported.
Instead change the require of index.js in /Users/.../gulpfile.js to a dynamic import() which is available in all CommonJS modules. What does that mean?
Sorry I missed this. Try changing your gulp file extension to .cjs
Thanks for you tuto, really helpfull ! It was easier than webpack to setup in my pov.
I had to run 'npm install --save-dev --save exact gulp-imagemin@7.1.0' because imagemin 8and above are now ESM only..
For images, i'll use it for image as jpg fallback, but at the moment i'm using imageKit that is really usefull to get adapted sizes for each images, delivering adapted format for each browser (with nice cdn)
I have to find a way to generate different stylesheet now : 1 min.css (adding prefix min), 1 standart and 1 css map too . (I was compiling with sass only before, generating map, min and standart, i liked it^^)
If you have some advices for this, feel free to answer me. (i'll do some research too)
Thanks again, it will improve my workflow
@medaillonet, thanks for the reply. Yes, I've heard that about imagemin 8+. Yeah, I use cloudinary now for nearly all my image transformations (cdn, on-the-fly transformations, etc.). As to the different stylesheets, you should be able to include maps in the sass plugin (I'd just look into the options for gulp-sass) and I think you can export multiple files from the pipe. If I have a chance tomorrow, I'll try to look into it more. Thanks again for the ocmment!
@@CodinginPublic thanks for your answer. Cloudinary ? I'll check that.
Don't bother searching, I already found it.
Atm, I'm thinking about migrate to webpack because gulp brings too much vulnerability depencies..., I'm sad about it cause It was easier to setup...
I'll learn how to create my webpack boilerplate without vulnerability from scratch !
Thanks anyway for gulp, perhaps I'll use it again if they update those vulnerability issues...
Well if it means anything I’ve started moving most every thing to some of the newer build tools like ViteJS or Parcel2 because they require almost no set up. (Although you can still customize them however you want.)
I found gulp had too many dependencies (like you mention). I still will use it for smaller individual tasks when needed though.
Great tutorial - would be awesome to see how this could work with tailwindcss (on php and html files)
Tailwind uses postcss, so you wouldn't likely run it through Gulp. It may be that you could/would do this in older versions of tailwind though?
Hey, could you do one for Vite or do you have a recommendation to an article/video on vite. Asking you as I like your teaching style, thank you.
Hey, thanks for the suggestion. What would you want to know specifically about Vite?
@@CodinginPublic Hey, I was a confused about the purpose of package.json/bundlers/task runners that whole aspect of web. dev. I've done some reading/watching since I asked you that question. I have a better idea now of the purpose of them now. If I could reword my question, it would be "can you show us how to configure PostCSS and a few plugins using Vite.". Hope this shows where I was confused and maybe a video on those type of topics would be helpful for people new to that area, like myself. Thanks for the reply!
@@Naz-yi9bs I'll give it some thought. I've been wanting to do something explaining Vite, but need to do more research myself. I use it fairly basically right now myself :)
Wouldn't it be faster if you let run your compile tasks parallel and do a series(imagemin, imagewebp) only?
Hey! Don’t know how I missed this. Yep, you wouldn’t need to run them all in a series. I kept it this way for simplicity.
very well explained 👍
Great! Glad it was a help!
Great video.
By the way can you make a video on "how to build vscode extension" including topics like building webview, building sidebar
Thanks 🙏. I’ve never built an extension, but if I do, I’m happy to do a video on it 😊
So clear content, thank you, would be great if you could make a tutorial on gulp with nunjucks ⭐
Glad you enjoyed it! I’ve moved away from using gulp myself for a bit now, so it’s not likely, but I’ll consider it. Thanks for the suggestion!
Hi, I'm trying to use es6 modules but it throws the error "ReferenceError: require is not defined". I think it is related to gulp-babel or something. Is there any way to use es6 modules with Gulp?
You should be able to use es6. Looks like this section of the docs on transpilation should help: gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles
Thanks for using this syntax
Sure thing. Thanks for saying something!
Why aren't you watching the html files for change/reload browser?
My current gulp file isn't doing any thing on the html file, so that's why I'm not watching it in the browser. Just processing SCSS, JS, and images.
Amazing video
Thanks for saying something!
Hi Chris, thx for the tutorial!
How would you map a such array on Gulp?
const transforms = [
{
src: "Originals/*.jpg",
dist: "Originals/821",
params: {
width: 821,
crop: false,
},
},
{
src: "Originals/*.jpg",
dist: "Originals/614",
params: {
width: 614,
crop: false,
},
},
.
.
.
.
]
exports.default = function jpegmin() {
return src(transforms.src)
.pipe(imageResize({
width: transforms.params.width,
crop: transforms.params.crop
}))
.pipe(imagemin([
imagemin.mozjpeg({quality: 80, progressive: true}),
]))
.pipe(dest(transforms.dist))
};
Thank you!
Thanks for the question. Just to be sure I'm understanding. The array up top contains your sources, parameters, etc. and the code below is your attempt to incorporate it into gulp?
@@CodinginPublic Correct.
Actually I figured it out little after I raised you the question. You are welcome to provide feedback if you'd like.
function jpegmin(cb) {
transforms.map(function(transform){
return src(transform.src)
.pipe(imageResize({
width: transform.params.width,
crop: transform.params.crop
}))
.pipe(imagemin([
imagemin.mozjpeg({quality: 80, progressive: true}),
]))
.pipe(dest(transform.dest))
}
);
cb();
};
Great work!
how do I setup gulp for testing react using jest and enzyme. I am trying it from a while need help....
Thanks, @Vishal Kank! I haven't used jest/enzyme before, so I'm not sure! Looks like there’s an npm package for using gulp with jest. Perhaps start there? www.npmjs.com/package/gulp-jest
Great video!!
Thanks for saying something! Glad you enjoyed it!
IF ANYONE CAN HELP!!!
WHENEVER I USE GULP-WEBP OR GULP-AVIF IT ROTATES MY PORTRAIT IMAGES TO LANDSCAPE (OF COURSE THE IMAGE IS NOT CORRECT IN LANDSCAPE)
HOW DO I PREVENT THIS???
I CAN TRY TO HELP! :)
That's a bit odd. Are you sure the image is actually rotated? Or is it just showing rotated in the web page? Like when you open the image itself on your system is it rotated?
when i run it says "npm fund" :( can't be run without the fund error
hmm…you still having that trouble?
Hi, I really love your content. while following this tutorial I came across with gulp-imagemin plugin issue. could this be due to versions im using and if so whats the workaround? node --version v16.14.1, gulp --version CLI version: 2.3.0 - Local version: 4.0.2
Thanks for the kind words! Glad you're enjoying the channel. Yes, I believe the new version of gulp-imagemin (version 8, I think?) doesn't work. The quickest workaround is to stay on version 7. Type …
npm install --save-dev gulp-imagemin@7.1.0
or you can convert everything to ESM, but that is hard to explain in a comment :)
@@CodinginPublic thank you for your help and time ❤️
I added .js to the module names but same error:
import gulp from "gulp.js";
import imagemin from "gulp-imagemin.js";
import sass from ("gulp-sass.js" , "sass.js");
When you reference node modules, you’re actually referencing the directory name, not a particular file. So adding the extension won’t help. What error are you getting?
@@CodinginPublic SyntaxError: Unexpected token '('
at ESMLoader.moduleStrategy (node:internal/modules/esm
/translators:117:18)
at ESMLoader.moduleProvider (node:internal/modules/esm
/loader:337:14)
at async link (node:internal/modules/esm/module_job:70
:21)
I took the JS off as it didn't make a diff. I read as much as I could find out but the info is scattered through the past few years so its hard to tell if there is a current fix. here is a codepen of my file: codepen.io/DrennanFlynn/pen/GVgwNy
This was very helpful! Thanks a lot!
Awesome! Thanks so much for taking the time to say something!
@@CodinginPublic
Can you please make a detailed video like this on Parcel 2? Initially, I was trying to setup Parcel bundler but there are no video tutorials on Parcel 2.
I did do a very basic video on Parcel: th-cam.com/video/1EoXIkgYgDw/w-d-xo.html
Let me know if that’s sufficient or if it would help to see more.
@@CodinginPublic I have already watched that one. That's surely helpful but can we have separate folders for different types files in dist folder like we have in src folder? I want to remove those .maps files. Basically, I want more control over how things are stored inside dist. Please suggest something. I checked the documentation but it wasn't much helpful and I am not a "pro developer" yet.
Hi, I don't know what's wrong with my code because when a try tu use gulp i get an error:
" Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ...
ode_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of ...
ode_modules\gulp-imagemin\index.js from ...\gulpfile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ...
ode_modules\gulp-imagemin\package.json."
Hey! In the video I used an older syntax. The newer syntax (Node 13+) uses ES6. If you change the declaration up top to…
import ‘imagemin’ from ‘gulp-imagemin’
… that should work. You may also want to try updating NodeJS. Let me know if you’re still running into trouble.
@@CodinginPublic SyntaxError: Cannot use import statement outside a module
Thank you for nice tutorial 💙, but i have an error when import js library. the error is " regular expression error" inside lib js.
i tried a lot ,but I can't solve this .🥺 if you have any suggestions
Sorry I missed your comment. Hmm. Not sure? Mind sharing your code on GitHub or something?
you haven't use browsersync did you?
Correct, I’m not using it in this project.
What editor are you using?
I think in this video I was using Nova by Panic. It’s a Mac-only paid app. I mostly use VSCode now.
@@CodinginPublic great! Thank you! Love your videos btw, the way you explain stuff is so engaging
Thanks so much. Glad you’re enjoying the content!
Subscribed!
I want to know something.
I installed npm dependencies for web designing.
And I installed dependencies bootstrap, jquery, poper.js, font-awesome as well as devDependencies gulp gulp-sass sass browser-sync
But I faced problems when I started to work. Like when run command npm start then only html file runs on the browser-sync. But scss design or bootstrap classes isn't working.
How can I fix it? Please reply or make a tutorial for it.
I used some commands
1) npm init -y
Dependencies:
2) npm install bootstrap@4.6 jquery popper.js font-awesome --save
devDependencies:
3) npm install --save-dev gulp sass gulp-sass gulp browser-sync
After than creating gulpfile.js, I used this command : gulp
But browser-sync isn't working properly.
Please help.
Thanks for the comment!
Did you link the files in your HTML file area?
You need to add a link to your css file and the bootstrap css file for it to effect the content on the page. If you have your html page, feel free to post it somewhere along with your package.json file and I can look it over.
@Bipronath Saha, I took at look and I'm not totally sure what's going on. It looks like with all the different libraries things are getting confused. Any chance you could use Live Server or something with VS Code to avoid the browser-sync? It seems like that's what's causing the problems from what I can tell?
@@CodinginPublic yeah, please. After setting all the dependencies, I give command "npm start" then it open on browser using browser-sync but the problem comes when I use any bootstrap classes on html code and add some custom css, it doesn't work properly. But after opening it on the browser-sync, I cancel the browser-sync tab from browser and open live server extension from vs code. Then it works perfectly but it doesn’t work perfectly on browser-sync.
Thanks for reply.
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const minify = require('gulp-clean-css');
const terser = require('gulp-terser');
const imagemin = require('gulp-imagemin');
const imagewebp = require('gulp-webp');
hope the video was a help
I have tried installing gulp using so many different tutorials and every time I get this error: zsh: command not found: gulp anyone can help me out please?
Sorry you’ve had so much trouble! Where did you get stuck in the tutorial? Did you install Node JS from home brew by any chance? Is it properly installed?
Type the following to check on gulp:
which gulp
--
What does that 👆return?
Installing gulp globally on your machine might help, too. Open a terminal and type the following:
npm i --global gulp
In addition, if you throw your code up somewhere like GitHub and DM on Twitter with the link, I’m happy to take a look. I suspect it’s local to your machine but there may be something in the code causing it. Hope that helps.
@@CodinginPublic Thanks so much for your quick reply! I think that the issue is that I am using a Mac with a M1 chip. as it works on my other mac that has an intel chip.
which gulp returns gulp not found
I have installed Node without homebrew and it is properly installed
Okay, that helps! The M1 shouldn’t have a problem with Node. It sounds like a path problem. It may be worth checking out these forum posts:
stackoverflow.com/questions/29817857/zsh-command-not-found-gulp
stackoverflow.com/questions/12743928/command-not-found-after-npm-install-in-zsh/40375497
@@CodinginPublic
Thanks so much for your help so far!
This seemed to work for me:
npm config set prefix /usr/local
npm link gulp
However now I get these errors:
ReferenceError: primordials is not defined
at fs.js:47:5
at req_ (/Users/sodutch/node_modules/natives/index.js:143:24)
at Object.req [as require] (/Users/sodutch/node_modules/natives/index.js:55:10)
at Object. (/Users/sodutch/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
Have been googling but no success so far
Hey Chris, may you please share your source code? Love the content.
Thanks, @Jacob Mfune! I'll throw it up somewhere and add it to the description. Thanks for the suggestion!
@@CodinginPublic Tks you I will try it
Can you help me setup gulp-sass-glob.
я все завантажив. написав але виводить помилку
можете якось допомогти?
Sorry you’re having trouble. What error are you getting?
Hi Chris , Could you please help me to out of this error, actually when I am run with gulp then comes the following error ---
PS D:\work\Project-Gulp-First> gulp
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\work\Project-Gulp-First
ode_modules\gulp-imagemin\index.js from D:\work\Project-Gulp-First\gulpfile.js not supported.
Instead change the require of index.js in D:\work\Project-Gulp-First\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
at Object. (D:\work\Project-Gulp-First\gulpfile.js:8:18)
at async Promise.all (index 0) {
code: 'ERR_REQUIRE_ESM'
}
Thanks for asking, Subir. You're on a newer version of node (which I wasn't using in this video). If you change each of the statements up top to …
import { src, dest, watch, series } from 'gulp-sass';
import sass from 'gulp-sass';
etc. … that should work.
Let me know if you have any trouble.
@@CodinginPublic Hello I tried your solution but I get this error.
import {src, dest, watch, series} from 'gulp-sass'
^^^^^^
SyntaxError: Cannot use import statement outside a module
Thank you.
@@anuzpandey3326 I had the same issue, the problem for me was that I had a version of imagemin that was too new and it was causing conflicts. npm install --save-dev gulp-imagemin@7.1.0 this is the version you need
Yes, I think that is causing problems for lots of people. Thanks for the comment!
thanks
You’re welcome! Thanks for saying something!
Please a vite tutorial
What would you want to know about customizing Vite?
@@CodinginPublic
First I appreciate for your reply,
What I search in vite how to make it split js modules to chunks, how to make it minify images and all other things I read about on other build systems like webpack
My first build system is vite, so I don’t know if vite support all this stuff
I tried to search in vite doc, they talk about chunks but for people who have weak English like me it is not clear, there is a litttttle examples
Also I tried to search for these stuff in TH-cam, but there is no complete tutorial although all talk vite is next generation and blablabla
I don’t yet know how to do some of those things with Vite, but I’ll look. Thanks for asking! Your English is great!
@@CodinginPublic
Thanx
Hello Chris
👋
Thanks
You’re welcome!