{"id":1337,"date":"2018-01-08T19:11:33","date_gmt":"2018-01-09T00:11:33","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1337"},"modified":"2018-01-08T19:18:07","modified_gmt":"2018-01-09T00:18:07","slug":"javascript-create-gulp-tasks","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-create-gulp-tasks\/","title":{"rendered":"JavaScript: How to create Gulp tasks"},"content":{"rendered":"<p>Once we&#8217;ve confirmed that Gulp is installed in our project:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"OJVOR117s2\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-install-gulp-via-npm\/\">JavaScript: How to install Gulp via NPM<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-install-gulp-via-npm\/embed\/#?secret=OJVOR117s2\" data-secret=\"OJVOR117s2\" width=\"600\" height=\"338\" title=\"&#8220;JavaScript: How to install Gulp via NPM&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>we are ready to start using Gulp to see what it can do.<\/p>\n<p><strong>Step 1: Create a gulpfile.js file<\/strong><\/p>\n<p>In the root directory of our project, we need to create a file called &#8220;gulpfile.js&#8221;. This file will contain all of our Gulp task definitions. Add this line to the top of the file, which essentially &#8220;imports&#8221; the gulp package:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var gulp = require('gulp');<\/pre>\n<p>Then type this command in the bash window:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">gulp<\/pre>\n<p>Notice that gulp is looking for a \u2018default\u2019 task.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" id=\"img_ds\" class=\"alignnone wp-image-1338 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_missing_default.png\" alt=\"\" width=\"675\" height=\"78\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_missing_default.png 675w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_missing_default-300x35.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 2: Create a default task<br \/>\n<\/strong><\/p>\n<p>Now add this code to the gulpfile.js:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">gulp.task('default', function() {\r\n    console.log(\"Hooray- you created a Gulp task.\")\r\n});\r\n<\/pre>\n<p>Then run the gulp command again:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">gulp<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" id=\"img_ds\" class=\"alignnone wp-image-1339 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_default.png\" alt=\"\" width=\"675\" height=\"94\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_default.png 675w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_default-300x42.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/p>\n<p>Notice that since this is the default gulp task, I didn&#8217;t need to specify the task in the command window. Just \u2018gulp\u2019 is all it took to execute this task.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 3: Create a named task<br \/>\n<\/strong><\/p>\n<p>Add this code to the gulpfile.js:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">gulp.task('html', function() {\r\n    console.log(\"Imagine something useful being done to your HTML here.\")\r\n});\r\n<\/pre>\n<p>Then run this gulp command. Notice that I used the name of the task in the command this time:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">gulp html<\/pre>\n<p>Which yields:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" id=\"img_ds\" class=\"alignnone wp-image-1344 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_html_task.png\" alt=\"\" width=\"676\" height=\"89\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_html_task.png 676w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_html_task-300x39.png 300w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>For more information about using Gulp, see:<br \/>\n<a href=\"https:\/\/www.tutorialspoint.com\/gulp\/index.htm\">https:\/\/www.tutorialspoint.com\/gulp\/index.htm<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once we&#8217;ve confirmed that Gulp is installed in our project: JavaScript: How to install Gulp via NPM we are ready to start using Gulp to see what it can do. Step 1: Create a gulpfile.js file In the root directory of our project, we need to create a file called &#8220;gulpfile.js&#8221;. This file will contain &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-create-gulp-tasks\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: How to create Gulp tasks<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[92,45,91],"class_list":["post-1337","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-gulp","tag-javascript","tag-npm"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1337"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1337\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1337\/revisions\/1389"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}