First, we must install gulp globally so that we can access gulp
from the command-line.
$ npm install -g gulp
Next, let's navigate to our project directory and we will install gulp locally and add it to our list of devDependencies. This allows our gulpfile, containing the build tasks, to access it.
$ npm install --save-dev gulp
Once gulp is installed, we need to create a file in your projects root directory and name it gulpfile.js
. A gulpfile is the set of instructions that gulp will use to automate the tasks that you have set for your project. This file is where we will be doing all of our work and setting up our development tasks.
Now that you have gulp installed and your gulpfile.js
has been created. All that is left to do is simply run the gulp command in your command-line application. Type in the following line, and press enter.
$ gulp
Now, you should see a few lines of feedback from gulp notifying you of what is happening. This could be the tasks you're running or it could be an error. If you have recieved an error, just jump back into your gulpfile and make sure that you didn't make a typo somewhere.
If you are using the .watch() method in your gulpfile, then gulp will continue to run until you explicitly tell it to stop. This may be confusing to beginners, especially if you are expecting to go back to your command-line and start firing off new commands. To stop gulp at any time, simply press CTRL+C
and it will stop the execution and allow you to begin writing new commands.
Plugins are a huge component to build systems and they allow you to perform additional actions in your tasks. This will introduce you to the process of finding and installing plugins so that you are comfortable when the time comes to add more functionality to your gulp tasks.
We can search for plugins using the official gulp plugin search tool or we can search by keyword using the npm package search.
Note: The gulpfriendly keyword is assigned to plugins that do not accept streams of file objects but still work nicely in the gulp ecosystem.
Installing a gulp plugin requires the same simple process we used when installing gulp. Once you have found the plugin that you would like to use, simply take note of its name and return to your command line to install it via npm. As a quick example, let's install gulp-concat. Open your command-line application and then run the following command:
$ npm install gulp-concat
It's that simple. You can pass any of the npm flags such as --save
and --save-dev
along with it if you would like to add that plugin to your package.json file as a dependency.
That's all there is to it! Let's start writing tasks.