Gulp 4.0 Tutorial 2020 | Concat & Minify Your CSS and JS

[@cmefindaname]

👏 Thanks man! Just what I needed. Perfect crash course for gulp. I was able to modify for my folder structure and add a few more tasks after tinkering and referencing your video a few times.

[@arshiagholami7611]

you are amazing sir, saved my assignment

[@Sohrabziagoogle]

Thank you. Finally I know what this folder structure means.

[@jaydeepgoswami909]

Great work. Easily explained the complex task.

[@fernandodiegosantillanvara1108]

thanks bro!! You did amazing work!! I try in another videos but this is the pro. I recomend to install the version 7 the gulp-imagemin

[@deividaskrupstas]

Never clicked subscribe button so fast 😉! Thank you!

[@alvarouribe8416]

WOW amazing sir ! 🙏🏽 excellent video, it was exactly what I was looking for and I was looking the terser solution. You have a new subscriber

[@alexandrebrunoalvarenga8862]

tks for this example,it was great man

[@bocarwane8779]

Awesome video, I really appreciate!

[@Rodrigo-nx4fg]

Thanks for your time to explain this!.. very clear and powerful, Awesome!! ❤️

[@Yolosopher27]

Really nice video, thanks. After 3-4 gulp tutorials couple of months ago, I gave up learning it because I didn't have a need to and found it really confusing. Now I needed and after watching this, you made me realize how this thing and it's config work. Could you also teach us Webpack and it's config with the explanation of this quality? :D Would be really nice.

[@SamFromaway]

Thanks a lot, glad it helped. A video about webpack is not planned yet, but maybe in the future.

[@cesaraugusto-ko6fj]

Achei ótimo o vídeo, muito prático, me ajudou muito, vlw

[@abhishekrajput2014]

Hi , i am trying to use gulp-imagemin but its showing error that we can't require this module and we should rather import it(after importing this particular module by using "type":"module" in my json file and import statement in gulpfile ,it is prompting me to convert all the require statements to import) , but as I have used require at several places in my project it is very difficult to import each and every module and path, can you tell some method that we can do to import imagemin rather than importing it?

[@codecobber1107]

Absolutely superb, thank you so much.

[@Recetasdeabuela]

Thnaks!!! finally I understand (more or less) that shit!!

[@TazExprez]

Thanks a lot! Great Gulp 4 tutorial!

[@SamFromaway]

Thanks :D

[@ExplaineRKhaN]

thank u sir from the core of my heart

[@ashishkurambhatti2218]

Hey, Can you tell me if I can minify my internal css(present in tag ) and internal js(present in tag ) into minfied file? If can can you share any steps on the same. Thanks in advance.

[@kurtziwa]

thanks for your tutorial however, how to add using browser-sync? if changed JS or SCSS browser-sync

[@bradwhite5411]

Hey mate, I think this guide is perfect for me, do you have a tutorial on how to deploy it in Netlify and make it live. I tried to deploy the files you have here but I can't make it work at all. Please advise hopefully add some browserSync too if possible

[@cristinamihaela9844]

Excellent channel. Subscribed.

[@SamFromaway]

Appreciate it :D

[@matthieudewaele3366]

You're the best !

[@madog666]

Hey man. Really awesome tutorial! I support! But you know there will always be some "but". I'm not some expert so don't mind if I say something stupid, so here it is: What if I want to have multiple .js files like modules but not modules, no type="modules" in html, and I want before my .html run the main script, for example "script.js", that app.js and ui.js go trough concatenation and terser and that output of those two be that main "script.js" and to be placed in src/js folder? Here comes the biggest issue that I don't get: That function that you have writen works fine, all good. But how should I write a function in Gulp, so that I use multiple .js failes just like modules type but that .html loads only main script.js that is located .pipe(gulp.dest('src/css')) in src folder along other all .js files. So that I can run later some build function task and copy all files I want into my dist folder. I want that while I work just like in scss/css that files are updated automaticly on a change/save thing everything is done into that one main .js file that my html loads. Is it possible, or my imagination is way off limit? :D Thanks

[@tiiesb916]

is it possible to configure browser synchronization? Thank you

[@georgesmith3022]

very good video, thanks

[@marciazegarra8193]

Thank you so much!

[@masbroto378]

it's so cool and helpfull. thanks

[@ifeoluwaonigbinde3250]

Thank you soooo much!!!!

[@e11world]

Beautiful plugin. Would love to do more on the cachebusting and purgecss integration on this. Much appreciated

[@thobelanitabalaza8566]

Thanks bro, quick to the point.... hey could you do one for react,sass/scss and gulp please

[@SamFromaway]

Thanks, with react I would highly suggest using create-react-app instead of using gulp.

[@gabrielfono844]

thanks I was struggling of using uglify. you are right it doesn't support ES6 thanks

[@SamFromaway]

cool, glad that it helped, took me a while to find it out :D

[@gabrielfono844]

@@SamFromaway thanks a lot. save me time for sure

[@germanduterte7110]

Nice tutorial

[@SamFromaway]

Thanks

[@utshomomen]

if you saw an error of cssTasks then please install separately postcss because the the one with the gulp-postcss doesn't work. npm install postcss --save-dev

[@yurionthecode]

tnks bro

[@andersonpires9318]

Thank u, bro!

[@rubayet7566]

If I delete a html file from "./src" folder, then I need to delete files automatically from "./dist" folder too. how can I do this?

[@deividaskrupstas]

Can you include scss for CSS ?

[@pyongits]

Thank youu ❤

