Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:1.1 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: Setting Up a Pro Front-End Development Workflow

Setting Up a Pro Front-End Development Workflow

00:40
  • Overview
  • Transcript

Owing to the plethora of tools available nowadays, front-end development has a lower barrier to entry for a wide range of people. We can use libraries that enhance the code we write whilst also simplifying it. We can compile and minify Sass or LESS with a single line of code. We can use tools like Grunt to execute as many tasks as we want just by typing a few keywords into the terminal.

Needless to say, to achieve this you must have a basic understanding of how these tools all work, but if that’s not yet the case, you’ve come to the right place.

In this short course I’m going to show you how to use Grunt, Bower and several other tools to create a pro front-end development workflow that will save you loads of time when coding.

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.