In our previous article we learned What is Gulp.js? And how it works?, that is why we will now focus on the configuration of common tasks using the plugins that Gulp.js offers us.

Here are some of Gulp.js’s most used plugins and their basic configurations:

GULP-CONCAT

Gulp.js plugin used to concatenate files. Concatenates files using the line break (newLine) from the operating system.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">concat
</span>

Then in our gulpfile.js we will wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    concat </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-concat'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'concatenate'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">([</span><span class="str">'./lib/1.js'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'./lib/2.js'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'./lib/3.js'</span><span class="pun">])</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'libs.js'</span><span class="pun">))</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'./dist/js/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the task concatenate.

<span class="pln">
gulp concatenate
</span>

To change the line break we simply pass an object as a second parameter, for example:

<span class="pln">
</span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'libs.js'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">newLine</span><span class="pun">:</span><span class="pln"> </span><span class="str">';'</span><span class="pun">}))</span><span class="pln">
</span>

With this we will concatenate the indicated files but instead of being separated by a line break, they will be separated by a semicolon (;).

GULP-STYLUS

Gulp.js plugin used to compile stylus (.styl) files to .css using the Stylus API.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">stylus
</span>

Then in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    stylus </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-stylus'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    stylus</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'stylus/**/*.styl'</span><span class="pun">],</span><span class="pln">
    css</span><span class="pun">:</span><span class="pln"> </span><span class="str">'public/css/'</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'estilos'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">stylus</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">stylus</span><span class="pun">({</span><span class="pln">
            compress</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
        </span><span class="pun">}))</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">css</span><span class="pun">));</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the task styles.

<span class="pln">
gulp Styles
</span>

Additionally, to the plugin we are passing as parameter an object {compress: true} to compress the resulting css.

GULP-COFFEE

Gulp.js plugin used to compile CoffeeScript (.coffee) files to .js using CoffeeScript.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">coffee
</span>

Then in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    coffee </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-coffee'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    coffee</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'coffee/**/*.coffee'</span><span class="pun">],</span><span class="pln">
    js</span><span class="pun">:</span><span class="pln"> </span><span class="str">'public/js/'</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'coffee'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">coffee</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">coffee</span><span class="pun">({</span><span class="pln">bare</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">}).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'error'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">err</span><span class="pun">){</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">err</span><span class="pun">.</span><span class="pln">name </span><span class="pun">+</span><span class="pln"> </span><span class="str">" en "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> err</span><span class="pun">.</span><span class="pln">plugin</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}))</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">js</span><span class="pun">));</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the task coffee.

<span class="pln">
gulp coffee
</span>

Additionally, the plugin is passing as a parameter a bare: true object to generate Javascript code without a wrapper.

CoffeeScript will issue an error for cases where the CoffeeScript syntax is invalid, which
is why we add the listener listener (‘error’, function (err) {} to be aware of any failure to compile.

If you are interested in going deeper into CoffeeScript here I leave you a pretty interesting link about CoffeeScript.

GULP-JADE

Gulp.js plugin used to compile .jade templates into .html files using the jade language API.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">jade
</span>

Then in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    jade </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-jade'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    jade</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'jade/**/*.jade'</span><span class="pun">],</span><span class="pln">
    html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'public/'</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'html'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">jade</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">jade</span><span class="pun">({</span><span class="pln">
        pretty</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
    </span><span class="pun">}))</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">html</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the html task.

<span class="pln">
gulp html
</span>

In addition to the plugin we are passing a {pretty: true}object in which we indicate that the generated HTML code is readable and is correctly tabulated.

As well as the pretty option, there are other options. You can find them in the official jade language API documentation.

And if you still have doubts about something like [‘jade / ** / *. Jade’] give a revised to this article.

GULP-RENAME

Gulp.js plugin that serves to rename files, is usually used to change file extensions.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">rename
</span>

Let’s use our html task as an example, so in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    jade </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-jade'</span><span class="pun">),</span><span class="pln">
    rename </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-rename'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    jade</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'jade/**/*.jade'</span><span class="pun">],</span><span class="pln">
    html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'public/'</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'html'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">jade</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">jade</span><span class="pun">({</span><span class="pln">
        pretty</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
    </span><span class="pun">}))</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">rename</span><span class="pun">({</span><span class="pln">extname</span><span class="pun">:</span><span class="pln"> </span><span class="str">'.phtml'</span><span class="pun">}))</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">html</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the html task .

<span class="pln">
gulp html
</span>

As we need to return files with the extension .phtml , then the plugin we pass as the only parameter the following object: {extname: ‘.phtml’} .

In which we tell the plugin that the new extension of the files will be .phtml .

GULP-UGLIFY

Gulp.js plugin that serves to compress JavaScript code with UglifyJS2 .

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">uglify
</span>

Then in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'min'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'source/scripts/*.js'</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">uglify</span><span class="pun">())</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'dist/scripts/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the min task .

<span class="pln">
gulp min
</span>

In our example, when you run the min task, it will compress all .js files into the source / scripts / folder and save them to the dist / scripts / folder.

This plugin has more options to customize the compression of the files and you can find them here.

GULP-IF

Gulp.js plugin that serves to conditionally control the flow of the execution of subtasks.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="kwd">if</span><span class="pln">
</span>

For this example we will use the min task, so in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">),</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-if'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> comprimir </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'min'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'source/scripts/*.js'</span><span class="pun">)</span><span class="pln">
               </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">compress</span><span class="pun">,</span><span class="pln"> uglify</span><span class="pun">()))</span><span class="pln">
               </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'dist/scripts/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the min task .

<span class="pln">
gulp min
</span>

In our example, when executing the min task, it will compress the files only if the variable compress is true, otherwise it will simply move to the next subtask.

If there are no more subtasks, the subtask will simply terminate.

