{"id":1325,"date":"2016-01-14T00:15:14","date_gmt":"2016-01-13T19:15:14","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=1325"},"modified":"2018-11-22T04:59:57","modified_gmt":"2018-11-21T23:59:57","slug":"introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/","title":{"rendered":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate"},"content":{"rendered":"<div class=\"alert green\">While this article is still helpful for beginners. It is a bit outdated. WPGulp has evolved a lot. Make sure you read the official documentation at <a href=\"https:\/\/github.com\/ahmadawais\/wpgulp\/\">WPGulp&#8217;s GitHub Repo<\/a> \u2014 I&#8217;d ask you to star the repository to keep up with the updates.<\/div>\n<p>So, you have never used <a href=\"http:\/\/gulpjs.com\/\" rel=\"nofollow\">Gulp<\/a> before? I am here to help you get started. Yes! You can use WPGulp and ask as many questions \u2014 in the comments below \u2014 as you want. And I will make sure you get a kick-start in professional WordPress Development.<\/p>\n<blockquote><p><em>JUST A NOTE!<\/em><br \/>\n\ud83d\udc68\u200d\ud83d\udcbb I&#8217;m teaching thousands of devs how to become <a href=\"https:\/\/VSCode.pro\/\" target=\"_blank\">VSCode Power Users<\/a> \u2192<br \/>\n\u2705 This site is super fast?! <a href=\"https:\/\/kinsta.com\/?kaid=WMDAKYHJLNJX&amp;utm_source=TheDevCouple&amp;utm_medium=Partner\">It&#8217;s hosted with Kinsta on Google servers \u2192<\/a>\n<\/p><\/blockquote>\n<p>I have had been using Gulp for over two years now. Gulp makes things easier; it is simple to use JavaScript-based task runner. You can use Gulp to automate bits of your workflow.<\/p>\n<p>If you are a <a href=\"https:\/\/ahmadawais.com\/subscribe\/\">subscriber to this blog<\/a>, then you might have come across <a href=\"https:\/\/ahmadawais.com\/my-advanced-gulp-workflow-for-wordpress-themes\/\">my Advanced Gulp Workflow for WordPress Themes<\/a>. My workflow has changed a lot since then, but you can still get a pretty good idea of just how powerful Gulp is.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">I open sourced my advanced gulp workflow which I use while building premium WordPress themes <a href=\"http:\/\/t.co\/evardVlS5O\">http:\/\/t.co\/evardVlS5O<\/a> <a href=\"http:\/\/t.co\/wawo4z1qES\">pic.twitter.com\/wawo4z1qES<\/a><\/p>\n<p>&mdash; Ahmad Awais (@MrAhmadAwais) <a href=\"https:\/\/twitter.com\/MrAhmadAwais\/status\/635616046498598912?ref_src=twsrc%5Etfw\">August 24, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>I wrote about Gulp in August, this last year. To my surprise, what I thought was a mere <code>brain_dump()<\/code> turned out to be a popular post in the <a href=\"https:\/\/ahmadawais.com\/my-vision-wordpress-collaboration-over-competition\/\">WordPress community<\/a>. Most of the feedback was pretty great, but quite a few people asked for a beginner-friendly version of that post.<\/p>\n<p>While I was thinking of building a boilerplate for Gulp, one of my friends <a href=\"https:\/\/twitter.com\/royboy789\">Roy Sivan<\/a> invited me over to talk about <a href=\"http:\/\/www.thewpcrowd.com\/podcast\/episode-018-gulp-grunt-wordpress\/\">Grunt vs. Gulp which is best for your WordPress build?<\/a> at a podcast called TheWPCrowd. For that podcast, I created this boilerplate and named it WPGulp.<\/p>\n<h2 id=\"introducing-wpgulp\">Introducing <a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\">WPGulp<\/a><a href=\"#introducing-wpgulp\" class=\"heading-link\">#<\/a><\/h2>\n<div class=\"alert gray\">Make sure you <a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\" target=\"_blank\" rel=\"noopener\">star the WPGulp GitHub Repo<\/a> for updates!<\/div>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\">WPGulp<\/a> is a Gulp boilerplate for your WordPress project (type agnostic i.e. works for both WP plugins and themes). Right now, it is built with beginners in mind, but in the long run, I have plans to put more branches at this repository with portable Gulp tasks. So, go ahead and <a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\">Star<\/a> the repository. (Or follow me at <a href=\"https:\/\/github.com\/ahmadawais\/\">GitHub<\/a>).<\/p>\n<p>WPGulp Boilerplate is a simple implementation of Gulp for WordPress. It implements following tasks:<\/p>\n<ul>\n<li>Sass to CSS conversion<\/li>\n<li>JS concatenation<\/li>\n<li>Watch files for changes<\/li>\n<\/ul>\n<h3 id=\"step-0-beginners-get-started-here\">Step #0: Beginners Get Started Here!<a href=\"#step-0-beginners-get-started-here\" class=\"heading-link\">#<\/a><\/h3>\n<p>Let&#8217;s begin with the configuration. Since we are discussing Gulp here, I&#8217;d like to avoid any explanations related to Node, Terminal, Git, etc. When I started using build tools, I didn&#8217;t know anything about these terms except their names, of course. So, you need not to worry about it. Once you set it up, you&#8217;ll look back at your old projects and will laugh out loud at yourself (Too soon?).<\/p>\n<p>P.S. I&#8217;m a Mac user, and all these configurations are meant for a Mac user. But I&#8217;m sure you can find more info about Windows or Linux based setup online.<\/p>\n<h3 id=\"step-1-installing-node-npm-node-package-manager\">Step #1: Installing Node &amp; NPM Node Package Manager<a href=\"#step-1-installing-node-npm-node-package-manager\" class=\"heading-link\">#<\/a><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1332\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-1024x920.png\" alt=\"Node &amp; NPM\" width=\"1024\" height=\"920\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-1024x920.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-300x270.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-768x690.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-860x773.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-680x611.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-400x360.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM-50x45.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Node-NPM.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Before you start using Gulp, you need to install Node, which will also install NPM i.e. Node Package Manager. You only need to install this once. Node.js can be downloaded for Mac, Windows, and Linux at <a href=\"http:\/\/nodejs.org\/download\/\">nodejs.org\/download\/<\/a>. You can also <a href=\"https:\/\/github.com\/joyent\/node\/wiki\/Installing-Node.js-via-package-manager\">install it from the command line<\/a> using a package manager.<\/p>\n<p>Once you have installed Node, open the terminal and enter:<\/p>\n<pre><code>node -v<\/code><\/pre>\n<p>The installed Node.js version number will be displayed. You can do the same for npm \u2014 the Node.js package manager \u2014 which is used to install modules.<\/p>\n<pre class=\" language-undefined\"><code class=\"language- language-undefined\">npm -v<\/code><\/pre>\n<p>If either command fails, check you\u2019ve typed that command in lowercase. Still no good? Verify you installed Node.js correctly.<\/p>\n<h3 id=\"step-2-lets-install-gulp\">Step #2: Let&#8217;s Install Gulp<a href=\"#step-2-lets-install-gulp\" class=\"heading-link\">#<\/a><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1333\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-1024x920.png\" alt=\"Gulp\" width=\"1024\" height=\"920\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-1024x920.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-300x270.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-768x690.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-860x773.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-680x611.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-400x360.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp-50x45.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Gulp.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Gulp needs to be installed globally in your OS before you start using it in a project. You can install it with the following command.<\/p>\n<pre class=\" language-undefined\"><code class=\"language- language-undefined\">sudo npm install gulp -g<\/code><\/pre>\n<p>The <code class=\"language- language-undefined\">-g <\/code>specifies that the install is global. Now, verify that Gulp has been installed by the following command:<\/p>\n<pre class=\" language-undefined\"><code class=\"language- language-undefined\">gulp -v<\/code><\/pre>\n<h3 id=\"step-3-setup-your-wordpress-project\">Step #3: Setup Your WordPress Project<a href=\"#step-3-setup-your-wordpress-project\" class=\"heading-link\">#<\/a><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1334\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-1024x920.png\" alt=\"Clone the repo\" width=\"1024\" height=\"920\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-1024x920.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-300x270.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-768x690.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-860x773.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-680x611.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-400x360.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone-50x45.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/Clone.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Go to your WordPress project (plugin or theme) folder and download both <code class=\"language- language-undefined\"><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a><\/code> and <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/package.json\">package.json<\/a><\/code> files in the root. Or else if you are starting a new project, then you can just clone the WPGulp repository and start from there. Just like I did in the screenshot above. I created a folder <code class=\"language- language-undefined\">WP-Project<\/code> and cloned WPGulp repo inside it.<\/p>\n<h3 id=\"step-4-understanding-the-package-json-file\">Step #4: Understanding the <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/package.json\">package.json<\/a><\/code> File<a href=\"#step-4-understanding-the-package-json-file\" class=\"heading-link\">#<\/a><\/h3>\n<p>The Package.json is the file which is used by NPM to manage the packages for your project. You create it in your project by <code>npm init<\/code> command. After installing Gulp globally and creating a package.json file via <code>npm init<\/code> command, you can install gulp via this command <code class=\"language- language-undefined\">npm install gulp --save-dev<\/code>. This will install Gulp and will automatically save it in the package.json file.<\/p>\n<p>But with WPGulp you can ignore all that since that&#8217;s what a boilerplate does, you get a pre-built package.json file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/c5bc4c00308c0c145863.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/c5bc4c00308c0c145863\">Gist<\/a>.<\/noscript><\/div>\n<p>The <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/package.json\">package.json<\/a><\/code> file in WPGulp is pretty much self-explanatory. There are project related details from line #1 to line #9 which you need to change, and after that, there are devDependencies from line #10 to line #22 which you don&#8217;t need to change. You don&#8217;t need to edit anything after line #9. These are the gulp plugins we will install in our project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1335\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-1024x920.png\" alt=\"npm install\" width=\"1024\" height=\"920\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-1024x920.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-300x270.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-768x690.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-860x773.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-680x611.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-400x360.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install-50x45.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/npm-install.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>So, after adding both <code class=\"language- language-undefined\"><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a><\/code> and <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/package.json\">package.json<\/a><\/code> files in the root folder of your WP Project, run the following command.<\/p>\n<pre><code>sudo npm install<\/code><\/pre>\n<p>This will create a <code>node_modules<\/code> folder (where Gulp and plug-in code resides) within your WordPress project folder, which in my case is <code class=\" language-undefined\">WP-Project<\/code> . The above screenshot shows everything got installed without any error. You can ignore the warnings (if any show up in the terminal while installation is being run).<\/p>\n<h3 id=\"step-5-understanding-gulp\">Step #5: Understanding Gulp<a href=\"#step-5-understanding-gulp\" class=\"heading-link\">#<\/a><\/h3>\n<p>Gulp needs a <code class=\"language- language-undefined\">gulpfile.js<\/code> file in the root folder of your project to work. I started using Gulp only because it made more sense to write code over configuration (since Grunt has a JSON-like syntax while Gunt is JavaScript).<\/p>\n<p>The Gulp API contains only <strong>4 top level functions<\/strong>. Which are:<\/p>\n<ul>\n<li><code>gulp.task <\/code>Defines your tasks.<\/li>\n<li><code>gulp.src <\/code>Points to the files you want to use i.e. the source.<\/li>\n<li><code>gulp.dest <\/code>Points to the output folder i.e. the destination.<\/li>\n<li><code>gulp.watch <\/code>Helps watch files for changes i.e. File change can trigger a particular task E.g. Change in a CSS file can trigger the <code>styles<\/code> task.<\/li>\n<\/ul>\n<p>That&#8217;s it. No you know almost everything there is to Gulp. Think of Gulp as a stream of data; you can input anything anywhere in the stream and take an output of anything anywhere along the way (Confused? Let it go). <code>gulp.src<\/code> uses <code>.pipe<\/code> for chaining its output.<\/p>\n<h3 id=\"step-6-understanding-the-gulpfile-js-file\">Step #6: Understanding the <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a><\/code> File<a href=\"#step-6-understanding-the-gulpfile-js-file\" class=\"heading-link\">#<\/a><\/h3>\n<p>Let&#8217;s take a look at the <code class=\"language- language-undefined\"><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a><\/code> file present in WPGulp. I have built a portable file which can be used with any WordPress project. It consists of following portions<\/p>\n<ol>\n<li><strong>Configuration<\/strong>: Project Configuration for gulp tasks.<\/li>\n<li><strong>Load Plugins<\/strong>: Load gulp plugins and assign them semantic names.<\/li>\n<li><strong>Task <code>styles<\/code><\/strong>: Compiles Sass, Autoprefixes it and Minifies CSS.<\/li>\n<li><strong>Task <code>vendorJS<\/code><\/strong>: Concatenate and uglify vendor JS scripts.<\/li>\n<li><strong>Task <code>customJS<\/code><\/strong>: Concatenate and uglify custom JS scripts.<\/li>\n<li><strong>Watch <code>default<\/code> Task<\/strong>: Watch for file changes and run specific tasks.<\/li>\n<\/ol>\n<h4 id=\"1-configuration\">#1: Configuration<a href=\"#1-configuration\" class=\"heading-link\">#<\/a><\/h4>\n<p>In this portion, you can define where your files are present and where you want to store the output. And which files you want Gulp to watch for changes. Read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/8230af1d9be07652bc1e.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/8230af1d9be07652bc1e\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"2-load-plugins\">#2: <strong>Load Plugins<\/strong><a href=\"#2-load-plugins\" class=\"heading-link\">#<\/a><\/h4>\n<p>All the plugins that are being loaded are present in this portion. One could use the <a href=\"https:\/\/www.npmjs.com\/package\/gulp-load-plugins\">gulp-load-plugins<\/a> package to load plugins, but I like to keep control of what is getting included and what isn&#8217;t, which is why I choose to include plugins this way. It also helps in debugging while updating Node or any other package. Read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/f1235a1468fec3605425.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/f1235a1468fec3605425\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"3-task-styles\">#3: <strong>Task <code>styles<\/code><\/strong><a href=\"#3-task-styles\" class=\"heading-link\">#<\/a><\/h4>\n<p>Make sure that your WordPress theme base stylesheet begins with <code>\/**!<\/code> otherwise, the minifycss might remove the WordPress comment at the top. Which could render the theme useless since WP won&#8217;t recognize it as a theme. You can check a demo WordPress theme implementation of WPGulp at <a href=\"https:\/\/github.com\/ahmadawais\/WPGulpTheme\">WPGulpTheme<\/a>. Moreover, read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/5311fd098827a63a1c67.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/5311fd098827a63a1c67\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"4-task-vendorjs\">#4: <strong>Task <code>vendorJS<\/code><\/strong><a href=\"#4-task-vendorjs\" class=\"heading-link\">#<\/a><\/h4>\n<p>Concatenating JavaScripts and uglifying them can help speed up the page load time. Read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/0e7ff94af94495a0cd16.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/0e7ff94af94495a0cd16\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"5-task-customjs\">#5: <strong>Task <code>customJS<\/code><\/strong><a href=\"#5-task-customjs\" class=\"heading-link\">#<\/a><\/h4>\n<p>Same here, concatenating JavaScripts and uglifying them can help speed up the page load time.Read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/62b69643602806693320.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/62b69643602806693320\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"6-watch-default-task\">#6: <strong>Watch <code>default<\/code> Task<\/strong><a href=\"#6-watch-default-task\" class=\"heading-link\">#<\/a><\/h4>\n<p>Finally the default task, which will trigger all the other tasks in our file. Read the comments to understand the code below.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/d45556422a4ed06cd046.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/d45556422a4ed06cd046\">Gist<\/a>.<\/noscript><\/div>\n<p>That&#8217;s all there is.<\/p>\n<h3 id=\"the-complete-code-of-gulpfile-js\">The Complete Code of <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a><\/code><a href=\"#the-complete-code-of-gulpfile-js\" class=\"heading-link\">#<\/a><\/h3>\n<p>Here&#8217;s the complete code of the <code><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/blob\/master\/gulpfile.js\">gulpfile.js<\/a> <\/code>file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/3baaa0b8a3f59d5f603b.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/3baaa0b8a3f59d5f603b\">Gist<\/a>.<\/noscript><\/div>\n<h3 id=\"step-7-running-gulp\">Step #7: Running Gulp<a href=\"#step-7-running-gulp\" class=\"heading-link\">#<\/a><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1337\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-1024x887.png\" alt=\"run gulp\" width=\"1024\" height=\"887\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-1024x887.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-300x260.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-768x666.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-860x745.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-680x589.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-400x347.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run-50x43.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/gulp-run.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Finally, after configuring the gulpfile.js, you need to run the gulp command, which will run the default task, which in turns triggers the styles, vendorsJs, customJS tasks and finally starts watching your .scss and .js files. So, here is the command:<\/p>\n<pre><code>gulp<\/code><\/pre>\n<h2 id=\"looking-forward\">Looking Forward!<a href=\"#looking-forward\" class=\"heading-link\">#<\/a><\/h2>\n<p>Whew! That was a lot. Looking forward to your comments. Let me know if I missed something or if you didn&#8217;t understand a step or two.<\/p>\n<p>Here are the resource links, just in case<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\">WPGulp<\/a>: Gulp WordPress Boilerplate.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/WPGulpTheme\">WPGulpTheme<\/a>: You can check a demo WordPress theme implementation with WPGulp.<\/li>\n<li><a href=\"https:\/\/ahmadawais.com\/my-advanced-gulp-workflow-for-wordpress-themes\/\">My Advanced Gulp Workflow for WordPress Themes<\/a><\/li>\n<\/ul>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h2 id=\"wpgulp-updates\">WPGulp UPDATES:<a href=\"#wpgulp-updates\" class=\"heading-link\">#<\/a><\/h2>\n<p>Since I wrote this article, WPGulp has grown a lot and it now supports the following tasks.<\/p>\n<h3 id=\"what-can-wpgulp-do\">What Can WPGulp Do?<a href=\"#what-can-wpgulp-do\" class=\"heading-link\">#<\/a><\/h3>\n<ol>\n<li>Live reloads browser with BrowserSync<\/li>\n<li>CSS: Sass to CSS conversion, error catching, Autoprefixing, Source maps, CSS minification, and Merge Media Queries.<\/li>\n<li>JS: Concatenates &amp; uglifies Vendor and Custom JS files.<\/li>\n<li>Images: Minifies PNG, JPEG, GIF and SVG images.<\/li>\n<li>Watches files for changes in CSS or JS<\/li>\n<li>Watches files for changes in PHP.<\/li>\n<li>Corrects the line endings.<\/li>\n<li>InjectCSS instead of browser page reload.<\/li>\n<li>Generates a .pot file for i18n and l10n.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<div class=\"alert green\">While this article is still helpful for beginners. It is a bit outdated. WPGulp has evolved a lot. Make sure you read the official documentation at <a href=\"https:\/\/github.com\/ahmadawais\/wpgulp\/\">WPGulp&#8217;s GitHub Repo<\/a> \u2014 I&#8217;d ask you to star the repository to keep up with the updates.<\/div>\n<p>If you liked what you read, <a href=\"https:\/\/twitter.com\/mrahmadawais\/status\/687354388143300609\">Tweet about WPGulp<\/a> and subscribe to my WordPress newsletter below.<\/p>\n<blockquote><p><em>JUST A NOTE!<\/em><br \/>\n\ud83d\udc68\u200d\ud83d\udcbb I&#8217;m teaching thousands of devs how to become <a href=\"https:\/\/VSCode.pro\/\" target=\"_blank\">VSCode Power Users<\/a> \u2192<br \/>\n\u2705 This site is super fast?! <a href=\"https:\/\/kinsta.com\/?kaid=WMDAKYHJLNJX&amp;utm_source=TheDevCouple&amp;utm_medium=Partner\">It&#8217;s hosted with Kinsta on Google servers \u2192<\/a>\n<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>So, you have never used Gulp before? I am here to help you get started. Yes! You can use WPGulp and ask as many questions \u2014 in the comments below \u2014 as you want. And I will make sure you get a kick-start in professional WordPress Development.<\/p>\n","protected":false},"author":2,"featured_media":1340,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[181,10],"tags":[115,114],"class_list":["post-1325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-wordpress","tag-wordpress-gulp","tag-wpgulp"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate<\/title>\n<meta name=\"description\" content=\"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-13T19:15:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-21T23:59:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1650\" \/>\n\t<meta property=\"og:image:height\" content=\"1015\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate\",\"datePublished\":\"2016-01-13T19:15:14+00:00\",\"dateModified\":\"2018-11-21T23:59:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/\"},\"wordCount\":1808,\"commentCount\":41,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/WPGulp.png\",\"keywords\":[\"WordPress Gulp\",\"WPGulp\"],\"articleSection\":[\"JavaScript\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/\",\"name\":\"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/WPGulp.png\",\"datePublished\":\"2016-01-13T19:15:14+00:00\",\"dateModified\":\"2018-11-21T23:59:57+00:00\",\"description\":\"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/WPGulp.png\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/WPGulp.png\",\"width\":1650,\"height\":1015,\"caption\":\"WPGulp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate","description":"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.","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:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/","og_locale":"en_US","og_type":"article","og_title":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate","og_description":"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.","og_url":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2016-01-13T19:15:14+00:00","article_modified_time":"2018-11-21T23:59:57+00:00","og_image":[{"width":1650,"height":1015,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","type":"image\/png"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate","datePublished":"2016-01-13T19:15:14+00:00","dateModified":"2018-11-21T23:59:57+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/"},"wordCount":1808,"commentCount":41,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","keywords":["WordPress Gulp","WPGulp"],"articleSection":["JavaScript","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/","url":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/","name":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","datePublished":"2016-01-13T19:15:14+00:00","dateModified":"2018-11-21T23:59:57+00:00","description":"Learn how to use Gulp with WordPress and\u00a0kick-start your professional WordPress Development. WPGulp is a Gulp WordPress Boilerplate.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","width":1650,"height":1015,"caption":"WPGulp"},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/introducing-wpgulp-an-easy-to-use-wordpress-gulp-boilerplate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/01\/WPGulp.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/1325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=1325"}],"version-history":[{"count":4,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/1325\/revisions"}],"predecessor-version":[{"id":5081,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/1325\/revisions\/5081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/1340"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=1325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=1325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=1325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}