Installing and Writing a Default Task with Gulp

Jacob Carter
InstructorJacob Carter

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

[00:00] The first thing that we do start using Gulp is install it with NPM install Gulp. That gives us access to the Gulp CLI so we can run the Gulp command.

[00:10] Once NPM install finishes, we can run the Gulp command and we'll see the error, "No Gulp file found."

[00:16] First thing we'll do is create the Gulp file. We just call that gulpfile.js. Now that we have that, we'll run the Gulp command again and this time we'll see the error, "No default task in our Gulp file." When you run Gulp, it's going to look for a task called default. That task doesn't exist, it's going to throw this error.

[00:37] We're going to create a default task. The first thing that we do is declare the Gulp variable. To do that, we just do var gulp = require('gulp').

[00:45] Now we'll create a Gulp task. That method takes two arguments. The first one is the name of the task, which we will just do default. The second argument is a function where we put all of the work that will be done within that task.

[00:58] Once we create that Gulp task, we can run Gulp again, and we will see starting default and then finish default. Nothing else is given to us, because right now, our task does not contain any logic.

[01:10] We'll go ahead and just throw in a console login there with the "Hello, world!" so that we can see how that's printed out in the console. Now that we type that in and we run Gulp again, we'll see that "Hello, world!" is printed out.

[01:20] There's many things that you can use Gulp to do. For example, you can link your JavaScript files with JSHint, you can precompile your LESS files. You can concatenate files, you can minify and uglify files. All of that logic will be contained within the different Gulp tasks that you create.