[@Flame-on-f2p]

hey Dev world iam a joiner web dev and im completely lost on what should i learn for tasks weither gulp or webpack if you can make a video on what should learn like a road map for new developers

[@SamFromaway]

Hey Mano, I just published the Parcel js video. kzbin.info/www/bejne/fafTYmaYa9eUnsU Soon I'll have a video with my workflow.

[@guilhermegirardi]

Thank you very much! Do you know how can I deploy a project with Gulp on Netlify?

[@SamFromaway]

Thanks. I have a video on Netlefy here kzbin.info/www/bejne/el7Fh618hsSgi6s. Just put in your build command in the option build & deploy or while setting up the site.

[@guilhermegirardi]

@@SamFromaway Thanks for that, I appreciate it. I was struggling cos' I thought that I had to run 'gulp' before starting the project.

[@SamFromaway]

@@guilhermegirardi Yes I usually set it up like that, so if you have changes you don't have to rebuild it manually but you can just push the changes to github and netlify will automatically rebuild the site with gulp

[@jeffz2010]

If anyone gets this error: Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"}) Use this syntax: npm install gulp-sourcemaps --save-dev npm install gulp-concat --save-dev npm install gulp-terser --save-dev

[@ravisoni6262]

Hi, I'm using mac and getting this message: "-bash: gulp: command not found"

[@SamFromaway]

Your probably did not install gulp the right way

[@gerryleonugroho]

And when I tried to run the gulp jsTask, got the following error. Any ideas how this happened? Error: Cannot find module '/Volumes/DATA/Automation/project/node_modules/d/index.js'. Please verify that the package.json has a valid "main" entry at tryPackage (internal/modules/cjs/loader.js:329:19) at Function.Module._findPath (internal/modules/cjs/loader.js:690:18) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1017:27) at Function.Module._load (internal/modules/cjs/loader.js:899:27) at Module.require (internal/modules/cjs/loader.js:1090:19) at require (internal/modules/cjs/helpers.js:75:18) at Object. (/Volumes/DATA/Automation/project/node_modules/memoizee/lib/configure-map.js:7:24) at Module._compile (internal/modules/cjs/loader.js:1201:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10) at Module.load (internal/modules/cjs/loader.js:1050:32) { code: 'MODULE_NOT_FOUND', path: '/Volumes/DATA/Automation/project/node_modules/d/package.json', requestPath: 'd' }

[@SamFromaway]

Check the package.json file and check if in the object the key: main is your main js file

[@gerryleonugroho]

@@SamFromaway thanks, my bad. Encountered minor typos

[@SamFromaway]

Life of a programmer :D

[@gerryleonugroho]

@@SamFromaway haha, so true, love the videos you've been putting up on youtube. please stays safe during the pandemic. warmest regards from jakarta, indonesia.

[@SamFromaway]

@@gerryleonugroho Thanks, stay safe, greeting from Colombia ;)

[@VileEnd]

So if I have Sass/css files which are in more than one place can I use an array for the arc and dest or what is the best option?

[@SamFromaway]

I did not find anything in the documentation, let me know if you found a solution. But for other reasons too it's probably best to have all your CSS in one folder. What you can do if there is no quick solution is just have more than one CSS task for the different locations.

[@VileEnd]

@@SamFromaway hi in the end i pushed everthing into an array see code below was just that some parts differ tryed it with complete diffrent locations that also works but often causes a stack overflow const { src, series, dest, watch, } = require('gulp'); const sass = require("gulp-sass") const { init, reload, stream } = require("browser-sync"); const paths = ["./Content/styles/login.scss", "./Content/styles/main.scss", "./Content/styles/external/*.scss", "./Content/styles/impressum.scss", "./Content/styles/shared/**/*.scss", "./Content/styles/shared/*.scss", "./Areas/**/Content/styles/*.scss", ]; function sassCompile() { return src(paths, { base: "./" }) .pipe(sass()) .pipe(dest(".")) .pipe(stream()); } function watchTask() { init({ server: { baseDir: "./", }, }); watch(paths, sassCompile).on("change", reload); } exports.sassCompile = sassCompile; exports.watchTask = watchTask; exports.default = series(sassCompile, watch);

[@SamFromaway]

@@VileEnd Perfect, thanks for letting me know :D

[@VileEnd]

@@SamFromaway np ^^

[@tejaskesaria7175]

can you please tell me the difference between gulp and webpack?

[@SamFromaway]

Good question. They are similar but webpack is surely more advanced than Gulp, whereas Gulp is easier to configure. Wepack also has a bigger ecosystem with plugins etc. For simple tasks I would use Gulp, for bigger tasks either configure webpack, but usually if you have to configure webpack there is probably a template out there for your use-case like create-react-app etc

[@tharakakarunarathne2420]

I get an error. Please help "Did you forget to signal async completion?"

[@someone761]

gulp wait for return to signal completion of the task async function and there're many ways for this ... read gulpjs.com/docs/en/getting-started/async-completion but simply you can add "async" before your task function for now .

[@aurelianspodarec2629]

What about Scss?

[@SamFromaway]

You find how to compile scss in their documentation too

[@someone761]

I got this error PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users: github.com/postcss/postcss/wiki/PostCSS-8-for-end-users tried many things and nothing works!!!!!!!!

[@korkut31]

:) bad tutor. why did not u use inject at the end ? funny :) terser is uselless at 2023 cosa need a module bundler

[@jasonflaherty6186]

for imagemin, i had to use: npm i gulp-imagemin@7.1.0