1. Introduction

1.1 Setting Up a Pro Front-End Development Workflow

If you're a Front-End developer, then you might have asked yourself, how can I get my job done faster? Or, how can I work easier with preprocessors in jQuery and a whole bunch of other libraries? Well, to do that you need to create a ProWorkflow. And that's what I'm gonna teach you in this course. At the end of it, you'll be able to write a single command in the terminal and that will compile Sass, it will concatenate and minify JavaScript, it will do browser reloading, and much more. I'm Adi Purdila, welcome to Setting up a Pro Front-End Development Workflow.

1.2 Using the Workflow

Hello, and welcome to lesson number one. Now before we start working on our workflow and code everything, let me actually show you how it works so you get an idea of what the end result of this course will be. So you start here in the code editor. Now you need to have a few things installed, but we will just set those aside for now. So the first thing you've gotta do is open a terminal and simply type grunt. Now you need to navigate to your working folder first. I'm using Visual Studio code here, and when I open a terminal, it's doing that for me already. So once you navigate to your working folder, you type grunt. Now grunt, this command will do a few things. First of all, it's gonna open a server on local host 3000. This is configurable. But it's gonna open a server and then it's gonna watch for changes. So for example, I can open my HTML file, for example, and say, Hello! And that will automatically refresh the browser. I can even edit CSS. So for example, if I want this body color to be red, I can do that. The script will automatically inject the new CSS into my page. I can even create JavaScript. So for example, I have my app.js here. I can do a console log, for example, of Hello! And that will do a couple of things. It will check my JS file with jshint to see if there are any problems. Then it's gonna uglify it. And it will concatenate it with jQuery, which I have in this bower folder here. And the resulting script looks something like this. As you can see, I have my own code here, as well as jQuery. All right, so that will, of course, automatically reload my browser window here. And let's say that you're doing all of your changes, and you're done with them. You finally are ready to deliver all of these files to your clients. Well, normally, you would do this by hand. But because I'm using this awesome workflow, I am able to simply type grunt build. This will run the build command, or the build task, which will create a dist folder or distribution folder. And this folder contains my CSS minified and concatenated with normalized css. It contains all of my images, as you can see here, but they are optimized. If we take a look in the terminal here, grunt around the image main task and saved almost 600 kilobytes from all of my images. Then we have the js file, and this time it's mimified. And then finally the HTML files, all of them are copied. And instead of scripts.js, which was the case here, as you can see, scripts.js, the new version contains scripts.min.js. So there was a little bit of a change there. And that was a very quick demo of this workflow. I hope you're excited and you want to learn more. You want to learn how to create it. If you do, please join me in the next lesson where I'll give you a quick intro to Grunt because this entire workflow is based on Grunt. So learning a little bit about it and learning how to use it is essential for this. If you already know how to use Grunt, then you can skip the next lesson. But if you don't, then stick around. See you soon.