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 Websi...
🎥 Check Out Full Design Video - • Design A Modern Websit...
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: github.com/JaquesBotha/YogaFi...
🔑 Figma Design Link: www.figma.com/community/file/...
🔑 Download & Install Docker: www.docker.com/products/docke...
🔑 Download & Install Node: nodejs.org/en/download
🔑 Download Vs Code: 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