Let's Build A Consultancy Website - Part 14 - Setting Up The Development Environment

Опубликовано: 11 Октябрь 2024
на канале: webcrunch
721
15

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

============

When I start most projects I like to utilize some build tools to make the code more optimized as well as my workflow.

Part 14 walks you through the folder structure of our new Kirby installation as well as the process of setting up a build tools workflow. I'll create a Gulpfile and within it, I use a variety of tasks that run in the background while I work. These tasks include:

Compiling Sass into CSS
Compiling, Minifying, and Uglifying JavaScript files into one main file
Optimizing images
Serving the site to a localhost via BrowserSync - This results in automatic browser refreshes as the code is changed.


Installing Gulp and some extended plugins is a must to get our development environment up to spec. I like to use Yarn but you can also use npm. It really jut boils down to preference but I have found Yarn to be a little faster when it comes to downloading new plugins.

My package list contains the following plugins:

gulp
gulp-sass
gulp-autoprefixer
gulp-newer
gulp-imagemin
browser-sync
gulp-concat
gulp-uglify
gulp-sourcemaps
gulp-watch



Looking for this project's final source code?
Download it here: https://github.com/justalever/endlyss...

============

💻 Read the full blog post here:
https://web-crunch.com/lets-build-con...


💻 Check out the blog:
https://web-crunch.com

💡 👫 Check out my agency:
https://coupleofcreatives.com

🚀 Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter:   / webcrunchblog  
Twitter(Personal Account):   / justalever  
Facebook:   / webcrunchblog  
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium:   / the-web-crunch  

📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video:
Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH
Linco Lighting Set - http://amzn.to/2mF8Shs
Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk
Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting