Running gulp tasks with JetBrains WebStorm

JetBrains WebStorm 8 provides grunt integration but as of this writing, gulp integration is part of WebStorm 9’s roadmap.

However, that doesn’t mean that gulp users cannot Run/Debug gulp tasks. Here’s how to enable gulp configuration within WebStorm 8 (should work with 7 as well).

Image

  • Create a new NodeJs configuration
  • Set your working directory to where your gulpfile.js resides
  • If you have installed gulp globally, point to %AppData%\npm\node_modules\gulp\bin\gulp.js; otherwise point to your local node_modules’ gulp folder.
  • Save it!

Now you can run/debug your gulp tasks to your heart’s content!!

Simplify Visual Studio Context Menus

What is it?

Visual Studio is a monster of a development tool. However, with great power, comes great number of options! Right out of the box, this is how the context menu for a Web Application looks like:

Web Application - Out of the box
Web Application – Out of the box

Add extensions, third party addins and customizations and pretty soon you end up having a long scrolling list of items. Now every time you right click on a project/solution node, not only it takes longer to draw the menu, but also you spend time in ‘finding’ the right item. You almost ‘pause’ for few seconds (or milliseconds) looking for the right menu entry. Mike Fourie talks more about this ‘stutter’ or ‘pause’ effect and also proposes a few solutions here.

Mike suggested redesigning the GUI to have horizontally laid out options (like Chrome) or customizing the existing menus to introduce nesting or sub-levels. Though having a Chrome-like arrangement looks really neat and avoids the inconvenience of nested menus, it probably is not possible till some future version of Visual Studio (or maybe never).

The other option is to customize individual menu items manually which is a huge trade-off. You either spend time customizing it (one-time) or spend time ‘finding’ (every time). I would take the one time inconvenience over the countless minutes of frustration that I’ve been dealing with so far. Thus borne this open source effort to address this one-time inconvenience.

What it does

The settings file removes some of the menu clutter by moving menu items to a nested submenu. Here are the rules I came up with in determining what goes in a submenu and what stays on the main menu. In no particular order of preference:

  • Third party addons (such as Resharper) or extension goes to a sub menu
  • Actions that are performed via keyboard shortcuts more frequently (such as Build, Cut/Copy/Paste etc.)
  • Any group that has more than 3 items and is not frequently used

These rules are based on me and my colleagues observations. Your IDE settings may look different so take it with a grain of salt. Of course, if you don’t like something, you can always reset those items back. Even better, you can submit your version with a nice description for rest of the world to use!

How to use it

Up-to-date instructions and caveats can be found in README. I’ll state them here for quick reference only (may not be up to date).

  1. Backup your existing settings first!!
  2. Download Reduce Menu Clutter.vssettings file from github repository
  3. Go to Visual Studio -> Tools -> Import and Export Settings… -> Import Selected environment settings
  4. Follow the wizard to complete the import.

There is no need to restart IDE. Changes will be effective immediately.
Note: These customizations were done for Visual C# environment. While this should not affect anything (as they settings are language agnostic), if you run into any issues, do let me know.

What do I get?

Here’s the most interesting part. I have posted screenshots of how the simplified menus look like. You can scroll through them before deciding to try them out.

Class Library - Before, AfterClass Library – Before, After Web Application - Before, AfterWeb Application – Before, After

I hope this benefits my fellow .Net Developers. If you have any comments/suggestion, do send me a note or create an issue on github repository.