The landscape of front-end development is rich with a plethora of tools, including Git, Stylus, Broccoli, Node, Angular, and more.In this guide, we delve into Gulp, a highly popular tool within this ecosystem.Gulp is a versatile build-automation tool designed to streamline your development process.Think of Gulp as a comprehensive toolkit on wheels, enhancing our ability to utilize various tools more efficiently.Instead of managing separate applications for each project, Gulp offers an automated build solution.
Gulp features a command-line interface (CLI).For those unfamiliar with CLIs, I recommend reviewing my tutorial, “Getting Started with Command-Line Interfaces,” prior to proceeding with this Gulp guide.Understanding CLIs is essential for comprehending and utilizing the concepts presented in this tutorial.I also suggest downloading the sample source files provided on GitHub to facilitate testing the code in this guide.For users with Git installed, the following command can be used:Gulp harnesses the power of Node.js, a JavaScript application platform, to provide an environment for running applications.Node.js, renowned for its robustness as an app development tool, also comes equipped with a package manager known as npm.To leverage npm and Gulp, Node must first be installed on your system.Once Node is installed, you can utilize npm from the command line to install Gulp and any additional packages required.Enter the following command in your CLI:In case the above command fails, prepend it with to grant administrator access to the file system.This enables superuser privileges, which are necessary for executing certain commands.In the event of command execution issues, prepend to the command to ensure proper system access.When prompted for a password, you may not see any characters being inputted. Rest assured, the characters are there for security reasons, as input is masked to prevent shoulder surfing.Before proceeding, let’s dissect the command components:
– The npm command to operate within the npm scope.
– The action to perform within the npm scope.
– The name of the package to install.
– A command option/flag representing global. This option indicates that Gulp should be accessible system-wide.
Upon successful installation without errors, navigate to the directory where the sample files were downloaded.This directory will serve as our project directory for this tutorial.With Gulp installed on our system, we can now automate our projects.Execute the following command:Upon entering the command, you will be prompted to create a package.json file.Complete the fields as accurately as possible, and a new package.json file will be generated in your project directory.What is package.json?The package.json file contains details about your project. As you add more packages, it will also list them, informing the system of the required files.In scenarios where you need to transfer your project to another computer or collaborate with another developer, the package.json file acts as a manifest.The core of any Gulp-driven project is the gulpfile.js file, often referred to simply as the gulpfile. These terms are synonymous within this tutorial.The gulpfile.js file allows us to define tasks and automate them within our project. The content of this file varies depending on the project.Let’s create a gulpfile for our project.Even though Gulp is installed on our system, it must also be installed within our project directory.Run the following command:Note: You may need to prepend again at the start of the command to gain system access if you encounter difficulties executing it.Next, let’s install a few Gulp plugins to compile Sass files into CSS and then merge them into a single CSS file.In the command line, type the following:After executing the command, a node_modules directory will be created within your project directory, containing all necessary files to run the plugins.As we install Gulp plugins and Node packages, they will be placed in the node_modules directory.Within the gulpfile.js file, we can now configure a Gulp task.Open the gulpfile.js file in your preferred code editor and let’s begin coding.Node.js’s function allows us to specify the plugins needed to run our Gulp tasks, which are referred to as dependencies.We rely on these dependencies to make our Gulp tasks functional.Additionally, to avoid calling the function each time we reference a plugin, we store the return value of the function in JavaScript objects.Thus, when we use the function in our code, we’re referring to the gulp-sass plugin. When we use , we’re referencing the gulp-concat plugin.Once we’ve informed Gulp of our dependencies, we can set up a task.We’ll create a Gulp task named .In the code block above, we’ve established a task called .This is our reference to the task, which we can use in other Gulp tasks or call from the command line.Within the task wrapper, we write the script for our task. The general structure of the Gulp task wrapper is:The statement indicates that the task will return a value upon execution.In this case, the value is our processed code.We use Gulp’s method to retrieve and specify the input files to be processed by the task, which are the .scss files. By placing an asterisk (*) in place of a specific filename, we’re essentially saying, Find any file with a .scss extension inside the styles directory.Now, the beauty of Gulp lies in chaining processes using Node.js’s method. The method enables the transfer of code from one process to another.When one plugin processes our .scss files, the output is passed to the next plugin.This is what the task accomplishes:
Get and specify the files to process. We use the method to locate and point to the .scss files within the styles directory.
Compile Sass files to CSS. Remember that we instantiated the function earlier, which refers to the gulp-sass plugin.
Combine all CSS style rules into a single stylesheet. The gulp-concat plugin generates a stylesheet named style.css containing all our CSS.
Write the stylesheet in the styles directory. The style.css file is placed in the styles directory using the method.
Now comes the moment of truth. Running the task.To execute the task, ensure that your working directory is where your gulpfile is located. The following command will not work otherwise.As previously mentioned, our Gulp task is named .To run the task, enter the following command:Our task will execute and should compile our .scss files into a file called style.css placed within the styles directory. Well done!However, there is a minor inconvenience. It’s quite tedious to switch back and forth between code and the command line to compile Sass every time we update our code.Gulp includes a built-in method called , which allows us to instruct Gulp to monitor changes in our source files. This way, whenever we update any of our .scss files, the task will automatically execute and recompile the styles.css file.Let’s create another Gulp task to monitor our source files.We’ll name this Gulp task . Similar to the task, we’ll create the task using the task wrapper.This is what the task will do:
Use Gulp’s method to monitor any changes to our .scss files.
When Gulp detects a change, our task will be executed.
Now, instead of running the task every time we want to compile our Sass, we can run the task just once when working on a project. Gulp will monitor our Sass files for any changes. When it detects an update to a Sass file, it will automatically run the task. This will occur whenever we save a .scss file.Gulp boasts a vast community, with over 1,400 plugins currently available. These plugins can enhance our build process.Let’s create another Gulp task to analyze our JavaScript files for common issues.For this task, we’ll rely on JSHint.JSHint is a JavaScript code-quality analysis tool that meticulously examines our JavaScript files and flags any problematic areas in the command line.To utilize JSHint, we can install and require a Gulp plugin called gulp-jshint.First, let’s install the gulp-jshint plugin to our project.Next, let’s update our dependencies statement in the gulpfile:At this point, we have , , and as our dependencies.Let’s set up a task called . This Gulp task will run gulp-jshint on .js files within the js directory.This task does not need to output any file.Instead, if JSHint detects any errors, we’ll be notified through the command line.To run the task, we can execute the following command:We can also incorporate the task into our task so that we don’t have to manually call it every time we make changes to our JavaScript files.Now, let’s enhance our build process by adding more functionalities to our existing tasks.Let’s install an additional plugin that will provide a more readable output.Run the following command to install the JSHint-stylish library into our project.Now, we can modify our task to use jshint-stylish as our reporter.Let’s run the task:If JSHint identifies errors and code-quality issues, it will display them in the command line.$ gulp jshint
[10:29:57] Starting ‘jshint’…
jsmain.js
line 2 col 7 Use ‘===’ to compare
