7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Setup

First, let’s get our development environment set up ready for the coding examples.

Related Links

1.2 Setup

Hi folks. Let's get Gulp installed and get some basic configuration out of the way. Gulp requires node.js to run and I'm going to assume that you've got that installed and running already. If you don't, head on over to nodejs.org and follow the installation instructions for your platform. So first of all let's set up a development area somewhere convenient. I'm going to put mine in my user directory and call it gulp_project. Inside here we want to create a couple more folders. We want one called SRC for the files that make up our app, and we can create another called gulp_tasks. Next we can create a package.json file using the npm init command. So this will walk us through a series of prompts and we just need to answer those and at the end of the process we will have a package.json file. We can mostly accept defaults or just leave the prompts blank for this example. So let's just walk through this quickly. We'll go for the suggested name of gulp_project and version 1.0.0 is fine. We can write a basic description. Let's just say that it's an example Gulp project. And we'll just go with the default entry point that's fine. We don't need a test command at this point we can leave the git repository blank as well and the key words. For the author feel free to put your own name I'm gonna put mine with the license let's go with MIT. And once we've answered all of the prompts, it should give us a preview of what the package.json file will look like. That's fine. So let's just hit Enter one more time. And we should now have our package.json file. Now, to be able to run the Gulp command globally on our system, we need to install the Gulp CLI. So we use the -Gflag to make sure that that gets installed globally, so that's not specific to the project folder that we're in. It's specific to the whole system that this is running on. And we just wait for that to download, shouldn't take more than a couple of moments. And once that's installed, we can then install Gulp. And we will install this locally to the project. And it's a devDependency. So we need to specify the save dev flag. So the reason why we install Gulp and the Gulp CLI separately is so that we can have different versions of Gulp in different projects on the same computer. So this should give us the current release of Gulp, which right now is 3.9.1. In terms of Gulp setup, all we need to do now is create a file at the root of our project called gulpfile.js. This file stores all of the Gulp related configuration and is required for Gulp to work. And we can create that file using the touch command. So, now that we're all set up, we can add a test task just to make sure that everything is installed and configured correctly. So, we're going to be writing some code now. Throughout the rest of this course I'm going to be using Visual Studio 2015, the community edition which is completely free. But don't feel that you have to use that, it's entirely up to you. So we can add a task in the gulpfile. And the first thing that we'll need to do is require gulp as a module And once we have a reference to the go module, we can add a task. So let's just add a default task. So we use the task method of the gulp module to add a new gulp task. This method takes two arguments. The first is the name of the task. We've just called this one default. And second is a call back function. And for the call back function we're using the AS6 fat arrows style of function just to keep everything nice and. And all we're doing in this task is logging to the console. So as you'll see throughout the course when we want to run a gulp task, we'll enter a gulp followed by the time ask a name on the command line if we create a default task however. Just like we've done here, that task will run when we just type gulp on the command line. So let's just try running our default task now. And everything is set up and configured correctly because we see some output on the console here. We can see that it's using the gulp file we've just edited. We see a message to say that it's starting the default task. We then see our gulp running console.log message. And following that, we get the message that it has finished running the default task. Okay, great. So as we install additional gulp tasks and configure them, we could add the configuration for the task to the gulpfile that we've just created in the same way that we've just added the default to task. However if we want to use more than just a handful of tasks, the size of this file will quickly grow and it will become a pain to maintain and edit. A better way is to have all of our gulp task configurations in separate files and that's what the gulp_ tasks folder that we created earlier is full. So one thing that we want to do straight away is to install a node module that lets us load all of the individual configuration files for our gulp asks. Gulp doesn't do this by default but it only takes a moment to set up so we might as well do that now. So we need to install a new module for this and that module is the gulp-load-tasks module and we set that as a devDependency just like we did before. So now that we've got that module installed we need to tell it to load all of the gulp tasks and we do that in the gulpfile. So we require the module using the node JS require method. Just like how we required in Gulp just a moment ago. But this time we invoke the module straight away. And we pass it a string and that string is the path to the folder that contains all of the gulp tasks which in this case is go under gulp_tasks. So now let's add a file to this gulp_tasks folder and just check that the load tasks module is going to load it for us. And we'll call this one, gulp-test. So now, all of the files inside the gulp_tasks directory will be loaded using nodes require as if they were node modules. So we need to export a value from this file. And we can do that using module.exports, and all we're gonna do is log to the console again. So let's just grab the previous statement from the gulpfile, and we'll copy that in here, and we'll just make a tiny modification. So we don't need to use gulp_task this time, we just need to change that to module.exports. Okay, so let's go back to the command line now and we should be able to run this new task called gulp-test by using the gulp command followed by the full name of the task. And we see the same result as before. So one thing that it's important to note at this stage is that, so the way that the gulp_tasks module works is that it creates the gulp tasks for us. And it uses the file names of all of the files when it's creating the tasks. So, each file inside the gulp_tasks folder will become a named task and it will be added to gulp as a task exactly as if we'd have used gulp.task inside the gulp file. So, just remember that as we go through the course. So, we had a default task when we were using the gulpfile. Let's just set up the photo ask again. So, we need to create a new file in the gulp_tasks folder and we can just call that the default. And like I say, that will become the name of the task. So we still need to set module.exports, and here we need to do that for all of our task modules. And as part of the default task, let's just run the gulp-test task that we just created. So we don't need to use a function this time, we can just return a nested array. And the gulp_tasks module will take the inner array and it will add that as the task. So now we should be able to run our gulp_tasks by writing gulp on the command line like we did originally. So in this lesson we saw how to install and setup Gulp. And how to add a default task. We then saw how to use the gulp-load-tasks module to set up individual Gulp tasks without bloating the Gulp file. In the next lesson we'll move on to the static analysis section of the course, beginning with installing and configuring the popular JSHint. Thanks for watching.

Back to the top