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

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/endlyssdesigns

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

💻 Read the full blog post here: https://web-crunch.com/lets-build-consultancy-website-part-14/

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

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

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

📘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 ... https://www.youtube.com/watch?v=sqpxBCd2ikI