GULP-DEBUG

Gulp.js plugin used to view information about vinyl format files (the format of files that go through the gulp.src ()method ).

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">debug
</span>

For this example we will use the min task, so in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">),</span><span class="pln">
    debug </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-debug'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'min'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'source/scripts/*.js'</span><span class="pun">)</span><span class="pln">
               </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">debug</span><span class="pun">({</span><span class="pln">verbose</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">})</span><span class="pln">
               </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'dist/scripts/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the min task.

<span class="pln">
gulp min
</span>

We pass the following object as the only parameter: {verbose: true} to show us the most possible information about each file.

This plugin is very useful to be able to detect errors, for example if a task is failing, with this plugin we perform a debugging of the task file by file, this will cause the task to stop right in the file that is giving us problems and in turn Will give us all related information.

GULP-IMAGEMIN

Gulp.js plugin that serves to minify PNG, JPEG, GIF and SVG images with imagein.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">imagemin
</span>

In our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> imagemin </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-imagemin'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'images'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">([</span><span class="str">'src/images/*.*'</span><span class="pun">])</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">imagemin</span><span class="pun">())</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'dist/images/'</span><span class="pun">));</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the images task.

<span class="pln">
gulp images
</span>

This plugin has more options to customize the compression of the images and you can find them here.

GULP-MINIFY-CSS

Gulp.js plugin used to minify css files with clean-css.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">minify</span><span class="pun">-</span><span class="pln">css
</span>

In our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    minifyCSS </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-minify-css'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'mincss'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'./source/css/*.css'</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">minifyCSS</span><span class="pun">())</span><span class="pln">
        </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'./dist/css/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we execute the mincss task.

<span class="pln">
gulp mincss
</span>

This plugin has more options for customizing css compression, taking clean-css and you can find them here.

GULP-RIMRAF

Gulp.js plugin used to delete files, directories, symbolic links, etc. It is generally used to clean the folders or files that we generate with some task, such as: Javascript compiled from CoffeeScript.

We installed it in our project.

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">rimraf
</span>

Then in our gulpfile.js we wrote the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    clean </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-rimraf'</span><span class="pun">);</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'clean'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">([</span><span class="str">'../dist/js/*.js'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> read</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">})</span><span class="pln">
           </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">clean</span><span class="pun">({</span><span class="pln"> force</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">}));</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And finally we run the clean task.

<span class="pln">
gulp limpiar
</span>

In our example, when you run the cleanup task, it will delete all the .js files inside the folder ../dist/js/

Additionally, the .src () method passes as the second parameter {read: false} so that when you find these files, do not read them. Since we do not want to waste time reading them because we will finally erase them.

And to the plugin we pass as single parameter a {force: true} object so that it can delete files outside the current working directory.

GULP.WATCH

Gulp.watch () looks at changes in the files that we indicate and then allows us to perform the tasks we want. As you see this is not a plugin, it is part of the Gulp.js API and is a widely used method.

To test it in our gulpfile.js we will write the following:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
    path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{},</span><span class="pln">
    jadeTasks </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'html:frontend'</span><span class="pun">],</span><span class="pln">
    coffeeTasks </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'js'</span><span class="pun">],</span><span class="pln">
    stylusTasks </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'styles'</span><span class="pun">];</span><span class="pln">

path</span><span class="pun">.</span><span class="pln">watch </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    jade</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'jade/**/*.jade'</span><span class="pun">],</span><span class="pln">
    stylus</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'stylus/**/*.styl'</span><span class="pun">],</span><span class="pln">
    coffee</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'coffee/**/*.coffee'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'watch'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

    gulp</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">.</span><span class="pln">jade</span><span class="pun">,</span><span class="pln"> jadeTasks</span><span class="pun">);</span><span class="pln">
    gulp</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">.</span><span class="pln">coffee</span><span class="pun">,</span><span class="pln"> coffeeTasks</span><span class="pun">);</span><span class="pln">
    gulp</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">.</span><span class="pln">stylus</span><span class="pun">,</span><span class="pln"> stylusTasks</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

</span>

And finally we execute the watch task .

<span class="pln">
gulp watch
</span>

Then we will see something similar to the following:

<span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">17</span><span class="pun">:</span><span class="lit">05</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Using</span><span class="pln"> gulpfile </span><span class="pun">~/</span><span class="pln">frontend</span><span class="pun">/</span><span class="pln">gulpfile</span><span class="pun">.</span><span class="pln">js
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">17</span><span class="pun">:</span><span class="lit">05</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Starting</span><span class="pln"> </span><span class="str">'watch'</span><span class="pun">...</span><span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">17</span><span class="pun">:</span><span class="lit">05</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Finished</span><span class="pln"> </span><span class="str">'watch'</span><span class="pln"> after </span><span class="lit">126</span><span class="pln"> ms
</span>

With which we will see Gulp.js will remain watching if there is any change and as soon as we do will execute the tasks that we indicate.

<span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">32</span><span class="pun">:</span><span class="lit">13</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Starting</span><span class="pln"> </span><span class="str">'js'</span><span class="pun">...</span><span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">32</span><span class="pun">:</span><span class="lit">15</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Finished</span><span class="pln"> </span><span class="str">'js'</span><span class="pln"> after </span><span class="lit">1.36</span><span class="pln"> s
</span>

It is very likely that once you start using this method, do not stop using it ever again!.

If we continue to list all Gulp.js plugins this list would be very large since there are currently about 780 official Gulp.js plugins such as gulp-minify-css , gulp-jshint , gulp.spritesmith , gulp-connect , gulp- Zip , run-sequence , gulp-load-plugins , gulp-bump and many more plugins .

I’m sure this article will serve more than one to start programming your tasks with Gulp.js, until next time.

Author

Am horla

Pin It