{"id":53921,"date":"2016-07-15T16:09:12","date_gmt":"2016-07-15T16:09:12","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=53921"},"modified":"2024-04-03T10:54:45","modified_gmt":"2024-04-03T10:54:45","slug":"compiling-less-file-gulp","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/","title":{"rendered":"Compiling less file with Gulp"},"content":{"rendered":"\n<p>We are hoping that we all know about CSS then let&#8217;s start with\u00a0CSS pre-processors.<br>What do PreProcessor mean?<br>In computers, we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program.<\/p>\n\n\n\n<p>so the Question is How do pre-processors relate to css what is the use of preprocessors in css and how do it works in css ..?<br>There were always a need of a tool<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>that makes the messy code clean and structured.<\/li>\n\n\n\n<li>that instead of writing same code again and again and can define some variables and reuse them.<\/li>\n\n\n\n<li>that can extend another css class (Mixins) into base class or we can use less functions.<\/li>\n<\/ul>\n\n\n\n<p>if you are realy eager to learn <strong>Less<\/strong> You can visit their official site <a href=\"http:\/\/lesscss.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">lesscss.org<\/a><br>What actually happen is we have to compile less file into css .The easiest way to install Less on the server is by using npm . but npm package manager has a dependency with node.js<br>We will see step by step<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Install Node<\/h3>\n<\/div><\/div>\n\n\n\n<p>You need to install Node.js package ecosystem from\u00a0<a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/nodejs.org\/en\/<\/a><\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Install Npm<\/h3>\n<\/div><\/div>\n\n\n\n<p>After you have downloaded node.js &nbsp;you have open node js terminal&nbsp;and type<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install npm -g<\/pre>\n\n\n\n<p>on Windows for Linux users you can run same command from&nbsp;default&nbsp;terminal<br>You can check if node and npm are installed or not by using<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">node -v and npm -v<\/pre>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Install Less Using Npm<\/h3>\n<\/div><\/div>\n\n\n\n<pre class=\"EnlighterJSRAW\">&nbsp;npm install -g less<\/pre>\n\n\n\n<p>less provide a compiler called <strong>lessc&nbsp;<\/strong>by using it we can compile less file into css as browser only reads or understand css<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">lessc style.less style.css<\/pre>\n\n\n\n<p>there are some other command as well like less watch you need to install less watcher as well before using it and clean css for creating minified css file<\/p>\n\n\n\n<p>Now the process is almost over but&nbsp;still we are not satisfied&nbsp;with it and we will use some other tool that will handle less<\/p>\n\n\n\n<p>we will now start using Gulp with less.<\/p>\n\n\n\n<p>Gulp is generally known as&nbsp;build tool where we define single or multiple tasks at a time which help us to perform multiple activities at a time<\/p>\n\n\n\n<p>There are thousands of npm packages available on npm one of the important package we will try to use today is GULP<\/p>\n\n\n\n<p>step by&nbsp;step :-<\/p>\n\n\n\n<p>We need to install node.js&nbsp;and then we will install npm after then follow these steps :-<\/p>\n\n\n\n<p>create a directory <strong>draft<\/strong> and inside it create another directory called <strong>dev<\/strong>&nbsp;in your localhost when you are inside directory dev<\/p>\n\n\n\n<p>install gulp<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install gulp -g<\/pre>\n\n\n\n<p>this command will generate node_module folder globally<\/p>\n\n\n\n<p>now run<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm init<\/pre>\n\n\n\n<p>After executing this command terminal&nbsp;will ask some details about your project<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318.png\" alt=\"Screenshot from 2016-07-14 19:03:18\" class=\"wp-image-54447\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190318-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>Now execute command<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install gulp --save-dev<\/pre>\n\n\n\n<p>This whole process will generate package.json file in parallel to your node_modules folder<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244.png\" alt=\"Screenshot from 2016-07-14 19:02:44\" class=\"wp-image-54448\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190244-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>After installing gulp you can also download packages which are required like gulp-less, browser-sync<\/p>\n\n\n\n<p>try using these commands on your terminal<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install gulp-less --save-dev\n\nnpm install browser-sync --save-dev<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904.png\" alt=\"Screenshot from 2016-07-14 19:09:04\" class=\"wp-image-54449\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-190904-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>Now all you need to do is setup you package.json file and create a gulpfile.js &nbsp;file in same directory<\/p>\n\n\n\n<p>if you want change\/update &nbsp;your package.json file you can change the values<\/p>\n\n\n\n<p>Create required directories for your project<\/p>\n\n\n\n<p>We have divided project into two &nbsp;directories one is your src and other is distro<\/p>\n\n\n\n<p>SRC :- Is the directory where your less file will be placed<\/p>\n\n\n\n<p>DISTRO :-&nbsp;&nbsp;will be directory&nbsp;where your compiled css file will be generated (distro\/css)<\/p>\n\n\n\n<p>Complete directory Structure is below :-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857.png\" alt=\"Screenshot from 2016-07-14 19:38:57\" class=\"wp-image-54451\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-193857-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>distro directory will consist of css and images directory and index.html file as shown below<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945.png\" alt=\"Screenshot from 2016-07-14 20:09:45\" class=\"wp-image-54461\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200945-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>Images directory will consist of required images for your project and css directory consist of your style.css file whereas src directory consist of only styles.less<\/p>\n\n\n\n<p>Now finally let&#8217;s define some task in gulpfile.js<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">var gulp = require(&#039;gulp&#039;);\nvar less = require(&#039;gulp-less&#039;); \nvar browserSync = require(&#039;browser-sync&#039;).create();\nvar reload      = browserSync.reload;\n\n\n\/* Task to compile less *\/\ngulp.task(&#039;compile-less&#039;, function() {  \n  gulp.src(&#039;.\/src\/style.less&#039;)\n    .pipe(less())\n    .pipe(gulp.dest(&#039;.\/distro\/css\/&#039;));\n}); \n\/* Task to watch less changes *\/\ngulp.task(&#039;watch-less&#039;, function() {  \n  gulp.watch(&#039;.\/src\/**\/*.less&#039; , &#091;&#039;compile-less&#039;]);\n});\n\ngulp.task(&#039;serve&#039;, function () {\n\n    \/\/ Serve files from the root of this project\n    browserSync.init({\n        server: {\n            baseDir: &quot;.\/distro\/&quot;\n        }\n    }); \n    gulp.watch(&quot;.\/src\/*.less&quot;).on(&quot;change&quot;, reload);\n    gulp.watch(&quot;.\/distro\/*.html&quot;).on(&quot;change&quot;, reload);\n});\n\n\/* Task when running `gulp` from terminal *\/\ngulp.task(&#039;default&#039;, &#091;&#039;watch-less&#039;, &#039;serve&#039;]);<\/pre>\n\n\n\n<p>we are actually defining task like <strong>watch-less and<\/strong>&nbsp;<strong>serve<\/strong> and required package are included at the top of the file<\/p>\n\n\n\n<p>gulp has 4 major functions :-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gulp.task<\/code><\/li>\n\n\n\n<li><code>gulp.src<\/code><\/li>\n\n\n\n<li><code>gulp.dest<\/code><\/li>\n\n\n\n<li><code>gulp.watch<\/code><\/li>\n<\/ul>\n\n\n\n<p>gulp.task :- basically defines the task and it takes 3 arguments Name of the task, Array of task, and callback function<br>gulp.src :- it links to a files that user wants to use<br>gulp.dest :- it links to a file where we want to generate the output<br>gulp.watch :- is used for watching the changes on the files or directory. It uses eventemitter name <b>change<\/b> which help the files to update for changes<br>As you can see the line gulp.task() we have an array of task (serve and watch-less)&nbsp;we can also pass a single task inside this method<\/p>\n\n\n\n<p>when less file is compiled and we have applied a watch for less file so that whenever there are some changes in less file then it will automatically compile less and update changes in css file<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Notice :- We Have Used Browser Sync Package . The Use Of Browser Sync Package Of Npm Is That \u00a0We Know Css File Is Included In Our Project By Using Link Tag . We Have Setup A Task That Whenever There Will Be A Change In Html And Css File Browser Will Automatically Reloaded And Changes Will Be Reflected Automatically On Browser We Don\u2019t Need To Reload Browser Each Time.<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now we have also setup gulfile.js<\/p>\n\n\n\n<p>Run your gulp task<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">gulp<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516.png\" alt=\"Screenshot from 2016-07-14 20:05:16\" class=\"wp-image-54486\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-200516-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<p>Once you have pressed<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">Ctrl+s<\/pre>\n\n\n\n<p>You will browser will automatically reloaded for the changes<\/p>\n\n\n\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-54487\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622.png\" alt=\"Screenshot from 2016-07-14 20:56:22\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622.png 1920w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Screenshot-from-2016-07-14-205622-1200x675.png 1200w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" loading=\"lazy\" \/><\/a><br>Thanks for reading hope it will help you \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are hoping that we all know about CSS then let&#8217;s start with\u00a0CSS pre-processors.What do PreProcessor mean?In computers, we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program. so the Question is How do pre-processors relate to css what <a href=\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":67,"featured_media":54692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3313,1895],"tags":[3348],"class_list":["post-53921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gulp","category-less","tag-gulp-using-less"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Compiling less file with Gulp - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Compiling less file with Gulp - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"We are hoping that we all know about CSS then let&#8217;s start with\u00a0CSS pre-processors.What do PreProcessor mean?In computers, we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program. so the Question is How do pre-processors relate to css what [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-15T16:09:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T10:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Webkul\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webkul\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\"},\"author\":{\"name\":\"Webkul\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/14f2bcf2d2b044589b35c23a46036b02\"},\"headline\":\"Compiling less file with Gulp\",\"datePublished\":\"2016-07-15T16:09:12+00:00\",\"dateModified\":\"2024-04-03T10:54:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\"},\"wordCount\":905,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png\",\"keywords\":[\"gulp using less\"],\"articleSection\":[\"Gulp\",\"LESS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\",\"url\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\",\"name\":\"Compiling less file with Gulp - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png\",\"datePublished\":\"2016-07-15T16:09:12+00:00\",\"dateModified\":\"2024-04-03T10:54:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Compiling less file with Gulp\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/14f2bcf2d2b044589b35c23a46036b02\",\"name\":\"Webkul\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b95a9889faa1ac8c620c762d0101c3a62e439d100e083ee7257caad54fa5305a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b95a9889faa1ac8c620c762d0101c3a62e439d100e083ee7257caad54fa5305a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Webkul\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/amit098\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Compiling less file with Gulp - Webkul Blog","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:\/\/webkul.com\/blog\/compiling-less-file-gulp\/","og_locale":"en_US","og_type":"article","og_title":"Compiling less file with Gulp - Webkul Blog","og_description":"We are hoping that we all know about CSS then let&#8217;s start with\u00a0CSS pre-processors.What do PreProcessor mean?In computers, we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program. so the Question is How do pre-processors relate to css what [...]","og_url":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-07-15T16:09:12+00:00","article_modified_time":"2024-04-03T10:54:45+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png","type":"image\/png"}],"author":"Webkul","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Webkul","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/"},"author":{"name":"Webkul","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/14f2bcf2d2b044589b35c23a46036b02"},"headline":"Compiling less file with Gulp","datePublished":"2016-07-15T16:09:12+00:00","dateModified":"2024-04-03T10:54:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/"},"wordCount":905,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png","keywords":["gulp using less"],"articleSection":["Gulp","LESS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/","url":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/","name":"Compiling less file with Gulp - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png","datePublished":"2016-07-15T16:09:12+00:00","dateModified":"2024-04-03T10:54:45+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/Gulp-Using-Less.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/compiling-less-file-gulp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Compiling less file with Gulp"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/14f2bcf2d2b044589b35c23a46036b02","name":"Webkul","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b95a9889faa1ac8c620c762d0101c3a62e439d100e083ee7257caad54fa5305a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b95a9889faa1ac8c620c762d0101c3a62e439d100e083ee7257caad54fa5305a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Webkul"},"url":"https:\/\/webkul.com\/blog\/author\/amit098\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=53921"}],"version-history":[{"count":46,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53921\/revisions"}],"predecessor-version":[{"id":475515,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53921\/revisions\/475515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/54692"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=53921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=53921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=53921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}