On this website we use cookies that are strictly necessary to make our website function correctly, as well as optional – analytics, performance and/or marketing - cookies which help us improve our website by collecting and reporting information on how the website is used, as well as help us to reach out to you with information about our organization or offer. If you do not wish to accept optional cookies when visiting our website, you may change the settings in the Cookie Settings. For more information go to Cookie Settings.

Skip to content

How to improve the front-end work in ASP.NET using Gulp?

Technology

Feb 18, 2016 - 6 minutes read

Objectivity Blog 416 306
Radosław Maziarka

I am a software developer who is not afraid of new challenges - each new problem is simply an opportunity to develop your skills. I am interested in techniques of work automation and effective time management. I profess "Just do it" philosophy which makes lives easier and without unnecessary doubts.

See all Radosław's posts
Data Driven Organisation Blog Ebook 416X300

Share

Web developer's work is becoming more and more concentrated on the browser side. Nowadays, applications have extensive business logic on the client side, validations, and data download from multiple sources. This is particularly evident in SPA applications (Single Page Application), in which sole function of the server may be returning the page sources and responding to the requests from the application only. Current solutions used in ASP.NET offered modest mechanisms to empower front-end developer’s work.

For example, the Bundle mechanism (combining multiple files into one to optimize page load time) is good for a small number of .js files, but the requirement to compile application to show new .js files in the .html file lowers the efficiency of the developer. The most popular .NET library to compile on server side .less files to.css (dotless) still does not support Less 2.0 version introduced more than a year ago. More comprehensive management of client files from the ASP.NET is very complicated. I think that ASP.NET supports well the back-end mechanisms, while in the front-end side we have great external tools.

This concept has been spread for a long time around the programming world and in 2014,  in Visual Studio, Microsoft added support for Gulp and Grunt – JavaScript’s task runners (link to Scott Hanselmann’s materials). As a result, we have quick and easy ability to run tasks involving the compilation, minification or inserting files to external folders and servers. With Node.js (the JS runtime environment, within which task runners work) and npm (the package manager for Node.js) you can install Gulp plugins directly to our application. Node.js is installed by default when you install Visual Studio 2015, so nothing stands in the way to use it in our project. For older versions of Visual Studio, there are add-ons to install or there is the ability to run tasks directly from the console.

I would like to present some of the problems which we encountered during our writing of SPA application in Angular and show how Gulp libraries made it easy to resolve them.  

Gulp – short description:

Gulp is a tool for automation of our work. It operates on streams – Gulp reads selected files, makes transformation on every element in the stream and then writes to disk the result of our processes.

Installation of Gulp and its plugins is done by writing in the console:

devenv_2016-02-18_11-49-58

Plugins can be searched for the in repository website at www.npmjs.com. Almost all Gulp plugins are prefixed with gulp- * e.g. gulp-less.

Tasks are declared in the gulpfile.js file and run by writing in the console gulp and name of the task (empty gulp starts the default task ). Sample file gulpfile.js:

devenv_2016-02-18_11-46-24

A more detailed instruction is available on the Gulp pane at the Github platform, documentation tab.  

Using Gulp in the project:

Task Runner Explorer window has been added to Visual Studio, in which we have access to all tasks declared in a gulpfile.js file. We can start them manually or attach them to the process of application building by adding jobs to build stages of the project. task-runner  

Problems:

Less / TypeScript Compilation

  1. Problem: We started writing application using such front-end technologies as Less and TypeScript. Unfortunately, Visual Studio 2015 does not have support for automatic compilation of these files during build, but requires installation of additional tools that are not trivial to use. We wanted a simple mechanism that will allow us to compile these files to their counterparts.
  2. Used libraries: gulp-less, gulp-typescript
  3. Solution: Both of these libraries are compiling files found in the given path, and then put them to the destination folder. They have a great configuration possibilities, but the basic usage requires only a few lines of code.
  4. Example:

devenv_2016-02-18_11-41-23  

Minification and files merge

  1. Problem: A standard mechanism for ASP.NET Bundle requires to build the entire application even after adding one of .js or .css files. In addition, the ability to manage bundles is very limited. We wanted to have more control over the process.
  2. Used libraries: gulp-uglify, gulp-minify-css, gulp-concat, gulp-inject
  3. Solution: The first two libraries minify .js / .css files. gulp-concat combines minified files into one. gulp-inject is able to list all the files to .html. This allows us to react to the configuration of the build (Debug / Release) and to list either all files or only those minified.
  4. Example

