 Modern web development involves quite a few tasks, running servers, optimizing images, and processing source code. These are the kinds of manual tasks that you can automate with gulp, grunt, make, or other build tools. We're going to use gulp for some of the more complex labs in this class. So here's a quick introduction to how it works. Gulp reads a file called the gulp file to tell it what to do. This is a sample gulp file.js file. It's written in JavaScript with a couple of node.js extensions for loading other files. The require statements at the top load the core gulp commands and the gulp interface to uglyphi. These are known as gulp plugins. Uglyphi is a program to compress and minify JavaScript. Gulp files are divided into a series of tasks. A task might run on a server, minify some code, or even delete files. Each task should be one self-contained action. We define a task named uglyphi-js and write some JavaScript to implement it. The gulp.source task reads all the JS files from source slash JS. We then pass all of these files into the uglyphi tool using the pipe command. The output of each command is ready to pipe into the next, so use the gulp.desk command to write the result into new files under dist slash JS. Formally, gulp is a cross-platform streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files of streams and pipes, then streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files. To get an idea of what gulp can do, check the list of gulp recipes on GitHub. Gulp is a node package, and the plugins that it uses are also node packages. So you need to install node.js first. This also installs a node package manager. You should also enable gulp from the command line. To do this, install the gulp CLI package. You can then go into your project or create a new one and have NPM install the gulp plugins you need into your project. Write your gulp file.js, and you can begin using gulp from the command line. Here's an example of creating a project and installing gulp plugins. The first line creates a new NPM project. This generates a package.json file that lists your project plugins. The following commands install various example plugins, including gulp itself. The save dev flag updates the package.json file with the corresponding plugin. The plugins are installed in a node underscore modules directory. With this method, you can easily reinstall all plugins in their dependencies later by using the package.json file rather than reinstalling each plugin individually. Note that plugins A, B, and C are imaginary. We're just using those names to show how plugins work. Once the plugins are installed, they need to be loaded into the gulp file using require. Now you're ready to define tasks. This task is named taskABC. It takes files from the sum source files path and pipes them through functions from each of the plugins, which modify the files. The processed files are passed to gulp.desk, which writes the files to the sum destination path. The task we just defined can be run from the command line by typing gulp, space, and the task name. In this case, it's gulp space task-abc. Here are some more resources for learning gulp. As usual, use the links in the slides or your textbook to learn more. There's no special gulp lab at this time. You'll get plenty of practice in the lessons after this one. Once you are comfortable with gulp, there are two more things you may want to try. The first is to create a default task. Default tasks run when the gulp command line command is run by itself. This code assigns task1, task2, and task3 as prerequisites. When you run the default task, the prerequisites will run first. You can do this for any task, not just the default. You can run this task by typing gulp, space, default, or just playing gulp on the command line. Default is the one special task that doesn't need to be called by name. The other trick is to make gulp run tasks whenever your files change, in other words, when you hit save. Gulp.watch monitors files for changes. When the files change, watch will run the associated tasks. This code watches CSS files in the styles directory and all JS files in the JS directory. If any CSS files change, the process CSS task runs. If any JavaScript files change, the process JS task runs. This watch task is started by running gulp watch from the command line, though this task can be named anything.