GulpJS Intro
What is Gulp.js?
Gulp.js is used to automate your work flow by automatically handling time-consuming tasks like minification of code, handling browser prefix’s when needed and more. You use it for development purposes and have flexibility on how to use it for your web development projects.
You can use Gulp.js for your PHP projects, Node.js projects and others with it’s simple/minimal API. Gulp is easy to learn for JavaScript developers.
The best part of Gulp is it’s coded using JavaScript and Node.js meaning you stay within one coding language while developing which means you can code faster.
Getting Started with Gulp.js
Gulp.js uses Node.js, so you will need to make sure you have Node installed and updated on your system.
Here’s how to check for Node:
node --version
npm --version
npx --version
If you need to learn more about Node.js, checkout my Node.js Tutorial.
Install the Gulp Command Line Utility
npm install --global gulp-cli
This will globally install the gulp-cli. You can check the gulp version by using gulp --version
You would then make a folder in your web development project. Let’s call it gulp-project. In your terminal aka command line interface, you would navigate to that gulp-project folder and while still in the terminal you would type out npm init. This will guide you through the process of providing some information such as a project name, version, description etc.
Install Gulp Packages in your devDependencies
Use the snippet of code in your terminal to install gulp in your devDependencies section.
npm install --save-dev gulp
Package.json file
Once you complete the steps above, you will see there will be a file called package.json in the root of your gulp-project folder. This file provides the information for your project along with the packages used in your project.
You will also see a package-lock.json file which is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, so that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
Node Modules Folder
You will also notice the node_modules folder created that holds the packages used by your project. This folder is not meant to be committed with your finalized project or Git repository.
Create a gulpfile
Using your text editor, create a file named gulpfile.js in your project root.
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
Then in your terminal type out the command gulp and watch as it starts the default task and finishes it in a matter of seconds. Obviously nothing has been accomplished yet but we’ll be adding more in upcoming gulp.js tutorials.
Actual Code used for DevWP
DevWP is a WordPress Development Training Theme that uses Node.js and Gulp.js. You can copy the actual code for that project. Gulp.js for WordPress Theme Development.