{"id":207144,"date":"2015-09-01T06:00:19","date_gmt":"2015-09-01T13:00:19","guid":{"rendered":"http:\/\/css-tricks.com\/?p=207144"},"modified":"2019-11-30T14:47:27","modified_gmt":"2019-11-30T21:47:27","slug":"gulp-for-beginners","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/gulp-for-beginners\/","title":{"rendered":"Gulp for Beginners"},"content":{"rendered":"<p><a href=\"http:\/\/gulpjs.com\/\" rel=\"noopener\">Gulp<\/a> is a tool that helps you out with several tasks when it comes to web development. It&#8217;s often used to do front end tasks like: <\/p>\n<ul>\n<li>Spinning up a web server<\/li>\n<li>Reloading the browser automatically whenever a file is saved<\/li>\n<li>Using preprocessors like Sass or LESS<\/li>\n<li>Optimizing assets like CSS, JavaScript, and images<\/li>\n<\/ul>\n<p class=\"explanation\"><strong>Important Note!<\/strong> This article was written for Gulp 3.x, but now Gulp 4.x is out and recommended. Like any major version change, APIs have breaking changes. If you install Gulp 4 and try to do some of the things in this article, they won&#8217;t work. We&#8217;ll make some notes of that sprinkled through here to remind you. <a href=\"https:\/\/github.com\/cferdinandi\/gulp-boilerplate\" rel=\"noopener\">This looks like a pretty good Gulp 4 starter.<\/a><\/p>\n<p>This is not a comprehensive list of things Gulp can do. If you&#8217;re crazy enough, you can even build a static site generator with Gulp (I&#8217;ve done it!). So yes, Gulp is extremely powerful, but you&#8217;ll have to learn how to <em>use<\/em> Gulp if you want to create your own customized build processes. <\/p>\n<p>So that&#8217;s what this article is for. It helps you get so good with the basics of Gulp that you can begin exploring everything else for yourself. <\/p>\n<p><!--more--><\/p>\n<p>Before we dive into working with Gulp, let&#8217;s talk about <em>why<\/em> you may want to use Gulp as opposed to other similar tools. <\/p>\n<h3>Why Gulp?<\/h3>\n<p>Tools like Gulp are often referred to as &#8220;build tools&#8221; because they are tools for running the tasks for building a website. The two most popular build tools out there right now are Gulp and <a href=\"http:\/\/gruntjs.com\/\" rel=\"noopener\">Grunt<\/a>. (Chris has a <a href=\"https:\/\/24ways.org\/2013\/grunt-is-not-weird-and-hard\/\" rel=\"noopener\">post on getting started with Grunt here<\/a>). But there are others of course. <a href=\"https:\/\/github.com\/broccolijs\/broccoli\" rel=\"noopener\">Broccoli<\/a> focuses on asset compilation, one of the most common build tool tasks.<\/p>\n<p>There are already multiple articles covering the difference between Grunt and Gulp and why you might use one over another. You can check out <a href=\"http:\/\/www.zell-weekeat.com\/choosing-a-build-tool\/\" rel=\"noopener\">this article<\/a>, <a href=\"http:\/\/ponyfoo.com\/articles\/choose-grunt-gulp-or-npm\" rel=\"noopener\">this one<\/a>, or <a href=\"http:\/\/sixrevisions.com\/web-development\/grunt-vs-gulp\/\" rel=\"noopener\">this<\/a> if you&#8217;re interested in finding out more. <a href=\"http:\/\/brunch.io\/\" rel=\"noopener\">Brunch<\/a> is similar in its focus on assets, and it bundles in some of the most common other tasks like a server and file watcher.<\/p>\n<p>The main difference is how you configure a workflow with them. Gulp configurations tend to be much shorter and simpler when compared with Grunt. Gulp also tends to run faster. <\/p>\n<p>Let&#8217;s now move on and find out how to setup a workflow with Gulp. <\/p>\n<h3>What we&#8217;re setting up<\/h3>\n<p>By the end of this article, you&#8217;ll have a workflow that does the tasks we outlined at the beginning of this article:<\/p>\n<ul>\n<li>Spins up a web server<\/li>\n<li>Compiles Sass to CSS<\/li>\n<li>Refreshes the browser automatically whenever you save a file<\/li>\n<li>Optimizes all assets (CSS, JS, fonts, and images) for production<\/li>\n<\/ul>\n<p>You&#8217;ll also learn how to <em>chain together<\/em> different tasks into simple commands that are easy to understand and execute.<\/p>\n<p>Let&#8217;s begin by installing Gulp onto your computer.<\/p>\n<h3>Installing Gulp<\/h3>\n<p>You need to have Node.js (Node) installed onto your computer before you can install Gulp. <\/p>\n<p>If you do not have Node installed already, you can get it by <a href=\"https:\/\/nodejs.org\" rel=\"noopener\">downloading the package installer from Node&#8217;s website<\/a>. <\/p>\n<p>When you&#8217;re done with installing Node, you can install Gulp by using the following command in the command line: <\/p>\n<pre rel=\"Bash\"><code>$ sudo npm install gulp -g<\/code><\/pre>\n<p class=\"explanation\">Note: Only Mac users need the sudo keyword. (<a href=\"https:\/\/css-tricks.com\/gulp-for-beginners\/#comment-1596710\">See the first comment<\/a> by Pawel Grzybek if you don&#8217;t want to use sudo). And remember the &#8220;$&#8221; in the code above just symbolizes the command prompt. That&#8217;s not actually part of the command you run.<\/p>\n<p>The <code>npm install<\/code> command we&#8217;ve used here is a command that uses Node Package Manager (npm) to install Gulp onto your computer. <\/p>\n<p>The <code>-g<\/code> flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the <code>gulp<\/code> command anywhere on your system. <\/p>\n<p>Mac users need the extra <code>sudo<\/code> keyword in the command because they need administrator rights to install Gulp globally. <\/p>\n<p>Now that you have Gulp installed, let&#8217;s make a project that uses Gulp. <\/p>\n<h3>Creating a Gulp Project<\/h3>\n<p>First, we&#8217;ll create a folder called <code>project<\/code> to server as our project root as we move through this tutorial. Run the <code>npm init<\/code> command from inside that directory:<\/p>\n<pre rel=\"Bash\"><code># ... from within our project folder\r\n$ npm init<\/code><\/pre>\n<p>The <code>npm init<\/code> command creates a <code>package.json<\/code> file for your project which stores information about the project, like the <em>dependencies<\/em> used in the project (Gulp is an example of a dependency).<\/p>\n<p><code>npm init<\/code> will prompt you: <\/p>\n<figure id='post-207145' class='align-none media-207145'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/npm-init.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Once the <code>package.json<\/code> file is created, we can install Gulp into the project by using the following command: <\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp --save-dev<\/code><\/pre>\n<p>This time, we&#8217;re installing Gulp into <code>project<\/code> instead of installing it globally, which is why there are some differences in the command. <\/p>\n<p>You&#8217;ll see that the <code>sudo<\/code> keyword isn&#8217;t required because we&#8217;re not installing Gulp globally, so <code>-g<\/code> is also not necessary. We&#8217;ve added <code>--save-dev<\/code>, which tells the computer to add <code>gulp<\/code> as a dev dependency in <code>package.json<\/code>.<\/p>\n<figure id='post-207147' class='align-none media-207147'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/package-json.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>If you check the project folder when the command has finished executing, you should see that Gulp has created a <code>node_modules<\/code> folder. You should also see a <code>gulp<\/code> folder within <code>node_modules<\/code>. <\/p>\n<figure id='post-207148' class='align-none media-207148'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/node-modules.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>We&#8217;re almost ready to start working with Gulp. Before we do so, we have to be clear on how we&#8217;re going to use Gulp for the project, and part of that is deciding on a directory structure.<\/p>\n<h3>Determining Folder Structure<\/h3>\n<p>Gulp is flexible enough to work with any folder structure. You&#8217;ll just have to understand the inner workings before tweaking it for your project. <\/p>\n<p>For this article, we will use the structure of a generic webapp: <\/p>\n<pre><code>  |- app\/\r\n      |- css\/\r\n      |- fonts\/\r\n      |- images\/ \r\n      |- index.html\r\n      |- js\/ \r\n      |- scss\/\r\n  |- dist\/\r\n  |- gulpfile.js\r\n  |- node_modules\/\r\n  |- package.json<\/code><\/pre>\n<p>In this structure, we&#8217;ll use the <code>app<\/code> folder for development purposes, while the <code>dist<\/code> (as in &#8220;distribution&#8221;) folder is used to contain optimized files for the production site. <\/p>\n<p>Since <code>app<\/code> is used for development purposes, all our code will be placed in <code>app<\/code>. <\/p>\n<p>We&#8217;ll have to keep this folder structure in mind when we work on our Gulp configurations. Now, let&#8217;s begin by creating your first Gulp task in <code>gulpfile.js<\/code>, which stores all Gulp configurations. <\/p>\n<h3>Writing Your First Gulp Task<\/h3>\n<p>The first step to using Gulp is to <code>require<\/code> it in the gulpfile. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var gulp = require('gulp');<\/code><\/pre>\n<p>The require statement tells Node to look into the <code>node_modules<\/code> folder for a package named <code>gulp<\/code>. Once the package is found, we assign its contents to the variable <code>gulp<\/code>. <\/p>\n<p>We can now begin to write a gulp task with this <code>gulp<\/code> variable. The basic syntax of a gulp task is:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('task-name', function() {\r\n  \/\/ Stuff here\r\n});<\/code><\/pre>\n<p><code>task-name<\/code> refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing <code>gulp task-name<\/code>. <\/p>\n<p>To test it out, let&#8217;s create a <code>hello<\/code> task that says <code>Hello Zell!<\/code>. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('hello', function() {\r\n  console.log('Hello Zell');\r\n});<\/code><\/pre>\n<p>We can run this task with <code>gulp hello<\/code> in the command line. <\/p>\n<pre rel=\"Bash\"><code>$ gulp hello<\/code><\/pre>\n<p>The command line will return a log that says <code>Hello Zell!<\/code>. <\/p>\n<figure id='post-207149' class='align-none media-207149'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/hello.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins. <\/p>\n<p>Here&#8217;s what a real task may look like: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('task-name', function () {\r\n  return gulp.src('source-files') \/\/ Get source files with gulp.src\r\n    .pipe(aGulpPlugin()) \/\/ Sends it through a gulp plugin\r\n    .pipe(gulp.dest('destination')) \/\/ Outputs the file in the destination folder\r\n})<\/code><\/pre>\n<p>As you can see, a real task takes in two additional gulp methods &mdash; <code>gulp.src<\/code> and <code>gulp.dest<\/code>. <\/p>\n<p><code>gulp.src<\/code> tells the Gulp task what files to use for the task, while <code>gulp.dest<\/code> tells Gulp where to output the files once the task is completed.<\/p>\n<p>Let&#8217;s try building a real task where we compile Sass files into CSS files. <\/p>\n<h3>Preprocessing with Gulp<\/h3>\n<p>We can compile Sass to CSS in Gulp with the help of a plugin called <a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" rel=\"noopener\">gulp-sass<\/a>. You can install gulp-sass into your project by using the <code>npm install<\/code> command like we did for <code>gulp<\/code>. <\/p>\n<p>We&#8217;d also want to use the <code>--save-dev<\/code> flag to ensure that gulp-sass gets added to <code>devDependencies<\/code> in <code>package.json<\/code>. <\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-sass --save-dev<\/code><\/pre>\n<p>We have to <code>require<\/code> gulp-sass from the <code>node_modules<\/code> folder just like we did with <code>gulp<\/code> before we can use the plugin. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var gulp = require('gulp');\r\n\/\/ Requires the gulp-sass plugin\r\nvar sass = require('gulp-sass');<\/code><\/pre>\n<p>We can use gulp-sass by replacing <code>aGulpPlugin()<\/code> with <code>sass()<\/code>. Since the task is meant to compile Sass into CSS, let&#8217;s name it <code>sass<\/code>. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('sass', function(){\r\n  return gulp.src('source-files')\r\n    .pipe(sass()) \/\/ Using gulp-sass\r\n    .pipe(gulp.dest('destination'))\r\n});<\/code><\/pre>\n<p>We&#8217;ll need to provide the <code>sass<\/code> task with source files and a destination for the task to work, so let&#8217;s create a <code>styles.scss<\/code> file in the <code>app\/scss<\/code> folder. This file will be added to the <code>sass<\/code> task in <code>gulp.src<\/code>. <\/p>\n<p>We want to output the eventual <code>styles.css<\/code> file to the `app\/css` folder, which would be the <code>destination<\/code> for <code>gulp.dest<\/code>. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('sass', function(){\r\n  return gulp.src('app\/scss\/styles.scss')\r\n    .pipe(sass()) \/\/ Converts Sass to CSS with gulp-sass\r\n    .pipe(gulp.dest('app\/css'))\r\n});<\/code><\/pre>\n<p>We&#8217;ll want to test that the <code>sass<\/code> task is working as we want it to. To do so, we can add a Sass function within <code>styles.scss<\/code>. <\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ styles.scss\r\n.testing {\r\n  width: percentage(5\/7);\r\n}<\/code><\/pre>\n<p>If you run <code>gulp sass<\/code> in the command line, you should now be able to see that a <code>styles.css<\/code> file was created in <code>app\/css<\/code>. In addition, it has the code where <code>percentage(5\/7)<\/code> was evaluted into <code>71.42857%<\/code>. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* styles.css *\/\r\n.testing {\r\n  width: 71.42857%; \r\n}<\/code><\/pre>\n<p>That&#8217;s how we know that the <code>sass<\/code> task works! <\/p>\n<p>Sometimes we need the ability to compile more than one <code>.scss<\/code> file into CSS at the same. We can do so with the help of Node globs. <\/p>\n<div class=\"explanation\">FYI: Gulp-sass uses LibSass to convert Sass into CSS. It&#8217;s much quicker than Ruby-based methods. If you want, you can still use Ruby methods with Gulp by using <a href=\"https:\/\/github.com\/sindresorhus\/gulp-ruby-sass\" rel=\"noopener\">gulp-ruby-sass<\/a> or <a href=\"https:\/\/www.npmjs.com\/package\/gulp-compass\" rel=\"noopener\">gulp-compass<\/a> instead.<\/div>\n<h3>Globbing in Node<\/h3>\n<p>Globs are matching patterns for files that allow you to add more than one file into <code>gulp.src<\/code>. It&#8217;s like regular expressions, but specifically for file paths. <\/p>\n<p>When you use a glob, the computer checks file names and paths for the specified pattern. If the pattern exists, then a file is matched. <\/p>\n<p>Most workflows with Gulp tend to only require 4 different globbing patterns: <\/p>\n<ol>\n<li><code>*.scss<\/code>: The <code>*<\/code> pattern is a wildcard that matches any pattern in the current directory. In this case, we\u2019re matching any files ending with <code>.scss<\/code> in the root folder (<code>project<\/code>).<\/li>\n<li><code>**\/*.scss<\/code>: This is a more extreme version of the <code>*<\/code> pattern that matches any file ending with <code>.scss<\/code> in the root folder and any child directories.<\/li>\n<li><code>!not-me.scss<\/code>: The <code>!<\/code> indicates that Gulp should exclude the pattern from its matches, which is useful if you had to exclude a file from a matched pattern. In this case, <code>not-me.scss<\/code> would be excluded from the match.<\/li>\n<li><code>*.+(scss|sass)<\/code>: The plus <code>+<\/code> and parentheses <code>()<\/code> allows Gulp to match multiple patterns, with different patterns separated by the pipe <code>|<\/code> character. In this case, Gulp will match any file ending with <code>.scss<\/code> or <code>.sass<\/code> in the root folder.<\/li>\n<\/ol>\n<p>Since we know about globbing now, we can replace <code>app\/scss\/styles.scss<\/code> with a <code>scss\/**\/*.scss<\/code> pattern, which matches any file with a <code>.scss<\/code> extension in <code>app\/scss<\/code> or a child directory. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('sass', function() {\r\n  return gulp.src('app\/scss\/**\/*.scss') \/\/ Gets all files ending with .scss in app\/scss and children dirs\r\n    .pipe(sass())\r\n    .pipe(gulp.dest('app\/css'))\r\n})<\/code><\/pre>\n<p>Any other Sass file that&#8217;s found within <code>app\/scss<\/code> would automatically be included into the <code>sass<\/code> task with this change. If you add a <code>print.scss<\/code> file into the project, you&#8217;ll see that <code>print.css<\/code> will be generated in <code>app\/css<\/code>.<\/p>\n<figure id='post-207150' class='align-none media-207150'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/second-stylesheet.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>We&#8217;ve now managed to compile all Sass files into CSS files with a single command. The question is, what good does it do if we have to run <code>gulp sass<\/code> manually every time we want to compile Sass into CSS? <\/p>\n<p>Luckily, we can tell Gulp to automatically run the <code>sass<\/code> task whenever a file is saved through a process called &#8220;watching&#8221;. <\/p>\n<h3>Watching Sass files for changes<\/h3>\n<p class=\"explanation\">Note! Gulp Watch was one of the things that changed a lot from 3.x to 4.x. <a href=\"https:\/\/gulpjs.com\/docs\/en\/api\/watch\" rel=\"noopener\">See the docs<\/a>.<\/p>\n<p>Gulp provides us with a <code>watch<\/code> method that checks to see if a file was saved. The syntax for the <code>watch<\/code> method is: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ Gulp 3.x watch syntax\r\ngulp.watch('files-to-watch', ['tasks', 'to', 'run']);\r\n\r\n\/\/ NOTE! Gulp 4.x watch syntax (all the rest of the examples would need to be like this for Gulp 4\r\ngulp.watch('files-to-watch', gulp.series(['tasks', 'to', 'run']));<\/code><\/pre>\n<p>If we want to watch all Sass files and run the <code>sass<\/code> task whenever a Sass file is saved, we just have to replace <code>files-to-watch<\/code> with the <code>app\/scss\/**\/*.scss<\/code>, and <code>['tasks', 'to', 'run']<\/code> with <code>['sass']<\/code>: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ Gulp watch syntax\r\ngulp.watch('app\/scss\/**\/*.scss', ['sass']); <\/code><\/pre>\n<p>More often though, we&#8217;ll want to watch more than one type of file at once. To do so, we can group together multiple watch processes into a <code>watch<\/code> task: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', function(){\r\n  gulp.watch('app\/scss\/**\/*.scss', ['sass']); \r\n  \/\/ Other watchers\r\n})<\/code><\/pre>\n<p>If you ran the <code>gulp watch<\/code> command right now, you&#8217;ll see that Gulp starts watching immediately. <\/p>\n<figure id='post-207151' class='align-none media-207151'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/gulp-watch-start.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>And that it automatically runs the <code>sass<\/code> task whenever you save a <code>.scss<\/code> file. <\/p>\n<figure id='post-207152' class='align-none media-207152'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/watch-compile.gif' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Let&#8217;s take it a step further and make Gulp reload the browser whenever we save a <code>.scss<\/code> file with the help of <a href=\"http:\/\/www.browsersync.io\" rel=\"noopener\">Browser Sync<\/a>.<\/p>\n<h3>Live-reloading with Browser Sync<\/h3>\n<p>Browser Sync helps make web development easier by spinning up a web server that helps us do live-reloading easily. It has other features, like <a href=\"http:\/\/addyosmani.com\/blog\/browser-sync\/\" rel=\"noopener\">synchronizing actions across multiple devices<\/a>, as well. <\/p>\n<p>We&#8217;ll first have to install Browser Sync: <\/p>\n<pre rel=\"Bash\"><code>$ npm install browser-sync --save-dev<\/code><\/pre>\n<p>You may have noticed that there isn&#8217;t a <code>gulp-<\/code> prefix when we install Browser Sync. This is because Browser Sync works with Gulp, so we don&#8217;t have to use a plugin. <\/p>\n<p>To use Browser Sync, we&#8217;ll have to <code>require<\/code> Browser Sync.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var browserSync = require('browser-sync').create();<\/code><\/pre>\n<p>We need to create a <code>browserSync<\/code> task to enable Gulp to spin up a server using Browser Sync. Since we&#8217;re running a server, we need to let Browser Sync know where the root of the server should be. In our case, it&#8217;s the `app` folder:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('browserSync', function() {\r\n  browserSync.init({\r\n    server: {\r\n      baseDir: 'app'\r\n    },\r\n  })\r\n})<\/code><\/pre>\n<p>We also have to change our <code>sass<\/code> task slightly so Browser Sync can inject new CSS styles (update the CSS) into the browser whenever the <code>sass<\/code> task is ran. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('sass', function() {\r\n  return gulp.src('app\/scss\/**\/*.scss') \/\/ Gets all files ending with .scss in app\/scss\r\n    .pipe(sass())\r\n    .pipe(gulp.dest('app\/css'))\r\n    .pipe(browserSync.reload({\r\n      stream: true\r\n    }))\r\n});<\/code><\/pre>\n<p>We&#8217;re done with configuring Browser Sync. Now, we have to run both the <code>watch<\/code> and <code>browserSync<\/code> tasks at the same time for live-reloading to occur. <\/p>\n<p>It&#8217;ll be cumbersome to open up two command line windows and run <code>gulp browserSync<\/code> and <code>gulp watch<\/code> separately, so let&#8217;s get Gulp to run them together by telling the <code>watch<\/code> task that <code>browserSync<\/code> must be completed before <code>watch<\/code> is allowed to run. <\/p>\n<p>We can do so by adding a second argument to the <code>watch<\/code> task. The syntax is: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){\r\n  \/\/ ...\r\n})<\/code><\/pre>\n<p>And in this case we&#8217;re adding the browserSync task. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', ['browserSync'], function (){\r\n  gulp.watch('app\/scss\/**\/*.scss', ['sass']); \r\n  \/\/ Other watchers\r\n})<\/code><\/pre>\n<p>We&#8217;ll also want to make sure <code>sass<\/code> runs before <code>watch<\/code> so the CSS will already be the latest whenever we run a Gulp command. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', ['browserSync', 'sass'], function (){\r\n  gulp.watch('app\/scss\/**\/*.scss', ['sass']); \r\n  \/\/ Other watchers\r\n});<\/code><\/pre>\n<p>Now, if you run <code>gulp watch<\/code> in the command line, Gulp should start both the <code>sass<\/code> and <code>browserSync<\/code> tasks concurrently. When both tasks are completed, <code>watch<\/code> will run. <\/p>\n<figure id='post-207153' class='align-none media-207153'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/bs-watch.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>At the same time, a browser window that points to <code>app\/index.html<\/code> would also pop up. If you change the <code>styles.scss<\/code> file, you&#8217;ll see that the browser reloads automatically. <\/p>\n<figure id='post-207154' class='align-none media-207154'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/bs-change-bg.gif' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>There&#8217;s one more thing before we end this live-reloading section. Since we&#8217;re already watching for <code>.scss<\/code> files to reload, why not go a step further and reload the browser if any HTML or JavaScript file gets saved? <\/p>\n<p>We can do so by adding two more watch processes, and calling the <code>browserSync.reload<\/code> function when a file gets saved: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', ['browserSync', 'sass'], function (){\r\n  gulp.watch('app\/scss\/**\/*.scss', ['sass']); \r\n  \/\/ Reloads the browser whenever HTML or JS files change\r\n  gulp.watch('app\/*.html', browserSync.reload); \r\n  gulp.watch('app\/js\/**\/*.js', browserSync.reload); \r\n});<\/code><\/pre>\n<p>So far in this tutorial we&#8217;ve taken care of three things: <\/p>\n<ol>\n<li>Spinning up a web server for development<\/li>\n<li>Using the Sass preprocessor<\/li>\n<li>Reloading the browser whenever a file is saved<\/li>\n<\/ol>\n<p>Let&#8217;s cover the part on optimizing assets in the next section. We&#8217;ll start with optimizing CSS and JavaScript files. <\/p>\n<h3>Optimizing CSS and JavaScript files<\/h3>\n<p>Developers have two tasks to perform when we try to optimize CSS and JavaScript files for production: minification and concatenation. <\/p>\n<p>One problem developers face when automating this process is that it&#8217;s difficult to concatenate your scripts in the correct order. <\/p>\n<p>Say we have included 3 script tags in <code>index.html<\/code>.<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;body&gt;\r\n  &lt;!-- other stuff --&gt;\r\n  &lt;script src=\"js\/lib\/a-library.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"js\/lib\/another-library.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;<\/code><\/pre>\n<p>These scripts are located in two different directories. It&#8217;ll be difficult to concatenate them with traditional plugins like <a href=\"https:\/\/www.npmjs.com\/package\/gulp-concat\" rel=\"noopener\">gulp-concatenate<\/a>. <\/p>\n<p>Thankfully, there&#8217;s a useful Gulp plugin, <a href=\"https:\/\/www.npmjs.com\/package\/gulp-useref\" rel=\"noopener\">gulp-useref<\/a> that solves this problem. <\/p>\n<p>Gulp-useref concatenates any number of CSS and JavaScript files into a single file by looking for a comment that starts with &#8220;&lt;!&#8211;build:&#8221; and ends with &#8220;&lt;!&#8211;endbuild&#8211;>&#8221;. Its syntax is: <\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;!-- build:&lt;type&gt; &lt;path&gt; --&gt;\r\n... HTML Markup, list of script \/ link tags.\r\n&lt;!-- endbuild --&gt;<\/code><\/pre>\n<p><code>&lt;type&gt;<\/code> can either be <code>js<\/code>, <code>css<\/code>, or <code>remove<\/code>. It&#8217;s best to set <code>type<\/code> to the type of file that you&#8217;re trying to concatenate. If you set <code>type<\/code> to <code>remove<\/code>, Gulp will remove the entire build block without generating a file. <\/p>\n<p><code>&lt;path&gt;<\/code> here refers to the target path of the generated file.<\/p>\n<p>We&#8217;ll want the final JavaScript file to be generated in the <code>js<\/code> folder, as <code>main.min.js<\/code>. Hence, the markup would be: <\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;!--build:js js\/main.min.js --&gt;\r\n&lt;script src=\"js\/lib\/a-library.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/lib\/another-library.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\r\n&lt;!-- endbuild --&gt;<\/code><\/pre>\n<p>Now let&#8217;s configure the gulp-useref plugin in the gulpfile. We&#8217;ll have to install the plugin and require it in the gulpfile.<\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-useref --save-dev<\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var useref = require('gulp-useref');<\/code><\/pre>\n<p>Setting up the <code>useref<\/code> task is similar to the other tasks we&#8217;ve done so far. Here&#8217;s the code: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('useref', function(){\r\n  return gulp.src('app\/*.html')\r\n    .pipe(useref())\r\n    .pipe(gulp.dest('dist'))\r\n});<\/code><\/pre>\n<p>Now if you run this <code>useref<\/code> task, Gulp will take run through the 3 script tags and concatenate them into <code>dist\/js\/main.min.js<\/code>. <\/p>\n<figure id='post-207155' class='align-none media-207155'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/main-min.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>The file however, isn&#8217;t minified right now. We&#8217;ll have to use the <a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" rel=\"noopener\">gulp-uglify<\/a> plugin to help with minifying JavaScript files. We also need a second plugin called <a href=\"https:\/\/github.com\/robrich\/gulp-if\" rel=\"noopener\">gulp-if<\/a> to ensure that we only attempt to minify JavaScript files. <\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-uglify --save-dev <\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ Other requires...\r\nvar uglify = require('gulp-uglify');\r\nvar gulpIf = require('gulp-if');\r\n\r\ngulp.task('useref', function(){\r\n  return gulp.src('app\/*.html')\r\n    .pipe(useref())\r\n    \/\/ Minifies only if it's a JavaScript file\r\n    .pipe(gulpIf('*.js', uglify()))\r\n    .pipe(gulp.dest('dist'))\r\n});<\/code><\/pre>\n<p>Gulp should now automatically minify the `main.min.js` file whenever you run the <code>useref<\/code> task. <\/p>\n<p>One neat thing I&#8217;ve yet to reveal with Gulp-useref is that it automatically changes all the scripts within &#8220;&lt;!&#8211;build:&#8221; and &#8220;&lt;!&#8211;endbuild&#8211;>&#8221; into one single JavaScript file that points to `js\/main.min.js`. <\/p>\n<figure id='post-207156' class='align-none media-207156'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/useref-html.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Wonderful, isn&#8217;t it? <\/p>\n<p>We can use the same method to concatenate any CSS files (if you decided to add more than one) as well. We&#8217;ll follow the same process and add a <code>build<\/code> comment. <\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;!--build:css css\/styles.min.css--&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/styles.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/another-stylesheet.css\"&gt;\r\n&lt;!--endbuild--&gt;<\/code><\/pre>\n<p>We can also minify the concatenated CSS file as well. We need to use a package called <a href=\"https:\/\/www.npmjs.com\/package\/gulp-cssnano\" rel=\"noopener\">gulp-cssnano<\/a> plugin to help us with minification.<\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-cssnano<\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var cssnano = require('gulp-cssnano');\r\n\r\ngulp.task('useref', function(){\r\n  return gulp.src('app\/*.html')\r\n    .pipe(useref())\r\n    .pipe(gulpIf('*.js', uglify()))\r\n    \/\/ Minifies only if it's a CSS file\r\n    .pipe(gulpIf('*.css', cssnano()))\r\n    .pipe(gulp.dest('dist'))\r\n});<\/code><\/pre>\n<p>Now you&#8217;d get one optimized CSS file and one optimized JavaScript file whenever you run the <code>useref<\/code> task. <\/p>\n<p>Let&#8217;s move on and optimize images next. <\/p>\n<h3>Optimizing Images<\/h3>\n<p>You&#8217;ve probably guessed it by now; we need to use <a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" rel=\"noopener\">gulp-imagemin<\/a> to help us with optimizing images.<\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-imagemin --save-dev<\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var imagemin = require('gulp-imagemin');<\/code><\/pre>\n<p>We can minify <code>png<\/code>, <code>jpg<\/code>, <code>gif<\/code> and even <code>svg<\/code> with the help of gulp-imagemin. Let&#8217;s create an <code>images<\/code> task for this optimization process. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('images', function(){\r\n  return gulp.src('app\/images\/**\/*.+(png|jpg|gif|svg)')\r\n  .pipe(imagemin())\r\n  .pipe(gulp.dest('dist\/images'))\r\n});<\/code><\/pre>\n<p>Since different file types can be optimized differently, you might want to add options to <code>imagemin<\/code> to customize how each file is optimized. <\/p>\n<p>For example, you can create <a href=\"http:\/\/vesta.astro.amu.edu.pl\/Library\/WWW\/Tutorial1\/graphics\/gif_files.html\" rel=\"noopener\">interlaced<\/a> GIFs by setting the <code>interlaced<\/code> option key to <code>true<\/code>. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('images', function(){\r\n  return gulp.src('app\/images\/**\/*.+(png|jpg|jpeg|gif|svg)')\r\n  .pipe(imagemin({\r\n      \/\/ Setting interlaced to true\r\n      interlaced: true\r\n    }))\r\n  .pipe(gulp.dest('dist\/images'))\r\n});<\/code><\/pre>\n<p>You can play around with other options if you want to as well. <\/p>\n<p>Optimizing images however, is an extremely slow process that you&#8217;d not want to repeat unless necessary. To do so, we can use the <a href=\"https:\/\/www.npmjs.com\/package\/gulp-cache\" rel=\"noopener\">gulp-cache<\/a> plugin.<\/p>\n<pre rel=\"Bash\"><code>$ npm install gulp-cache --save-dev<\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var cache = require('gulp-cache');\r\n\r\ngulp.task('images', function(){\r\n  return gulp.src('app\/images\/**\/*.+(png|jpg|jpeg|gif|svg)')\r\n  \/\/ Caching images that ran through imagemin\r\n  .pipe(cache(imagemin({\r\n      interlaced: true\r\n    })))\r\n  .pipe(gulp.dest('dist\/images'))\r\n});<\/code><\/pre>\n<p>We&#8217;re almost done with the optimization process. There&#8217;s one more folder that we need to transfer from the `app` directory into `dist`, the fonts directory. Let&#8217;s do that now. <\/p>\n<h3>Copying Fonts to Dist<\/h3>\n<p>Since font files are already optimized, there&#8217;s nothing more we need to do. All we have to do is to copy the fonts into <code>dist<\/code>. <\/p>\n<p>We can copy files with Gulp simply by specifying the <code>gulp.src<\/code> and <code>gulp.dest<\/code> without any plugins.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('fonts', function() {\r\n  return gulp.src('app\/fonts\/**\/*')\r\n  .pipe(gulp.dest('dist\/fonts'))\r\n})<\/code><\/pre>\n<p>Now Gulp will copy `fonts` from `app` to `dist` whenever you run <code>gulp fonts<\/code>. <\/p>\n<figure id='post-207157' class='align-none media-207157'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/font-copy.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>We have 6 different tasks in the gulpfile now, and each of them has to be called individually with the command line, which is kinda cumbersome so we want to tie everything together into one command. <\/p>\n<p>Before we do that though, let&#8217;s look at how to clean up generated files automatically. <\/p>\n<h3>Cleaning up generated files automatically<\/h3>\n<p>Since we&#8217;re generating files automatically, we&#8217;ll want to make sure that files that are no longer used don&#8217;t remain anywhere without us knowing. <\/p>\n<p>This process is called cleaning (or in simpler terms, deleting files). <\/p>\n<p>We&#8217;ll have to use <a href=\"https:\/\/www.npmjs.com\/package\/del\" rel=\"noopener\">del<\/a> to help us with cleaning. <\/p>\n<pre rel=\"Bash\"><code>npm install del --save-dev<\/code><\/pre>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var del = require('del');<\/code><\/pre>\n<p>The <code>del<\/code> function takes in an array of node globs which tells it what folders to delete. <\/p>\n<p>Setting it up with a Gulp task is almost like the first &#8220;hello&#8221; example we had. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('clean:dist', function() {\r\n  return del.sync('dist');\r\n})<\/code><\/pre>\n<p>Now Gulp will delete the `dist` folder for you whenever <code>gulp clean:dist<\/code> is run. <\/p>\n<p>Note: We don&#8217;t have to worry about deleting the <code>dist\/images<\/code> folder because gulp-cache has already stored the caches of the images on your local system. <\/p>\n<p>To clear the caches off your local system, you can create a separate task that&#8217;s named `cache:clear`<\/p>\n<p>gulp.task(&#8216;cache:clear&#8217;, function (callback) {<br \/>\n  return cache.clearAll(callback)<br \/>\n})<\/p>\n<p>Phew, that&#8217;s a mouthful. Let&#8217;s combine all our tasks together now! <\/p>\n<h3>Combining Gulp tasks<\/h3>\n<p>Let&#8217;s summarise what we&#8217;ve done. So far, we have created two distinct sets of Gulp tasks. <\/p>\n<p>The first set is for a development process, where we compiled Sass to CSS, watched for changes, and reloaded the browser accordingly. <\/p>\n<p>The second set is for an optimization process, where we ready all files for the production website. We optimized assets like CSS, JavaScript, and images in this process and copied fonts over from <code>app<\/code> to <code>dist<\/code>. <\/p>\n<p>We&#8217;ve already grouped the first set of tasks together into a simple workflow with the <code>gulp watch<\/code> command: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('watch', ['browserSync', 'sass'], function (){\r\n  \/\/ ... watchers\r\n})<\/code><\/pre>\n<p>The second set consists of tasks that we need to run to create the production website. This includes <code>clean:dist<\/code>, <code>sass<\/code>, <code>useref<\/code>, <code>images<\/code> and <code>fonts<\/code>. <\/p>\n<p>If we went by the same train of thought, we could create a <code>build<\/code> task to combine everything together. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){\r\n  console.log('Building files');\r\n})<\/code><\/pre>\n<p>Unfortunately, we wouldn&#8217;t be able to write the <code>build<\/code> task this way because Gulp activates all tasks in the second argument simultaneously.<\/p>\n<p>There&#8217;s a possibility that <code>useref<\/code>, <code>images<\/code>, or even <code>fonts<\/code> gets completed before <code>clean<\/code> does, which means the entire `dist` folder gets deleted. <\/p>\n<p>So, to ensure that cleans get completed before the rest of the tasks, we need to use an extra plugin called <a href=\"https:\/\/www.npmjs.com\/package\/run-sequence\" rel=\"noopener\">Run Sequence<\/a>.<\/p>\n<pre rel=\"Bash\"><code>$ npm install run-sequence --save-dev<\/code><\/pre>\n<p>Here&#8217;s the syntax of a task sequence with run sequence: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var runSequence = require('run-sequence');\r\n\r\ngulp.task('task-name', function(callback) {\r\n  runSequence('task-one', 'task-two', 'task-three', callback);\r\n});<\/code><\/pre>\n<p>When <code>task-name<\/code> is called, Gulp will run <code>task-one<\/code> first. When <code>task-one<\/code> finishes, Gulp will automatically start <code>task-two<\/code>. Finally, when <code>task-two<\/code> is complete, Gulp will run <code>task-three<\/code>. <\/p>\n<p>Run Sequence also allows you to run tasks simultaneously if you place them in an array: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('task-name', function(callback) {\r\n  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);\r\n});<\/code><\/pre>\n<p>In this case, Gulp first runs <code>task-one<\/code>. When <code>task-one<\/code> is completed, Gulp runs every task in the second argument simultaneously. All tasks in this second argument must be completed before <code>task-three<\/code> is run.<\/p>\n<p>So we can now create a task that ensures that <code>clean:dist<\/code> runs first, followed by all the other tasks:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('build', function (callback) {\r\n  runSequence('clean:dist', \r\n    ['sass', 'useref', 'images', 'fonts'],\r\n    callback\r\n  )\r\n})<\/code><\/pre>\n<p>To make things consistent, we can also build the same sequence with the first group. Let&#8217;s use <code>default<\/code> as the task name this time: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gulp.task('default', function (callback) {\r\n  runSequence(['sass','browserSync', 'watch'],\r\n    callback\r\n  )\r\n})<\/code><\/pre>\n<p>Why <code>default<\/code>? Because when you have a task named <code>default<\/code>, you can run it simply by typing the <code>gulp<\/code> command, which saves some keystrokes.<\/p>\n<p>Finally, here&#8217;s a <a href=\"https:\/\/github.com\/zellwk\/gulp-starter-csstricks\" rel=\"noopener\">github repo<\/a> for all the work we&#8217;ve done! <\/p>\n<h3>Wrapping it up<\/h3>\n<p>We&#8217;ve gone through the absolute basics of Gulp and created a workflow that&#8217;s able to compile Sass into CSS while watching HTML and JS files for changes at the same time. We can run this task with the <code>gulp<\/code> command in the command line. <\/p>\n<p>We&#8217;ve also built a second task, <code>build<\/code>, that creates a <code>dist<\/code> folder for the production website. We compiled Sass into CSS, optimized all our assets, and copied the necessary folders into the <code>dist<\/code> folder. To run this task, we just have to type <code>gulp build<\/code> into the command line. <\/p>\n<p>Lastly, we have a <code>clean<\/code> task that clears away from the generated <code>dist<\/code> folder any image caches that are created, allowing us to remove any old files that were inadvertently kept in <code>dist<\/code>. <\/p>\n<p>We&#8217;ve created a robust workflow so far that&#8217;s capable enough for most web developers. There&#8217;s a lot more to Gulp and workflows that we can explore to make this process even better. Here are some ideas for you: <\/p>\n<p>For development: <\/p>\n<ul>\n<li>Using <a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\" rel=\"noopener\">Autoprefixer<\/a> to write vendor-free CSS code<\/li>\n<li>Adding <a href=\"https:\/\/www.npmjs.com\/package\/gulp-sourcemaps\" rel=\"noopener\">Sourcemaps<\/a> for easier debugging<\/li>\n<li>Creating Sprites with <a href=\"https:\/\/www.npmjs.com\/package\/sprity\" rel=\"noopener\">sprity<\/a><\/li>\n<li>Compiling only files that have changed with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-changed\" rel=\"noopener\">gulp-changed<\/a><\/li>\n<li>Writing ES6 with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-babel\" rel=\"noopener\">Babel<\/a> or <a href=\"https:\/\/www.npmjs.com\/package\/gulp-traceur\" rel=\"noopener\">Traceur<\/a><\/li>\n<li>Modularizing Javascript files with <a href=\"http:\/\/browserify.org\" rel=\"noopener\">Browserify<\/a>, <a href=\"https:\/\/github.com\/webpack\/webpack\" rel=\"noopener\">webpack<\/a>, or <a href=\"https:\/\/github.com\/jspm\" rel=\"noopener\">jspm<\/a><\/li>\n<li>Modularizing HTML with template engines like <a href=\"https:\/\/www.npmjs.com\/package\/gulp-handlebars\" rel=\"noopener\">Handlebars<\/a> or <a href=\"https:\/\/www.npmjs.com\/package\/gulp-swig\" rel=\"noopener\">Swig<\/a><\/li>\n<li>Splitting the gulpfile into smaller files with <a href=\"https:\/\/www.npmjs.com\/package\/require-directory\" rel=\"noopener\">require-dir<\/a><\/li>\n<li>Generating a Modernizr script automatically with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-modernizr\" rel=\"noopener\">gulp-modernizr<\/a><\/li>\n<\/ul>\n<p>For optimization: <\/p>\n<ul>\n<li>Removing unused CSS with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-uncss\" rel=\"noopener\">unCSS<\/a><\/li>\n<li>Further optimizing CSS with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-csso\" rel=\"noopener\">CSSO<\/a>\n<li>Generating inline CSS for performance with <a href=\"https:\/\/www.npmjs.com\/package\/critical\" rel=\"noopener\">Critical<\/a><\/li>\n<\/ul>\n<p>In addition to development or optimization processes, you can also add write JavaScript unit tests with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-jasmine\" rel=\"noopener\">gulp-jasmine<\/a> and even deploy your <code>dist<\/code> folder onto your production server automatically with <a href=\"https:\/\/www.npmjs.com\/package\/gulp-rsync\" rel=\"noopener\">gulp-rync<\/a>. <\/p>\n<p>As you can see, even though the workflow we&#8217;ve created does quite a few things, there&#8217;s a lot more that can be done. Creating a workflow that suits your needs can be extremely exciting and fulfilling, but it can be a lot to take in if you&#8217;re new to this. <\/p>\n<p>There&#8217;s so much more to Gulp that it&#8217;s impossible to cover within this blog post, or even a series of posts. That&#8217;s why I wrote a book on <a href=\"https:\/\/automateyourworkflow.com\/\" rel=\"noopener\">automating your workflow<\/a>, and I invite you to <a href=\"https:\/\/automateyourworkflow.com\/\" rel=\"noopener\">grab ten chapters for free<\/a> if you&#8217;re interested in finding out more :) <\/p>\n<p>Let me know what you felt about this article in the comments below! Oh yes, feel free to <a href=\"http:\/\/www.zell-weekeat.com\/contact\" rel=\"noopener\">contact me<\/a> if you have any questions on workflow. I&#8217;ll be happy to reply!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gulp is a tool that helps you out with several tasks when it comes to web development. It&#8217;s often used to do front end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets like CSS, JavaScript, and images Important Note! [&hellip;]<\/p>\n","protected":false},"author":45842,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1166,1165,841],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":322919,"url":"https:\/\/css-tricks.com\/run-gulp-as-you-open-a-vs-code-project\/","url_meta":{"origin":207144,"position":0},"title":"Run Gulp as You Open a VS Code Project","date":"October 12, 2020","format":false,"excerpt":"When I open my local project for this very site, there is a 100% chance that I need to run this command before anything else: gulp. I set that up fresh less than a year ago so I'm on the latest-and-greatest stuff and have my workflow just how I like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/gulp-vscode.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":162189,"url":"https:\/\/css-tricks.com\/getting-started-gulp\/","url_meta":{"origin":207144,"position":1},"title":"Getting started with Gulp","date":"February 7, 2014","format":false,"excerpt":"I followed this guide by Mark Goodyear to try Gulp (a Grunt competitor) out. I don't use either of them at a level where I'm qualified to have a strong opinion about betterness. They both work for me. I do enjoy the piping in Gulp how you say \"take this,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254853,"url":"https:\/\/css-tricks.com\/combine-webpack-gulp-4\/","url_meta":{"origin":207144,"position":2},"title":"Combine Webpack with Gulp 4","date":"May 15, 2017","format":false,"excerpt":"Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/webpackgulp.png?fit=1200%2C759&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280462,"url":"https:\/\/css-tricks.com\/gulp-for-wordpress-creating-the-tasks\/","url_meta":{"origin":207144,"position":3},"title":"Gulp for WordPress: Creating the Tasks","date":"December 27, 2018","format":false,"excerpt":"This is the second post in a two-part series about creating a Gulp workflow for WordPress theme development. Part one focused on the initial installation, setup, and organization of Gulp in a WordPress theme project. This post goes deep into the tasks Gulp will run by breaking down what each\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/spilled-milk-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280453,"url":"https:\/\/css-tricks.com\/gulp-for-wordpress-initial-setup\/","url_meta":{"origin":207144,"position":4},"title":"Gulp for WordPress: Initial Setup","date":"December 26, 2018","format":false,"excerpt":"This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the initial setup, including Gulp installation and an outline of the tasks we want it to run. If you're interested in how the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/spilled-milk-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299795,"url":"https:\/\/css-tricks.com\/just-sharing-my-gulpfile\/","url_meta":{"origin":207144,"position":5},"title":"Just Sharing My Gulpfile","date":"December 11, 2019","format":false,"excerpt":"Seemingly out of the blue, the Gulp processing I had set up for this site started to have a race condition. I'd run my watch command, change some CSS, and the processing would sometimes leave behind some extra files that were meant to be cleaned up during the processing. Like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207144"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/45842"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=207144"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207144\/revisions"}],"predecessor-version":[{"id":299763,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207144\/revisions\/299763"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=207144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=207144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=207144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}