The Perfect Front-End Development Set-Up
TL;DR;: I am using Grunt and Gulp for my front-end development set-up (with the little help of Yeoman).
Recently discovered this little post on DN, which covers many ways of how the front-end development setup could look like. So, I commented on this post to leave my opinion of the perfect front-end development setup. This blog post should extend my opinion stated in the comment.
Why not just use MAMP as the author stated? #
MAMP is a solution stack composed of free and open-source and proprietary commercial software used together to run dynamic web sites on Apple Macintosh computers.
Sure, MAMP is a nice tool and I also started using this in my early career of web development, but it’s a full tool of PHP, MySQL and Apache. You can just have one web server started simultaneously, if you want more, you need to purchase MAMP PRO for 39 EUR (ca. 48$). So, there are many things, that my web development set-up can do better about MAMP.
What tool am I using for this? #
I am using Grunt or Gulp with the help of Yeoman to achieve the things MAMP can also do (plus much more). Both, Grunt and Gulp are nice tools to work through tasks with JavaScript. To see a comparison guide to those two see here. I don’t want to make the installation a subject of this blogpost, but the advantages and why this is my favorite set-up for front-end development.
Advantages #
- Yeoman offers a nice way to easily scaffold a project structure and the first files
- Some Yeoman generators also offers sub-generators for creating specific files with specific content
- Yeoman projects mostly contain a Grunt- or Gulpfile to run tasks
- Grunt and Gulp offer a broad spectrum of plugins (List of Grunt and Gulp).
- You need to start the console once and also have logs about everything that Gulp/Grunt does.
- Advanced: Change the workflow of Gulp/Grunt to the way you want to work with it
Deployment #
Post-receive hooks are the go to solution for deploying my static pages to a server. I don’t like uploading pages via (S)FTP. If you are working with the tools I entrusted you in this post, then it’s the best method to with with the post-recieve hooks of Git. This is a nice blog post about it.
Hosting #
For hosting I am a loyal customer of DigitalOcean (Sign up through this link and receive 10$ account credit). I always enjoy their one-click solutions for setting up a server if it should be fast. Otherwise I prefer setting up the server the “old-fashioned” way.
Suggestions #
If this is not the perfect example of a front-end development set-up for you, be sure to leave me a note in my mail box and I am getting back to you as soon as possible.
You can also discuss this on Designer News.