Gulp & Visual Studio

See AMP Version

Visual Studio is one of the most popular software to create application or website in .Net environment. This software supports Sass and Less but it doesn’t compile those two languages making them complicated and useless.

In the new version (Visual Studio 2015), Intellisense has not been fixed and still has difficulties to make links between Sass and Less file types.

Even so, the new version of Visual Studio offers some new features that help us with these problems.

Visual Studio 2015 includes support for Gulp & Grunt. Easy to install and to run when we build our application, a task manager helps us to compile our “css” files.

Visual Studio had an extension called: “Web Essentials” but it was not as good as Gulp, nor as powerful.

Gulp & Visual Studio 2015

If you want to use Gulp on Visual Studio 2015:

  1. Read my first article about Gulp, it might help you;
  2. Be sure to have all prerequisites;
  3. Open an old project or create a new one. At the root of this project right click and add an “npm configuration file”. Let the default name: “package.json.”
ajouter un nouveau fichier Ajouter un nouveau fichier npm

4. Under “devDependencies” write the Gulp extension you want to use. Visual Studio helps you find the last version. When you use quotes, it completes double quote as usual but also gives you all versions you can include in your project within a dropdown.

Installation des extension

5. When you save the file, Visual Studio will download all the needed files.

Npm output

6. You can also, in the future, do an update by clicking on the light bulb.

ampule dans Visual Studio

7. You create a “Gulp configuration file” the same way you created the “npm configuration file”. Let the default name: “gulpfile.js”.

ajout du fichier gulpfile.js

8. There is a bit of ready code that will help you. You just have to write your own then save the file.

code de départ

9. When it’s done, right-click on the file in the “Solution explorer” window to open the “Task Runner Explorer”

ouvrir la fenêtre du "task runner"

10.There you can select your tasks and bind them to process. If you don’t see any task, the output window will give you a reason. Otherwise, will tell you where there is an error. If you want, you can directly run a task by right clicking on it. Visual Studio writes some code on top of the “gulpfile.js” to remember what to do and when.

fin du processus

That’s all you need to make run Gulp on Visual Studio 2015.

Gulp & Visual Studio 2013

That’s more complicated, but it is possible to run Gulp on Visual Studio 2013. You need to install everything in command line (cmd) (see my previous article). To execute Gulp just type “gulp” in your project folder (in cmd) or download a Visual Studio extension Task Runner Explorer that is a task explorer for Visual Studio 2013. With that extension, the process of running file is the same as in Visual Studio2015.

extension task runner

Visual studio Code

Here, you don’t have a choice. You need to run it by command line. The process is not the usual way. You can go to the FAQ page where you will get all the information about installing and running it step by step.

Leave a Reply

Your email address will not be published. Required fields are marked *