🚨 NOTE: If you're working on Gulp in 2021 and getting an error "gulp-sass 5 does not have a default compiler; please set one yourself" you will need to update the line: const sass =require('gulp-sass'); to instead read: const sass = require('gulp-sass')(require('sass'));
Great video, here for the ones that need it: npm install --save-dev gulp gulp-sass gulp-sourcemaps gulp-postcss autoprefixer cssnano gulp-concat gulp-uglify gulp-replace
This has been the most fun I've had coding so far. I don't think I've learned so much in such a short time from any other Web Development tutorial. I really like the no nonsense approach, straight to the point and no wasted words just focused on the task at hand. I am really impressed and truly grateful for the best tutorial ever. Such a great teacher, thank you!
I've been watching vids like this for years and this is the best one yet. I use webpack but spun up gulp yesterday for a small project. Yesterday I didn't know what everything was but just that it worked. Today I know every line and what it means. Rad!
I can't understand why your channel is so underated ... You just nailed every point a beginner should know while learning gulp. Thank you for making web a great place.
@@TheCoderCoder Thank you for making Web development field easier to new developer.. This tutorial will encourage new developer to automate their process through Gulp. I will constantly be supporting your future projects or videos in form possible.
Gulp is a fantastic tool that is really well explained here. There are a couple of small adjustments required but they are easy fixed and added to the git repo if required. Best tuts on RUclips.
This is a super useful video! Always wanted to use gulp but didn't know how to setup 😅 your video made things clear now. Thanks 👍 keep making such videos.
A super good tutorial for beginners like me. I have been struggling to find a module for php minification and removing white space etc, the whole day today without luck. Would be wonderful if you can add that functionality to this tutorial or maybe make a new one for HTML and php. Looking forward ! Thank you.
Great tutorial, thank you a lot for sharing this! For those who struggle having autoprefixer working - adding specified browser versions made it work in my case: .pipe(postcss([ autoprefixer({browsers: ['> 1%', 'last 2 versions']}), cssnano() ]))
This really very helpful. Thank you for Sharing Coder Coder :) Next thing I want to do to this Gulp file is, add BrowserSync (although I am using livereload from vscode) which I will try to figure out myself how to do. Also I would like to know how to add more JS and CSS files to this. E.g. bootstrap, slick carousel, fontawesome etc. Thanks again. Great work.
@@TheCoderCoder 5 months already. Where are we on browsersync video ? It would be better to adding browsersync on where we left from i.e your starter template
@@pawanbantawa7651 Sorry, I'm working on some other projects currently, not sure when I'll get to this one. But if you check out the Browsersync site they have instructions on setting up in Gulp, I'm sure you'll be able to get it working 👍
Thanks for the helpful tutorial, just one comment: cbString should be defined inside cacheBustTask function instead, so that the string value got updated each time when the gulp watch session is still running with every SCSS/JS update at real-time.
Please note that you have to provide a browser list for autoprefixer to work like .pipe(postcss([autoprefixer("last 2 versions"), cssnano()])) or specify browserlist in your package.json
Thank you very much for this video it really save my time I wish if you do another tutorial for building a bootstrap workflow with gulp and browser-sync I tried to figure it out by myself following bootstrap doc. but I failed please if you have time explain it for us.
Keep getting this: new-host-6:frontend-boilerplate shawnjohnson$ gulp [00:12:58] Using gulpfile ~/GitHub/frontend-boilerplate/gulpfile.js [00:12:58] Task never defined: default [00:12:58] To list available tasks, try running: gulp --tasks Then when I run the gulp --tasks I get this: [00:22:19] Tasks for ~/GitHub/frontend-boilerplate/gulpfile.js [00:22:19] └─┬ [00:22:19] └─┬ [00:22:19] ├─┬ [00:22:19] │ ├── scssTask [00:22:19] │ └── jsTask [00:22:19] ├── cacheBustTask [00:22:19] └── watchTask
Hi, I think this is due to a bug for some people in Gulp v4.0.0. If you update the package.json from the GitHub repo, or update your Gulp version it should fix this!
I usually just reload manually because I like being able to compare the before and after of if updated CSS works. But I'll do another Gulp tutorial in the future using BrowserSync-- it's requested a lot :)
@@TheCoderCoder oh wow! I am really excited to watch that tutorial. I am learning gulp so If you will upload that tutorial. that will be great. btw, your videos are really awesome. Thanks again. :)
Great Video! You have a great (don't worry, everything's ok) voice! So do you still use gulp for the majority of your projects or Parcel now? (I like Parcel too but I have had trouble with setting it up to do vendor prefixes with autoprefixer - apparently others have experienced this too). Thanks again, really like your channel!
Very good video, thanks. Only thing is that from what was said in the first minute I thought you were also going to show how I can re-use this for future projects (with minimal effort). But I guess I'll have to always install all the npm packages I want to use in that project in the terminal for each new project to get the package.json file with the devDependencies? And then copy my Gulpfile.js?
Thank you, that really helped for the new gulp 4 syntax! You deserve way more followers! I was relieved to see that you're quite popular on Instagram though :-) One question: At work, as a convention we don't check the node modules into the code management system. That's obviously for good reasons. But in this setup, there are quite a few plugins from gulp alone. So it would be quite a hassle to set up the environment on any new device or for any new team member. So would you consider checking in the node modules or is there a more elegant solution?
Thanks so much! For all the Gulp-related npm packages, I generally save them as dev dependencies in the package.json. So any dev that needs to run the project, running "npm install" will install all of those. They will also have to install the Gulp CLI on their computer. But other than that, it should all work for anyone!
Awesome pace and video editing. Learnt more than I was hoping for in this. Explaining on the concepts as you write code was a nice and it was like a thought process.
i am follow all steps but give me this error->>>> Cannot find module 'concat' >>>> in CMD when i run gulp command.. and i am also change your folder name app to src.
This probably means you didn't install gulp-concat? You will also need to update your folder names in the gulpfile.js to use the folder names you have.
install browser-sync package with npm Then add: const autoprefixer = require('autoprefixer'); In sassTask() and jsTask() function after .pipe(dest('dist')) add: .pipe(browserSync.stream()) Then inside watchTask it should look like this: function watchTask(){ browserSync.init({ server: { baseDir: './' } }); watch([files.scssPath, files.jsPath], parallel(sassTask, jsTask)); watch('./*.html').on('change', browserSync.reload); } I don't know if it's done properly, but it works for me ;p
the scss didn't work for me, it was cause i had another name than the one on the index.html, isn't it supossed to automatically catch it from the gulpfile?
You do need to make sure the CSS file references in the index.html is the same filename as your main SCSS file. Meaning if you are loading styles.css in your index.html file, your main SCSS file needs to be called styles.scss. Hope this helps!
If you have gulp installed globally, you'll need to uninstall it before installing gulp-cli globally. Then in each project using Gulp, you'll need to install whatever gulp version you need just for that project, in the project folder.
This is such a great video. Thanks for breaking it down so clearly. I did run into an issue at the end though, which no amount of Googling seems to solve! When I try to run the gulp command to test if all my tasks are working, I get an error "gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again." I've tried a few StackOverflow-recommended fixes, but nothing works. Any ideas? Is this something anybody else has ran into?
Hi, that usually means that you don't have gulp installed as part of your command line. Previously you had to install gulp globally and add it to your path in Windows. However, that's no longer recommended. Make sure you have gulp-cli installed globally, and that will ensure you can run gulp on your command line.
I'm a confused beginner. I understand how to do all this on a local Windows computer just as you do, with VS Code, and Powershell as the terminal. How would I do it on a Linux vps? I mean, I use the remote server extension in VS Code to work on a vps filebase as though it were local and with an ssh terminal in VS Code. That's great. Is there a way to run Gulp on the vps to have all the same functionality I would have it were local?
I haven't set up Gulp on the type of enviro you're working on. But generally you can run the same install commands on a production server just the same as a local one. What people do is run a command line command on a server when you deploy. So it will automatically run Gulp every time you deploy to that server.
@@TheCoderCoder Thank you for your prompt reply. I have it working now, with a little help from additional reading on Stackexchange, although I need to hit "refresh" in my browser after making a change to the page because my local browser is not under the control of the Gulp instance running on the server.
Will this work for updating / compiling SCSS on a live WordPress website? If so, how would you go about it? If not, could you lead me in the right direction? Thank you in advance! I read your post on FreeCodeCamp about Gulp 4. Much Appreciated!
Thanks for reading! Yes, you can use this in Wordpress setups (I do for my blog). You can add your gulpfile.js in your theme folder, and just make sure that your theme files reference the final CSS/JS files after Gulp has compiled them. Hope this helps!
Aahhh, one more question. How do you implement cache-busting in WordPress since there is no index.html file. Honestly, I'm pretty new to WP and PHP and have been trying to get this live website to update my SCSS changes to the server for days. I've tried FileZilla, ssh, clearing my cache to see changes, and gulp but all videos and tutorials related to WordPress seem to be outdated or have some issue. I really appreciate your help!
@@alexm5363 That is a bit tricky-- I have a blog post on Gulp on how to add cachebusting. (coder-coder.com/gulp-4-walk-through/) The trick is to figure out how to cachebust in a classic Wordpress scenario. It may involve the functions.php file
Thank you for this helpful video, it works great but I'm having issues with the autoprefixer. Any clue what I'm missing on? I've imported the dependency properly and verified the gulpfile.js but couldn't find any mistake… thanks again!
Excellent tutorial!! I'm being thrown an error that seems to be related to the gulp.replace. Any ideas? :) [14:50:22] Starting 'cacheBustTask'... [14:50:22] 'cacheBustTask' errored after 4.43 ms [14:50:22] TypeError: Cannot create property 'skipBinary' on number '1573620621229' at module.exports (/Users/pablosouza/Desktop/Projects/teacher/node_modules/gulp-replace/index.js:13:24) at cacheBustTask (/Users/pablosouza/Desktop/Projects/teacher/gulpfile.js:42:11) at bound (domain.js:402:14) at runBound (domain.js:415:12) at asyncRunner (/Users/pablosouza/Desktop/Projects/teacher/node_modules/async-done/index.js:55:18) at process._tickCallback (internal/process/next_tick.js:61:11)
🚨 NOTE: If you're working on Gulp in 2021 and getting an error "gulp-sass 5 does not have a default compiler; please set one yourself" you will need to update the line:
const sass =require('gulp-sass'); to instead read: const sass = require('gulp-sass')(require('sass'));
If you're working on Gulp in 2023 you will need to update the line ... and you will need to install "sass" (npm i -D sass)
Great video, here for the ones that need it: npm install --save-dev gulp gulp-sass gulp-sourcemaps gulp-postcss autoprefixer cssnano gulp-concat gulp-uglify gulp-replace
This has been the most fun I've had coding so far. I don't think I've learned so much in such a short time from any other Web Development tutorial. I really like the no nonsense approach, straight to the point and no wasted words just focused on the task at hand. I am really impressed and truly grateful for the best tutorial ever. Such a great teacher, thank you!
Thanks so much for your kind words! I'm glad this tutorial helped you out!
This was great, thank you! The presentation, delivery of the content, and quality of the audio/video is perfect.
You're the coolest coder out there gurl! Thankssssssss
I've been watching vids like this for years and this is the best one yet. I use webpack but spun up gulp yesterday for a small project. Yesterday I didn't know what everything was but just that it worked. Today I know every line and what it means. Rad!
Thanks so much! I'm glad you're enjoying Gulp and this helped you!
I can't understand why your channel is so underated ... You just nailed every point a beginner should know while learning gulp. Thank you for making web a great place.
Thanks so much! I'm just starting on RUclips, hope to make many more videos in the future! :D
@@TheCoderCoder Thank you for making Web development field easier to new developer.. This tutorial will encourage new developer to automate their process through Gulp.
I will constantly be supporting your future projects or videos in form possible.
Gulp is a fantastic tool that is really well explained here. There are a couple of small adjustments required but they are easy fixed and added to the git repo if required. Best tuts on RUclips.
Thanks so much!
It helped me to get a quick overview of the Gulp 4, it's tasks and the processes .
This is a super useful video! Always wanted to use gulp but didn't know how to setup 😅 your video made things clear now. Thanks 👍 keep making such videos.
A super good tutorial for beginners like me. I have been struggling to find a module for php minification and removing white space etc, the whole day today without luck. Would be wonderful if you can add that functionality to this tutorial or maybe make a new one for HTML and php. Looking forward ! Thank you.
watched this other tutorial which left me more confused about gulp...enjoyed this tutrial. much thanks Coder Coder!!!
You Fridgin Rock !!!!! I needed to migrate to Webpack from Gulp and I needed some Gulp 4 Knowledge like ASAP and this is all I needed!! Thanks haha
I congratulate you for sharing with the programmers world. Thank to you I just learned gulp
Nicely made tutorial, clear & succinct, covered the necessities, thanks for producing it! 👍
Great tutorial, thank you a lot for sharing this!
For those who struggle having autoprefixer working - adding specified browser versions made it work in my case:
.pipe(postcss([ autoprefixer({browsers: ['> 1%', 'last 2 versions']}), cssnano() ]))
Thanks for posting the fix! :D
This really very helpful. Thank you for Sharing Coder Coder :)
Next thing I want to do to this Gulp file is, add BrowserSync (although I am using livereload from vscode) which I will try to figure out myself how to do.
Also I would like to know how to add more JS and CSS files to this. E.g. bootstrap, slick carousel, fontawesome etc.
Thanks again. Great work.
Thanks! That's a great idea-- I think I'll do a future Gulp tutorial w/ BrowserSync and more complex file setup.
@@TheCoderCoder 5 months already. Where are we on browsersync video ? It would be better to adding browsersync on where we left from i.e your starter template
@@pawanbantawa7651 Sorry, I'm working on some other projects currently, not sure when I'll get to this one. But if you check out the Browsersync site they have instructions on setting up in Gulp, I'm sure you'll be able to get it working 👍
@@TheCoderCoder Pleeeeeease make the browsersync vid! I for the life of me cannot figure it out :/
@@derickmoncado I'll try to work on this soon!!
Thank you for the cache busting task and clear explanations
you're very welcome!
Great tutorial. Saved me a lot of time and headaches. Very grateful!
Thanks for the helpful tutorial, just one comment: cbString should be defined inside cacheBustTask function instead, so that the string value got updated each time when the gulp watch session is still running with every SCSS/JS update at real-time.
You are the best tech teacher!🎉❤
Like the cache busting task, thank you
Good job on the tutorial. Update your watchTack to include the cacheBustTask() else versions won't update.
thanks so much! I have updated the GitHub repo with cache busting in the watch task :)
@@TheCoderCoder Oh, I was wondering about that and couldn't quite see what was going on.
Yeah, I think she hit shift+f5 on the video :)
спасибо вам , я просто счастлив что ваше видео попала в мое поле зрение, Респект вам
Awesome tutorial, clear explanations, very well narrated as you typed.
thanks so much! I try to explain well :)
My javascript file had ES6 code in it - js uglify doesn't support ES6 so it threw an error.
I replaced js uglify with terser and it worked great!
Glad you were able to fix it! I probably should add Babel to this workflow for ES6 compatibility.
Coder Coder, that'll be great. At what line should I include babel?
great video, quite fastidious, enjoyed learning from you. I will be checking out your gulp-course
Please note that you have to provide a browser list for autoprefixer to work like
.pipe(postcss([autoprefixer("last 2 versions"), cssnano()]))
or specify browserlist in your package.json
Thank you so much for this tutorial you really helped me alot. I would like to see more advanced tutorial about Gulp4 in the future.
Thanks again.
Thanks for a great lesson. You tell and instruct it super well. You're really Cool.
Thanks!
Please make a FullStack course! You explain Soo good where were you before I started learning??!
Thanks so much!
Love that mechanical keyboard.
Thank you, very much!!! I was looking for something like that, specifically like that! Thanks a million!
Glad this could help!
Really good video! Subscribed! 😍😍
You are just great. You solved my every question. love you
Thank you so much for this video! It helped me started with Gulp quickly.
You're very welcome! I'm glad it could help get you started.
this is what i need. thanks for making this video. you're awesome :)
So glad this helped you!
Thank you very much for this video it really save my time I wish if you do another tutorial for building a bootstrap workflow with gulp and browser-sync I tried to figure it out by myself following bootstrap doc. but I failed please if you have time explain it for us.
You're very welcome! I will plan on doing another Gulp video in the near future w/ BrowserSync and more complex setup :)
Keep getting this:
new-host-6:frontend-boilerplate shawnjohnson$ gulp
[00:12:58] Using gulpfile ~/GitHub/frontend-boilerplate/gulpfile.js
[00:12:58] Task never defined: default
[00:12:58] To list available tasks, try running: gulp --tasks
Then when I run the gulp --tasks I get this:
[00:22:19] Tasks for ~/GitHub/frontend-boilerplate/gulpfile.js
[00:22:19] └─┬
[00:22:19] └─┬
[00:22:19] ├─┬
[00:22:19] │ ├── scssTask
[00:22:19] │ └── jsTask
[00:22:19] ├── cacheBustTask
[00:22:19] └── watchTask
Hi, I think this is due to a bug for some people in Gulp v4.0.0. If you update the package.json from the GitHub repo, or update your Gulp version it should fix this!
Good tutorial, learned a lot about gulp 4!
I'm glad this could help!
Thank You ! How to reuse it in a different projects .
Thank you so much this has been really helpful, keep up the great work!
You're very welcome!
Cool intro!!
Thanks so much! My husband is a super talented video editor and animator :D
Thanks for great tutorial, why you don't use browserSync?
I usually just reload manually because I like being able to compare the before and after of if updated CSS works. But I'll do another Gulp tutorial in the future using BrowserSync-- it's requested a lot :)
@@TheCoderCoder oh wow! I am really excited to watch that tutorial. I am learning gulp so If you will upload that tutorial. that will be great. btw, your videos are really awesome. Thanks again. :)
You intro is awesome 💯
Thanks so much!
thanks for share but i think for this setup needs browsersync too its essential.
The next video will be about Browsersync in Gulp :)
Wow, amazing explanation!
I'm glad this helped you!
Great Video! You have a great (don't worry, everything's ok) voice!
So do you still use gulp for the majority of your projects or Parcel now? (I like Parcel too but I have had trouble with setting it up to do vendor prefixes with autoprefixer - apparently others have experienced this too).
Thanks again, really like your channel!
Thanks! I will usually use Gulp or the VS Code Live Sass extension. But I'd like to go back and experiment with Parcel more in the future!
Very good video, thanks. Only thing is that from what was said in the first minute I thought you were also going to show how I can re-use this for future projects (with minimal effort). But I guess I'll have to always install all the npm packages I want to use in that project in the terminal for each new project to get the package.json file with the devDependencies? And then copy my Gulpfile.js?
Yep exactly! We'll always have to install the npm packages and copy the gulpfile to get started.
@@TheCoderCoder Thank you for the quick reply. That is exactly what I will do from now on then. Have a good day :)
Hi, I am a beginner and still confused specially in gulp, should I still use gulp now adays? Hoping for a replyy :)
does not recognize gulp as a command - followed all instructions - even downloaded the repo and did not work - i installed it globally too
Thank you, that really helped for the new gulp 4 syntax! You deserve way more followers! I was relieved to see that you're quite popular on Instagram though :-)
One question: At work, as a convention we don't check the node modules into the code management system. That's obviously for good reasons. But in this setup, there are quite a few plugins from gulp alone. So it would be quite a hassle to set up the environment on any new device or for any new team member. So would you consider checking in the node modules or is there a more elegant solution?
Thanks so much! For all the Gulp-related npm packages, I generally save them as dev dependencies in the package.json. So any dev that needs to run the project, running "npm install" will install all of those. They will also have to install the Gulp CLI on their computer. But other than that, it should all work for anyone!
Awesome, great tutorial. Thank you .. !!!
Thanks for this. This really helped me!!!
you're welcome!!
Thanks a lot for this excellent tutorial!
you're welcome, so glad you enjoyed it!
How can i run only one task on demand, for example i just want to regenerate js files.
Thanks for this video, is very helpful!!
Thanks so much! Glad it's helpful :)
extremely helpful, thank you
you're very welcome!
Awesome pace and video editing. Learnt more than I was hoping for in this.
Explaining on the concepts as you write code was a nice and it was like a thought process.
Glad it helped you! :)
How do you add browsersync to this gulpfile.js?
Thank you, very helpful!
i am follow all steps but give me this error->>>> Cannot find module 'concat' >>>> in CMD when i run gulp command.. and i am also change your folder name app to src.
This probably means you didn't install gulp-concat? You will also need to update your folder names in the gulpfile.js to use the folder names you have.
Is it okay to be dependent on VS code extensions?
which keyboard you using in this video.
Awesome, Thank you!!
you're very welcome!
Excellent video I don't know if you could still put browser sync
Thanks! I don't usually use browser sync, but I believe it works pretty well with Gulp
This is the link www.browsersync.io/ Check and see how it goes and then tell me.
install browser-sync package with npm
Then add:
const autoprefixer = require('autoprefixer');
In sassTask() and jsTask() function after .pipe(dest('dist')) add:
.pipe(browserSync.stream())
Then inside watchTask it should look like this:
function watchTask(){
browserSync.init({
server: {
baseDir: './'
}
});
watch([files.scssPath, files.jsPath],
parallel(sassTask, jsTask));
watch('./*.html').on('change', browserSync.reload);
}
I don't know if it's done properly, but it works for me ;p
the scss didn't work for me, it was cause i had another name than the one on the index.html, isn't it supossed to automatically catch it from the gulpfile?
You do need to make sure the CSS file references in the index.html is the same filename as your main SCSS file. Meaning if you are loading styles.css in your index.html file, your main SCSS file needs to be called styles.scss. Hope this helps!
Amazing! Thank you...
Thank you.
Found it 😎
gulp command not found after installing gulp and gulp-cli globally.. waht is that?
If you have gulp installed globally, you'll need to uninstall it before installing gulp-cli globally. Then in each project using Gulp, you'll need to install whatever gulp version you need just for that project, in the project folder.
How would you include browser sync in this workflow so you don’t have to keep refreshing the page?
I'm planning on making a video on browsersync at some point-- for now I only have that material in my Gulp course (link in descr)
Thank you thank you soo much
Why you dont concat the SASS files to a single bundled CSS file?
I am-- all the Sass files are getting compiled and optimised into one final CSS file, /dist/style.css. Is that what you mean?
This is such a great video. Thanks for breaking it down so clearly. I did run into an issue at the end though, which no amount of Googling seems to solve! When I try to run the gulp command to test if all my tasks are working, I get an error "gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path
was included, verify that the path is correct and try again." I've tried a few StackOverflow-recommended fixes, but nothing works. Any ideas? Is this something anybody else has ran into?
Hi, that usually means that you don't have gulp installed as part of your command line. Previously you had to install gulp globally and add it to your path in Windows. However, that's no longer recommended. Make sure you have gulp-cli installed globally, and that will ensure you can run gulp on your command line.
Thank you so much!
you're welcome!
I'm a confused beginner. I understand how to do all this on a local Windows computer just as you do, with VS Code, and Powershell as the terminal. How would I do it on a Linux vps? I mean, I use the remote server extension in VS Code to work on a vps filebase as though it were local and with an ssh terminal in VS Code. That's great. Is there a way to run Gulp on the vps to have all the same functionality I would have it were local?
I haven't set up Gulp on the type of enviro you're working on. But generally you can run the same install commands on a production server just the same as a local one. What people do is run a command line command on a server when you deploy. So it will automatically run Gulp every time you deploy to that server.
@@TheCoderCoder Thank you for your prompt reply. I have it working now, with a little help from additional reading on Stackexchange, although I need to hit "refresh" in my browser after making a change to the page because my local browser is not under the control of the Gulp instance running on the server.
Thanks for your video. Unfortunately I get the "ReferenceError: parallel is not defined
". Any idea why? have have the same code as you have.
Hi, you might need to update your package.json with what I have on the GitHub repo-- I think installing Gulp v4.0.2 fixes some of these issues.
Will this work for updating / compiling SCSS on a live WordPress website? If so, how would you go about it? If not, could you lead me in the right direction? Thank you in advance! I read your post on FreeCodeCamp about Gulp 4. Much Appreciated!
Thanks for reading! Yes, you can use this in Wordpress setups (I do for my blog). You can add your gulpfile.js in your theme folder, and just make sure that your theme files reference the final CSS/JS files after Gulp has compiled them. Hope this helps!
@@TheCoderCoder Thank you!
Aahhh, one more question. How do you implement cache-busting in WordPress since there is no index.html file. Honestly, I'm pretty new to WP and PHP and have been trying to get this live website to update my SCSS changes to the server for days. I've tried FileZilla, ssh, clearing my cache to see changes, and gulp but all videos and tutorials related to WordPress seem to be outdated or have some issue. I really appreciate your help!
@@alexm5363 That is a bit tricky-- I have a blog post on Gulp on how to add cachebusting. (coder-coder.com/gulp-4-walk-through/) The trick is to figure out how to cachebust in a classic Wordpress scenario. It may involve the functions.php file
Many thanks!
Thank you for watching!
Hi I was wondering how would you add browsersync to this setup to automatic browser refresh when any files are changes js/css or html
So i got this to work with browserSync not sure if i did i right but it watches my html and sass and reloads on edit save: this is my gulfile.js:
//Initialize modules
const { src, dest, watch, series, parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();
//File path variables
const files = {
scssPath: 'app/scss/**/*.scss',
jsPath: 'app/js/**/*.js',
htmlPath: './*.html'
};
//Sass task
function scssTask() {
return src(files.scssPath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([ autoprefixer(), cssnano() ]))
.pipe(sourcemaps.write('.'))
.pipe(browserSync.stream())
.pipe(dest('dist'));
}
function htmlTask() {
return src(files.jsPath).pipe(concat('all.js')).pipe(uglify()).pipe(dest('dist'));
}
//JS task concat minify
function jsTask() {
return src(files.htmlPath).pipe(browserSync.stream()).pipe(dest('dist'));
}
//Cachebusting task no need to clear
const cbString = new Date().getTime();
function cacheBustTask() {
return src([ 'index.html' ]).pipe(replace(/cb=\d+/g, 'cb=' + cbString)).pipe(dest('.'));
}
//watch task
function watchTask() {
browserSync.init({
server: {
baseDir: './'
}
});
watch([ files.scssPath, files.jsPath, files.htmlPath ], parallel(scssTask, jsTask, htmlTask));
}
//default task
exports.default = series(parallel(scssTask, jsTask), cacheBustTask, watchTask);
@@philip9677 That's great! I'm actually planning on doing a Gulp + Browsersync video soon too 👍
@@philip9677 just what i was looking for works perfectly. well done.
Love the video, but could we please mute the keyboard strokes sounds. It hurts the mind.
Como fazer autoprefixer funcionar?
Autoprefixer is run through PostCSS. hope this answers your question!
agrega esto en package.json "browserslist": [
"last 3 version",
"not dead",
"> 0.2%"
],
add that on package.json ;)
Thank you for this helpful video, it works great but I'm having issues with the autoprefixer. Any clue what I'm missing on? I've imported the dependency properly and verified the gulpfile.js but couldn't find any mistake… thanks again!
My bad it took me some time to realize how few prefixes are actually necessary nowadays… it's working just fine, thanks again.
@@MariusDuboule Cool, glad you got it working!
how to add a browserSync to similar gulpfile?
Ok, after few tries I did it
Excellent tutorial!! I'm being thrown an error that seems to be related to the gulp.replace. Any ideas? :)
[14:50:22] Starting 'cacheBustTask'...
[14:50:22] 'cacheBustTask' errored after 4.43 ms
[14:50:22] TypeError: Cannot create property 'skipBinary' on number '1573620621229'
at module.exports (/Users/pablosouza/Desktop/Projects/teacher/node_modules/gulp-replace/index.js:13:24)
at cacheBustTask (/Users/pablosouza/Desktop/Projects/teacher/gulpfile.js:42:11)
at bound (domain.js:402:14)
at runBound (domain.js:415:12)
at asyncRunner (/Users/pablosouza/Desktop/Projects/teacher/node_modules/async-done/index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
Thanks! Hmm, I'm not sure what's happening for you-- could you post a copy of your gulpfile.js to Codepen or GitHub and send me the link?
Coder Coder thanks for the prompt reply... I was having problems with permission because of untidy node installation but now it’s fixed. Thanks!
@@pablosouza2687 Glad you resolved the issue!
Thank you!!!
cool video)
How would you add browser-sync to this?
I'll be posting a video on using Browsersync in Gulp in January! 😁
@@TheCoderCoder Looking forward to it as this is a very good video!
@@TheCoderCoder
import browserSync from 'browser-sync';
export const serve = (done) => {
server.init({
proxy: 'localhost/yoursite'
});
done();
};
export const watch = () => {
gulp.watch('src/assets/scss/**/*.scss', styles);
gulp.watch('src/assets/js/**/*.js', gulp.series(scripts, reload));
gulp.watch('**/*.php', reload);
gulp.watch(paths.images.src, gulp.series(images, reload));
gulp.watch(paths.other.src, gulp.series(copy, reload));
};
export const dev = gulp.series(clean, gulp.parallel(styles, scripts, images, copy), serve, watch);
very helpful...
thanks for watching :)
Nice one
Thank you!
Subed
The cache busting thing is unnecessary. Good tutorial though.
I've found cachebusting pretty useful. Thanks for watching!
Awesome tutorial. Thank you!
Thanks so much, really helpful!
Fantastic, thank you so much.
Very useful thank you!
You're very welcome!
cool video)