Running Gulp Tasks from Visual Studio Code

I recently started running my gulp tasks directly from Visual Studio Code instead of command line, I am going to explain how to do that.

Step1: Make sure your project has Gulpfile.js or gulpfile.babel.js

Step2: In Visual Studio Code once you open the project, press CMD + SHIFT + P (CTRL + SHIFT + P in Windows), this open the Command Pallet.

command palette

Step3: In Command Pallet type Configure Task Runner or CTR then select Configure Task Runner.

command palette tasks

Step4: Above step will show the list of task runners supported by Visual Studio Code, select Gulp form list.

gulp task

Step5: Above step will create a tasks.json file under .vscode folder in your project.

tasks json

Step6: Now launch Command Pallet once again by by pressing CMD + SHIFT + P (CTRL + SHIFT + P in Windows), type Run Task and select it.

command palette run task

Step7: Above step will display the list of task in your Gulp file.

gulp tasks

Step8: You can select any task from the list. I am select the default task from gulp tasks, you can see the default task running below.

gulp default task

If you want stop any currently running task in Visual Studio Code, go to command pallet then select Terminate Running Task. We follow the same process to run the tools like Ant, Gulp, Make, Maven, MSBuild, NPM, Jake or any tool we can run from command line in Visual Studio Code.

Destructuring in ECMAScript 2015

Destructuring is a new feature in ECMAScript 2015. Destructuring allows binding a set of variables to a corresponding set of values (objects and arrays) anywhere we can bind a value to a single variable. Today we are already doing destructuring (extracting values) almost in every JavaScript program, but we do it manually. To understand destructuring in ECMAScript 2015 completely, let’s look at an example how are we doing destructuring today (pre ES2015).

Destructuring manually

We can destructure (extract values) from person object manually using dot notation or array notation.


var person = { name: 'Shravan', age: 27 };
var name = person.name;
var age = person.age;


We can destructure (extract values) from numbers array manually using indexes.


var numbers = [1, 2, 3, 4, 5];
var one = numbers[0];
var two = numbers[1];


We construct objects using {} (object literal syntax) and arrays using [] (array literal syntax), on the right hand side of assignment operation. We can use same syntax on left hand side of assignment operation for destructuring objects and arrays.

Read More

Set Custom Github Icon to Folder in OS X

There are so many blog post explains the complex process of setting a custom icon for a folder in OS X. Neither I don’t want to run complex scripts nor go through some complex process.

GitHub Folder Icon

I found a simplest solution on the Github by Gregory Zuckerman. I cloned his Github icons repository to my github account. You can find the repository at the following location.

To set custom github icon to a folder in OS X, first clone or download the above repository to your mac. Then run the following command in the cloned or downloaded repository folder using your favourite terminal.

./setfileicon icns/icon.icns /path/to/your/github-folder

Terminal

Using similar process you can set any custom icon to any folder in OS X.