{"id":23288,"date":"2020-03-06T23:12:38","date_gmt":"2020-03-06T15:12:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23288"},"modified":"2020-03-05T22:32:24","modified_gmt":"2020-03-05T14:32:24","slug":"getting-started-with-gulp-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/","title":{"rendered":"Getting Started With Gulp.js"},"content":{"rendered":"<p>Gulp is a  tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you\u2019re a developer or a designer who creates HTML wireframes now and then, I encourage you to dig in.<\/p>\n<p>In this article we\u2019ll look at the basics of using Gulp \u2014 from installation to basic syntax and a couple of examples. By the end of the article you should be able to <strong>find, install and use packages that others have created for Gulp<\/strong> to compile CSS-preprocessors, optimize images, create sprites, concatenate files, and more!<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/automate-workflow-with-grunt\/\" class=\"ref-block__link\" title=\"Read More: Effective Workflow Automation with Grunt [Step-by-Step Guide]\" rel=\"bookmark\"><span class=\"screen-reader-text\">Effective Workflow Automation with Grunt [Step-by-Step Guide]<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/automate-workflow-with-grunt.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23274 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/automate-workflow-with-grunt.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Effective Workflow Automation with Grunt [Step-by-Step Guide]<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tI'm a huge advocate of automation because it simplifies life significantly. Why spend time on repetitive tasks when...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Installing Gulp<\/h2>\n<p>We\u2019ll use Terminal in OSX and Linux to install Gulp. For Windows, we recommend to use to use Cygwin, <a href=\"https:\/\/cmder.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cmder<\/a> or <a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/wsl\/install-win10\" target=\"_blank\" rel=\"noopener noreferrer\">WSL (Windows Subsystem for Linux)<\/a>. I\u2019ll be referring them simply as as Terminal.<\/p>\n<p>First, we\u2019ll make sure that Node.js and NPM are already installed in our compter. Open up the Terminal and type <code>npm -v<\/code> and press enter. If you see version number displayed you have them installed already.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg\" alt=\"NPM version 6.9.0 shown in macOS Terminal application\" width=\"750\" height=\"200\"><\/figure>\n<p>If you get a \u201ccommand not found\u201d (or a similar error), head on down to the <a target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"noopener noreferrer\">Node.js downloads<\/a> page and select the appropriate package for your system. Once installed, the <code>npm<\/code> command will be available in the Terminal.<\/p>\n<p>Now, we can type the following command in the Terminal, to install the Gulp CLI.<\/p>\n<pre>npm install --global gulp-cli<\/pre>\n<p>This will allow us to run the <code>gulp<\/code> command to execute the Gulp tasks.<\/p>\n<h2>Adding Gulp package to a Project<\/h2>\n<p>This Gulp package will handle and define the Gulp tasks to run in our project. To install, it we can type the following command:<\/p>\n<pre>npm install --save-dev gulp<\/pre>\n<p>This will install the Gulp package to the <code>node_modules<\/code> folder in our project folder and register Gulp as the project \u201cDevelopment\u201d dependency. It\u2019s basically telling that Gulp is a tool that we only use on a development environment.<\/p>\n<h2>Gulpfile<\/h2>\n<p>The Gulpfile is where the magic happens. It\u2019s where you define <strong>the automations you require<\/strong> and <strong>when you want them to happen<\/strong>. Let\u2019s create an empty default task by creating a file named <code>gulpfile.js<\/code> and pasting the following code into it.<\/p>\n<pre>const gulp = require('gulp');\r\n\r\ngulp.task('default', function() {\r\n  \/\/ This does nothing for now, we'll add functionality in a moment...\r\n});<\/pre>\n<p>Once this file is saved you can go back to your terminal and run the gulp command on its own. Gulp detects which project it is in and runs the default task \u2014 the one we just created. You should see something like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/gulp-default-task.jpg\" alt=\"default task\" width=\"750\" height=\"480\"><\/figure>\n<p>Nothing really happens here, since the task is empty, but it is working fine. Let\u2019s get going with some proper examples!<\/p>\n<h2>Copying A File<\/h2>\n<p>This is a boring one, I\u2019ll admit as much, but it will help you understand what\u2019s going on easily.<\/p>\n<p>In your project folder create a file named <code>to_copy.txt<\/code> , and a folder named <code>dev<\/code>. Let\u2019s go into our Gulpfile and create a new task named <code>copy<\/code>.<\/p>\n<pre>const gulp = require('gulp');\r\n  gulp.task('default', function () {\r\n    return gulp.src('file.txt')\r\n        .pipe( gulp.dest('dist') );\r\n});<\/pre>\n<p>The first line defines a task that is named copy. Within this we use gulp.src to specify which files we are targeting with this task \u2014 in this case it is a single file named <code>to_copy.txt<\/code>.<\/p>\n<p>We then pipe these files to the gulp.dest function which specifies where we want to put these files \u2014 I\u2019ve used the dev directory.<\/p>\n<p>Go back to your terminal and type <code>gulp copy<\/code> to run this task, it should copy the specified file to the specified directory, something like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/gulp-copy-task.jpg\" alt=\"gulpjs copy\" width=\"750\" height=\"200\"><\/figure>\n<p>The pipe command is at the heart of Gulp. It is an efficient way to move data between commands. The src command specifies the files which are piped to the dest command. In more complex scenarios we would pipe our files to other commands before specifying a destination.<\/p>\n<p>You should also be aware that the source can be given as a single file, or multiple files. If we have a folder named <code>src<\/code> and we want to move all files from our <code>dist<\/code> folder into it, we could use the following command:<\/p>\n<pre>const gulp = require('gulp');\r\n  gulp.task('default', function () {\r\n    return gulp.src('src\/*')\r\n        .pipe( gulp.dest('dist') );\r\n});<\/pre>\n<p>The star character will match anything within the directory. You could also match all files within all subdirectories, and do all sorts of other fancy matching. Take a look at the <a target=\"_blank\" href=\"https:\/\/github.com\/isaacs\/node-glob\" rel=\"noopener noreferrer\">node-glob documentation<\/a> for more info.<\/p>\n<h2>Compiling Sass<\/h2>\n<p>Compiling a CSS Pre-processors like Sass to CSS is a common task when developing websites. With Gulp, it\u2019s fairly easy to do it with couple of modules namely <a href=\"https:\/\/github.com\/sass\/node-sass\" target=\"_blank\" rel=\"noopener noreferrer\">node-sass<\/a> and gulp-sass. You can type the following command in Terminal, to install these modules:<\/p>\n<pre>\r\nnpm install node-sass gulp-sass --save-dev\r\n<\/pre>\n<p>Once done, you can use the syntax the package dictates to compile your code. To do this, create a file named styles.scss with the following content:<\/p>\n<pre>$primary: #ff9900;\r\nbody {\r\n    background: $primary;\r\n}<\/pre>\n<p>Now create the following Gulp task in the Gulpfile.<\/p>\n<pre>const sass = require('gulp-sass');\r\nsass.compiler = require('node-sass');\r\n  \r\ngulp.task('sass', function () {\r\n    return gulp.src('*.scss')\r\n        .pipe( sass() )\r\n        .pipe( gulp.dest('css') );\r\n});<\/pre>\n<p>When you run <code>gulp sass<\/code>, all files with the scss extension will be piped to the <code>sass<\/code> function, which will convert them to css. These are then piped to the destination function which places them in the css folder.<\/p>\n<h2>Watching Files And Folders<\/h2>\n<p>So far this is all handy, but we still need to type a command <em>each time<\/em> we want to run a task, which isn\u2019t very efficient, especially when it comes to stylesheet changes. Gulp allows you to watch files for changes and run commands automatically.<\/p>\n<p>In the Gulpfile, create a command named <code>automate<\/code> which will use the watch command to watch a set of files for changes, and run a specific command when a file changes.<\/p>\n<pre>const sass = require('gulp-sass');\r\nsass.compiler = require('node-sass');\r\n\r\ngulp.task('sass', function () {\r\n    return gulp.src('*.scss')\r\n        .pipe( sass() )\r\n        .pipe( gulp.dest('css') );\r\n});\r\n\r\ngulp.task('automate', function() {\r\n    return gulp.watch('*.scss', gulp.parallel('sass'));\r\n});<\/pre>\n<p>If we type <code>gulp automate<\/code>, it will start and finish the task, but it won\u2019t return to the prompt because it is monitoring for changes. We\u2019ve specified that we want to watch all scss files in the root directory and if they change, we want to run the sass command that we\u2019ve set up previously.<\/p>\n<p>If we change the style.scss file, it will compile to the css file within the css directory automatically.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/gulp-watch-task.jpg\" alt=\"watch\" width=\"750\" height=\"200\"><\/figure>\n<h2>Running Multiple Tasks<\/h2>\n<p>There are many situations where you might want to run multiple tasks. When watching your javascript folder you may want to compile concatenate two files and then proceed to minify them. There are two ways you can get this done.<\/p>\n<p>If tasks are related, I like to <strong>chain them.<\/strong> A good example would be the concatenation and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/javascript-minifying-tools\/\" rel=\"noopener noreferrer\">minification of javascript files<\/a>. We first pipe our files to the concat action, then pipe them to gulp-uglify, then use the destination function to output them.<\/p>\n<p>If tasks are unrelated you could <strong>call multiple tasks<\/strong>. An example would be a task where we want to concatenate and minify our scripts and also compile our Sass. Here\u2019s he full Gulpfile of how that would look.<\/p>\n<pre>const gulp = require('gulp');\r\nconst uglify = require('gulp-uglify');\r\nconst concat = require('gulp-concat');\r\nconst sass = require('gulp-sass');\r\nsass.compiler = require('node-sass');\r\n\r\ngulp.task('scripts', function() {\r\n  return gulp.src('js\/**\/*.js')\r\n    .pipe(concat('scripts.js'))\r\n    .pipe(gulp.dest('js'))\r\n    .pipe(uglify())\r\n    .pipe(gulp.dest('js'))\r\n});\r\n\r\ngulp.task('sass', function () {\r\n  return gulp.src('*.scss')\r\n      .pipe( sass() )\r\n      .pipe( gulp.dest('css') );\r\n});\r\n\r\ngulp.task('automate', function() {\r\n    gulp.watch(['*.scss', 'js\/**\/*.js'], gulp.parallel('sass', 'scripts'));\r\n});\r\n\r\n\r\ngulp.task('default', ['scripts', 'styles']);<\/pre>\n<p>If you type <code>gulp scripts<\/code> into the terminal, all javascript files within the js directory will be concatenated, output to the main directory, then uglified and saved to the main directory.<\/p>\n<p>If you type <code>gulp sass<\/code>, all your scss files will be compiled and saved to the css directory.<\/p>\n<p>If you type <code>gulp<\/code> (the default task), your <code>scripts<\/code> task will be run, followed by your <code>styles<\/code> task.<\/p>\n<p>The <code>gulp automate<\/code> task watches multiple folders for changes in our scss and js files and will perform both tasks we\u2019ve defined, if a change is detected.<\/p>\n<h2>Overview<\/h2>\n<p>Using Gulp is not difficult, in fact, many people prefer it over <a target=\"_blank\" href=\"https:\/\/gruntjs.com\/\" rel=\"noopener noreferrer\">Grunt<\/a> because of its simpler syntax. Remember the steps to take when creating a new automation:<\/p>\n<ul>\n<li>Search for plugin<\/li>\n<li>Install plugin<\/li>\n<li>Require plugin in your Gulpfile<\/li>\n<li>Use the syntax in the documentation<\/li>\n<\/ul>\n<p>The five commands available in Gulp (task, run, watch, src, dest) are the only ones you need to know, all third party addons have great documentation. Here\u2019s a list of some things I use which you could get started with right now:<\/p>\n<ul>\n<li>Optimizing images with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-image-optimization\" rel=\"noopener noreferrer nofollow\">gulp-image-optimization<\/a><\/li>\n<li>Creating image sprites with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-sprite\" rel=\"noopener noreferrer nofollow\">gulp-sprite<\/a><\/li>\n<li>Concatenating files with <a target=\"_blank\" href=\"https:\/\/github.com\/gulp-community\/gulp-concat\" rel=\"noopener noreferrer\">gulp-concat<\/a><\/li>\n<li>Minifying files with <a target=\"_blank\" href=\"https:\/\/github.com\/terinjokes\/gulp-uglify\" rel=\"noopener noreferrer\">gulp-uglify<\/a><\/li>\n<li>Deleting files with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/del\/\" rel=\"noopener noreferrer nofollow\">gulp-del<\/a><\/li>\n<li>Javascript linting with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-jslint\/\" rel=\"noopener noreferrer nofollow\">gulp-jslint<\/a><\/li>\n<li>JSON linting with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-jsonlint\/\" rel=\"noopener noreferrer nofollow\">gulp-jsonlint<\/a><\/li>\n<li>Autoprefix CSS with <a target=\"_blank\" href=\"https:\/\/npmjs.org\/package\/gulp-autoprefixer\/\" rel=\"noopener noreferrer\">gulp-autoprefixer<\/a><\/li>\n<li>Search and replace using <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-frep\/\" rel=\"noopener noreferrer nofollow\">gulp-frep<\/a><\/li>\n<li>Minify CSS with <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/gulp-minify-css\" rel=\"noopener noreferrer nofollow\">gulp-minify-css<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you\u2019re a developer or a designer who creates HTML wireframes now and then, I encourage you to dig in. In this article we\u2019ll look at the basics of using Gulp \u2014 from installation&hellip;<\/p>\n","protected":false},"author":143,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3497,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started With Gulp.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you&#039;re a developer or a designer who\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started With Gulp.js\" \/>\n<meta property=\"og:description\" content=\"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you&#039;re a developer or a designer who\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-06T15:12:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg\" \/>\n<meta name=\"author\" content=\"Daniel Pataki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Pataki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/\"},\"author\":{\"name\":\"Daniel Pataki\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\"},\"headline\":\"Getting Started With Gulp.js\",\"datePublished\":\"2020-03-06T15:12:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/\"},\"wordCount\":1278,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-with-gulp-js\\\/npm-v.jpg\",\"keywords\":[\"Javascript Library\",\"Javascripts\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/\",\"name\":\"Getting Started With Gulp.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-with-gulp-js\\\/npm-v.jpg\",\"datePublished\":\"2020-03-06T15:12:38+00:00\",\"description\":\"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you're a developer or a designer who\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-with-gulp-js\\\/npm-v.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/getting-started-with-gulp-js\\\/npm-v.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getting-started-with-gulp-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started With Gulp.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\",\"name\":\"Daniel Pataki\",\"description\":\"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.\",\"sameAs\":[\"http:\\\/\\\/danielpataki.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/danielpataki\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started With Gulp.js - Hongkiat","description":"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you're a developer or a designer who","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started With Gulp.js","og_description":"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you're a developer or a designer who","og_url":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-03-06T15:12:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg","type":"","width":"","height":""}],"author":"Daniel Pataki","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Daniel Pataki","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/"},"author":{"name":"Daniel Pataki","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc"},"headline":"Getting Started With Gulp.js","datePublished":"2020-03-06T15:12:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/"},"wordCount":1278,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg","keywords":["Javascript Library","Javascripts"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/","url":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/","name":"Getting Started With Gulp.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg","datePublished":"2020-03-06T15:12:38+00:00","description":"Gulp is a tool which allows you to automate bits of your workflow which can literally save you hours a day. Whether you're a developer or a designer who","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/getting-started-with-gulp-js\/npm-v.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/getting-started-with-gulp-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started With Gulp.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc","name":"Daniel Pataki","description":"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.","sameAs":["http:\/\/danielpataki.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/danielpataki\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-63C","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/143"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23288"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23288\/revisions"}],"predecessor-version":[{"id":49450,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23288\/revisions\/49450"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23288"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}