One of the most important skills you should have is learning how to set up and work with different environments. This video talks about the tooling environments you should know, what makes the environments special, and why you should learn them.
- [Instructor] One of the most important skills you should have as a web developer is learning how to set up and work within different environments. This week I'm going to talk about the tooling environments that you should know, what makes them special and why you should learn them. So, what do you actually use tooling for? Tooling gives you a way to automate common development tasks like minifying code, testing and running local servers to preview your work while you code. Now, tooling is something that is very customized depending on your environment and the place where you work.
Different people will use different tooling software and teams of developers will often have their own preferred setups. You'll even find the same teams using different setups depending on the type of project they're working on. Now, having said that, the major tooling platforms that you can use on the web are Grunt, Gulp plus WebPack. Now, yes, there are some slight variations and libraries that you can look at but these aren't the most popular, they're probably the ones that you need to have some experience with to be marketable.
In addition to that, another option might be to use the scripting capability of NPM, the Node Package Manager that comes when you install Node.js. Now, all of these workflows, Grunt, Gulp and WebPack are based on Node.js, so some people just write their own tools on top of Node to manage their projects. Now, these tools are often known as CLIs or command line interfaces and as a matter of fact, Grunt, Gulp and WebPack are really just CLIs built on top of Node.js.
Now, some people write their own scripts, or use a combination of some of these tools to take care of managing tasks. So, let's take a look at what these different options are. Now, first of course, is the grandfather of all the workflow tools called GruntJS. Again, it's a CLI or command line tool for running tasks. A task is simply something that you want to do to your code, so for example, minimizing or even testing your code is considered to be a task. To get this to work, you create a configuration file and this is what one of them looks like.
This file uses JSON to configure your automation. Now, using this file you define a series of tasks and you can create tasks to do things like process SASS, minimize your HTML and run a live server during development, so you can see right here where I have the SASS task we're going to use a plugin that will let us define the way that we want SASS to be converted and specify where we want the original file to come from and where we want the destination of the process to end up in.
You can see that there are some other tasks here like running a live server. So, for example, we can specify the name of the port that we want to use when we're running a live server here. Now, we have a common task called Watch that looks for changes in different files and then based upon the changes then it runs the tasks over again. Now, down here we register a default task that is going to run when we use the Grunt command.
So, with Gulp task you'll notice that you'll always have a task that defines the origin of the task and then you usually have a task that defines the destination of the task, so they always start and end in the same way and then we usually pass along some additional configuration like whether or not we want these different styles, just like with Grunt. Now, the other main difference is that Gulp uses the concept of streams whereas Grunt's execution is more sequential, Gulp isolates the running of each task separately and handles them in memory which means it can also run tasks simultaneously.
Now, WebPack was designed with modules instead of tasks in mind. A case in point, one of the killer features of WebPack is the ability to process a change in a module without having to process the rest of the modules, so whereas a task runner like Gulp or Grunt thinks of a project as a series of tasks, WebPack thinks of them as a series of small modules that it can update independently. That makes it super fast and perfect for modern libraries. In addition to that, it can perform other advanced functions like tree shaking which allows you to remove parts of libraries your application is not using.
Therefore its modular focus and advanced feature makes it a popular library especially when it comes with modern projects. Now, because of how it's designed and what it does, WebPack can be a lot more complicated to set up and understand. If you take a look at this WebPack configuration file, you can see that it uses a series of loaders and plugins to manage how it does things. So, for example, although it's running a live server for you, you don't really have to set that up, it's already done for you and for the most part WebPack makes assumptions about how you want to run your environment.
Now, clearly this is the most complicated of the task runners but it's also the most powerful and you'll need to learn it or at least understand how to customize it. Here's some pages where you can get a lot more information about working with these tools as well as some of our related courses. Now, if you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any other social media network like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.