devenv_2016-02-18_11-41-55  

External Libraries

  1. Problem: We use third-party libraries from the Bower package manager. We wanted to be able to add them automatically to .html file instead of adding entries manually.
  2. Used Library: main-bower-files, gulp-inject
  3. Solution: The main-bower-files allows to read dependences of our project on bower.json and retrieve a list of paths to the files. Then, by a gulp-inject, we are able to list them to our main .html file or join them to previously written minify mechanism.
  4. Example:

devenv_2016-02-18_11-41-47  

Include static files

  1. Problem: In the application we had .html view files, and .json translation files that were downloaded by the application during the use. However, there were plenty of these files and it caused an avalanche of HTTP requests. We wanted to have them merged into one file so that the application would work faster.
  2. Libraries: gulp-angular-template cache, gulp-angular-translate
  3. Solution: Both of the libraries search the catalogs of the project and load all of the required signature files (first *.html, second * .lang.json). Then each plugin creates a file that, when loaded into the application, will provide cache for Angular for all views and translations so that we eliminate unnecessary requests.
  4. Example:

devenv_2016-02-18_11-42-05  

CDN

  1. Problem: We noticed decrease in the speed of launching application due to slow downloading of minified files. After investigation, we found that downloading files from the Azure application Azure website, with a large number of requests, took too long and delayed the start. We decided to put these files in CDN (large, distributed system of proxy server) to speed up the downloading and to disburden application servers.
  2. Used libraries: gulp-deploy-azure-cdn
  3. Solution: Plugin puts files to a previously created container (Azure Blob). It has extensive configuration options and allows e.g. start 'dry' run, which in the Debug configuration will not send files to the container. After adding indication from Azure CDN to our blob we have fast file sharing mechanism that accelerates application performance.
  4. Example:

 devenv_2016-02-18_11-42-14  

File versioning

  1. Problem: It turned out that Azure CDN, for files with the same filename, returns older versions of files despite the existence of newer in the container. We decided to add file version to each file to avoid problematic caching.
  2. Libraries: gulp-rev
  3. Solution: Library calculates the hash of the content and adds it to the end of the file name. As a result, after every change of the content, filenames are different and they are separately available from the CDN. At the same time, unchanged files are still cached and available more quickly for the application.
  4. Example:

devenv_2016-02-18_11-42-23  

Helpful Libraries:

  1. gulp-load-plugins - simplifies the usage of plugins by loading them into a single object. Instead of loading all plugins by require you load gulp-load-plugins once, and then you have access to all plugins available from package.json file
  2. gulp-plumber - allows you to continue stream processing when error occurs
  3. gulp-task-list - lets you to list task from the console with their comments
  4. gulp-watch - allows listening to changes in the folders and responding to them e.g. created .less file is automatically recompiled to .css
  5. gulp-jshint - automates code quality check by the JSHint tool
  6. gulp-jasmine - launches Jasmine framework to test the Javascript code

  Summary: There is a very large number of gulp plugins and I presented only a few of them. I invite you to seek and use them, because they will reduce the time to solve your problems and automate your work.

Gulp is a very powerful tool and using it can greatly simplify your work on the web-based project. Moreover, I even know people who use Gulp in building C# projects (gulp-msbuild). At the same time you need to be aware that it is a tool that has its own limitations and with certain complexity class’ problems (e.g. huge number of processed files, advanced graphics operations) you should look for more efficient tools. But for most cases Gulp suits perfectly and its implementation in the project gives us meaningful benefits. I would recommend everyone to get familiar with this tool.

And so: npm install gulp :)  

 

 

P.S. The article was published in Programista magazine no 12/2015.

Data Driven Organisation Blog Ebook 416X300
Radosław Maziarka

I am a software developer who is not afraid of new challenges - each new problem is simply an opportunity to develop your skills. I am interested in techniques of work automation and effective time management. I profess "Just do it" philosophy which makes lives easier and without unnecessary doubts.

See all Radosław's posts

Related posts

You might be also interested in

Contact

Start your project with Objectivity

CTA Pattern - Contact - Middle