Cut Your Dev Time In HALF With Gulp & Webpack. Here's How!
Dramatically Speed-Up your web development process with my step-by-step guide on Gulp & Webpack. Perfect for Beginners & Pros aiming to level up their dev skills!
Check out this video and transform yourself from a slow-paced coder to a pro developer with these essential efficiency hacks. Don't miss out on these game-changing techniques!
BONUS CONTENT:
Side Note, this video is part of a full web development tutorial where I develop a website from START To FINISH.
🎥 Check Out Full Development Video - • Develop A Modern Website For Beginner...
🎥 Check Out Full Design Video - • Design A Modern Website For Beginners...
What You'll Learn From This Video:
⚙️ When should you use Gulp or Webpack? Is Gulp ideal for every web development project? This video I provide a full breakdown on why or when you should or should not use Gulp or Webpack.
⚙️ How to setup local Gulp tasks that automatically do the tedious yet mundane tasks for you in the background without you stressing about it.
⚙️ How to easily compile SCSS or SasS files to CSS, including minified! There's many ways of doing this but in this video I'm showing you a quick and easy way to do it!
⚙️ How to add SCSS or SaSS or even CSS file to your Javascript file! Best practices I've learned over the years!
Timestamp:
00:00:00 Intro, Speed Up Dev Time With Gulp & Webpack
00:01:21 Create Package File- Package.json
00:03:38 Install Required NodeJs Libraries
00:08:50 Create & Configure Gulp File
00:10:42 Create Gulp Tasks
00:14:53 Create Watch Task In Gulp
00:17:32 Create & Configure Webpack Config FIle
00:21:10 Create Correct Folder Structure For Production
00:22:38 Create & Add SCSS File To Javascript File
00:23:54 Add Javascript File Into Html Head
00:25:14 Modify & Optimize The Docker File
00:26:38 Modify & Optimize Python & Flask App
00:27:23 Add A GitIgnore File To The Project
00:27:56 Wrap-Up & Test The Entire Environment
Command Lines For This Video:
🖥️ npm init | Create A Package.json file
🖥️ npm install --global -cli | Install Global Cli Elements
🖥️ npm install --save-dev gulp | Install Gulp
🖥️ npm install --save-dev gulp-webp | Install Gulp Image Converter To Webp
🖥️ npm install --save-dev sass | Install SCSS to CSS Converter
🖥️ npm install --save-dev wepack | Install Webpack Javascript Manager
🖥️ npm install --save-dev webpack-cli | Install Webpack Cli Element
🖥️ npm install --save-dev webpack-stream | Integrate Webpack With Gulp
🖥️ npm install --save-dev concurrently | Run Scripts At The Same Time
🖥️ npm install --save-dev style-loader | Loading Styles In Dev Mode
🖥️ npm install --save-dev browser-sync | Sync Browser With Dev Environment
Resources & More:
🔑 My GitHub Repository for Docker Setup: https://github.com/JaquesBotha/YogaFi...
🔑 Figma Design Link: https://www.figma.com/community/file/...
🔑 Download & Install Docker: https://www.docker.com/products/docke...
🔑 Download & Install Node: https://nodejs.org/en/download
🔑 Download Vs Code: https://code.visualstudio.com/download
Stay Connected:
👍 If you find this video helpful, please give it a thumbs up.
💬 I'd love to hear your thoughts or questions in the comments.
🔔 Don't forget to subscribe and hit the bell for more - / @jcbcb
Thank you for watching!
#webdevelopment #javascript #howto #nodejs #pythontutorial
Watch video Cut Your Dev Time In HALF With Gulp & Webpack. Here's How! online without registration, duration hours minute second in high quality. This video was added by user JCBCB 29 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 76 once and liked it 2 people.