For a high-quality, in-depth introduction to Node. Use the code SITEPOINT to get 25% off! This article was sponsored by. It was updated to reflect the current state of Gulp and Gulp plugins. Thank you for supporting the sponsors who make SitePoint possible! Developers spend precious little time coding. You may start with good intentions, but the most infallible developer will forget to compress an image or two. If so, you need a task runner or build process. That Sounds Scarily Complicated! Creating a build process will take time. An hour or two is more than enough for the initial setup. Some of the tools and concepts may be new to you, but take a deep breath and concentrate on one thing at a time. Task Runners: the Options Build tools such as have been available for decades, but web-specific task runners are a relatively new phenomenon. The first to achieve critical mass was — a Node. Files were only written at the end of the task. All have their pros and cons, but. What About Gulp 4? This tutorial describes how to use Gulp 3 — the most recent release version at the time of writing. Gulp 4 has been in development for some time but remains a beta product. Step 1: Install Node. There are various options for installing from binaries, package managers and docker images, and full instructions are available. Note for Windows users: Node. One option for Windows 10 users is the new , which solves many issues. Once installed, open a command prompt and enter: node -v This reveals the version number. Examine its version number: npm -v Note for Linux users: Node. However, most users will not have permission to write to the global directories unless npm commands are prefixed with sudo. There are a number of and tools such as , but I often change the default directory. Presume you have a new or pre-existing project in the folder project1. Enter a value or hit Return to accept defaults. Note for Git users: Node. You should add this to your. When deploying the project to another PC, you can run npm install to restore them. However, it may be preferable to build assets on the live server if you want to change the way they are created. For example, HTML, CSS and JavaScript files are minified on production but not development environments. In that case, use the --save option for Gulp and all plugins, i. It will be installed when you enter npm install and can be run wherever the project is deployed. You can remove the build folder from your repository since the files can be created on any platform when required. Step 4: Create a Gulp Configuration File Create a new gulpfile. ES6 note: ES5-compatible JavaScript code is provided in this tutorial. This will work for all versions of Gulp and Node. Any number of plugin calls are set with pipe between the. Two plugins can help us: and. Install them from the command-line: npm install gulp-newer gulp-imagemin --save-dev We can now reference both modules the top of gulpfile. Source files that are newer than corresponding destination files are passed through. Everything else is removed. Finished 'imagemin' in 5. HTML Task We can now create a similar task which copies files from the source HTML folder. We can safely minify our HTML code to remove unnecessary whitespace and attributes using the plugin: npm install gulp-htmlclean --save-dev This is then referenced at the top of gulpfile. Any number of dependent tasks can be listed in this array and all will complete before the task function runs. Therefore, the HTML remains uncompressed during development which may be useful for debugging. Both the html and images tasks will run. JavaScript Task Too easy for you? This analyses comments at the top of each script to ensure correct ordering. This step will only occur when running in production mode. Install the plugins: npm install gulp-deporder gulp-concat gulp-strip-debug gulp-uglify --save-dev Reference them at the top of gulpfile. Our task will also utilize the fabulous via the plugin. This allows us to use properties such as background: resolve 'image. First, install all the modules: npm install gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano --save-dev Then reference them at the top of gulpfile. Note the images task is set as a dependency because the postcss-assets plugin can reference images during the build process. We can run them all in one command by adding a new run task to gulpfile. Is this still too much hard work? Gulp offers another method — gulp. The method is passed a folder and a list of tasks to execute when a change occurs. Your images, HTML, CSS and JavaScript will all be processed, then Gulp will remain active watching for updates and re-running tasks as necessary. One useful method in gulp-util is. Invest a little time and Gulp could save many hours of development frustration. You can test your own results using or a service such as , which provides a range of sophisticated application performance monitoring tools. Gulp can revolutionize your workflow. I hope you found this tutorial useful and consider Gulp for your production process. This article was peer reviewed by and. Craig is a freelance UK web consultant who built his first page for IE2. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him.
