Blog
Running Gulp tasks in Visual Studio

Running Gulp tasks in Visual Studio

Over the last decade, front end development has matured from a point where CSS and JavaScript were written in badly organised files containing the exact code a browser would interpret, to something that now more resembles back end development.

Pure CSS has become the byte code of the front end world with LESS and Sass becoming the languages of choice. Instead of MSBuild for running a compilation Gulp can be used to automate workflows to compile Sass files, minify them and do whatever else is needed to produce the code for deployment (not really an exact comparison, but you get the point).

To truly achieve a matured development setup though, the final step is to remove those "compiled" css and js files from source control. After all you wouldn't check in a dll with the source code for each build. If your using a build server then this is a relatively easy step to add to your workflow. However the bigger issue is not making life hard for your back end developers.

Without the final CSS and JS files in source control your back end devs may now be faced with a site lacking all style and front end functionality when they hit F5. With LESS and Sass also not really being there thing, they're now left not really knowing what to do, and also not overly happy about having to learn something about front end do continue with there back end work. To make matters worse, Visual Studio often isn't the front end dev's choice of tool so copying the front enders setup isn't an ideal solution either.

The Aim

The ideal solution would be for a back end dev to be able to check out a solution from source control (containing no compiled CSS of JS files), hit F5 in Visual Studio, the final CSS and JS be created as part of the build and the site to run. No opening a command prompt to run a gulp task, or any other process the front end devs may be using. It should be completely invisible to them.

Visual Studio Task Runner

With Visual Studios Task Runner, this is entirely possible.

The Task Runner is built into Visual Studio, so there's no need for the back end dev to install any extra tools, and more importantly, tasks can be linked into a before build event so that the back end dev doesn't need to do anything.

A bit of background on gulp and the task runner

When front end developers set up gulp, they will configure a set of gulp tasks within a file named gulpfile.js (in reality they may actually separate the tasks into multiple files referenced by gulpfile.js, but this file is the important bit). These tasks may look a bit like this:

1gulp.task("min:js", () => {
2 return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
3 .pipe(concat(paths.concatJsDest))
4 .pipe(uglify())
5 .pipe(gulp.dest("."));
6});
7
8gulp.task("min:css", () => {
9 return gulp.src([paths.css, "!" + paths.minCss])
10 .pipe(concat(paths.concatCssDest))
11 .pipe(cssmin())
12 .pipe(gulp.dest("."));
13});
14
15gulp.task("min", gulp.series(["min:js", "min:css"]));

In this example there are 3 tasks. The first minifies some JS while the second minifies some CSS. The third is defining a series which runs the first 2.

Visual Studios task runner will look file the file called gulpfile.js and pull out all the tasks within it. The task runner window may not be open by default, so to open it type task runner in the search box and select it from the results. Alternatively you can right click the gulpfile in the solution and select Task Runner from the context menu.

The task runner window will open at the bottom of the screen, and will list out all the gulp tasks found within the gulpfile.js file. If the front end devs have organised the tasks into separate files, as long as the gulpfile.js file in the root of the project has some way of referencing them, they will still show up.

If you don't see any of the tasks, and have only just added the file or a task to the file. You may need to click the refresh button.

To run a task, simply right click it and then choose Run.

Automating on build

Being able to run a gulp task is handy, but what we're really after is for it to be automated as part of the build.

For this we just need to right click the task to be run, and then from the bindings option, select before build.

This will add a comment to the top of the gulpfile.js which Visual Studio will look for to know what task should be run before a build.

1/// <binding BeforeBuild='min' />

With this set, the back end devs no longer need to be concerned with not having any compiled css and js, and with a small amount of knowledge also have the ability to make minor changes to css and js where needed.

Some others tips

Depending on your front end devs setup there could be some additional challenges to overcome.

Front end devs not using Visual Studio

Quite often Visual Studio isn't the choice of dev environment for a front end dev. One issue this can lead to is files missing from the Visual Studio solution. However an easy fix for this is to use wild cards in the csproj file.

If the front end devs code can be grouped into specific folders then use a wild card to include all the files from that folder in the project.

1<None Include="build\js\**\*.js" />

CSS/JS not in the web project

If the front end devs have a separate folder for there work. e.g. they might work with static html files. Then the code may not be in the project what will be run, and therefore nothing will trigger the gulp file to have it's task run.

A simple solution for this is to create a visual studio project for the folder with there work so that it has a build event to be attached to. Make sure your web project also references this project to trigger it to be built when the web project is.

Links

For more info on using Gulp with Visual Studio. Check out Microsofts guide on using Gulp with ASP.NET Core.

What’s new in Sitecore 9.1

What’s new in Sitecore 9.1

At this year’s Sitecore Symposium, Sitecore shared details of the great new features arriving in Sitecore 9.1 that will benefit everyone from developers to marketers, by offering enhancements in everything from machine learning to aid personalisation down to headless support for JavaScript developers.

Sitecore Cortex

Version 9 was the first introduction to Sitecore Cortex name, which is represents the machine learning capabilities found within Sitecore. In version 9 this was limited to Engagement Value, Optimisation and Path Analysis. Version 9.1 however is building on this base by introducing 3 new Cortex powered capabilities to the platform.

Personalisation Suggestions

Sitecore has been offering the ability to create personalised visitor experiences for a long time now, but half the challenge with this has always been knowing what you should personalise and how you should personalise it.

With Sitecore 9.1 you can now direct the results of content tests to be fed into the machine learning server. Sitecore will then analyse the results of the test and if certain segments responded better to one experience over another, if it did then it will suggest that is set up as a personalisation rule.

Content Tag Automation

Search engines and site searches work far better when content has been tagged correctly. However, tagging is a tedious task most content editors would rather do without. Sitecore 9.1 now helps content editors with this task by hooking into the Open Calais API for natural language processing of content-based fields on an item.

Headless Sitecore

At Symposium 2017, Sitecore announced Sitecore JavaScript Services as the first official step into supporting headless setups using Sitecore. Since then this has been available as a preview while the development continued. With Sitecore 9.1 this is now reaching general availability.

The Headless capabilities mean those working with popular frameworks such as Vue, React and Angular can now build rich applications using Sitecore as the backend without needing to write .net code.

Unlike other headless offerings, Sitecore Headless still retains the functionality that makes Sitecore great. Namely, tracking, optimisation, personalisation and there’s even previews in the Sitecore Experience Editor.

And more

These are just 2 of the stand out features coming in Sitecore 9.1, but as well as this there are;

  • Updates to EXM to help avoid spamming recipients while also being able to classify vital emails such as order confirmations to always be sent
  • Enhancements to Sitecore Forms and Marketing Automation that were introduced in Sitecore 9
  • Sitecore Experience Accelerator now supports WCAG 2.0 accessibility guidelines
  • Preview of Project Horizon, the next version of web content editing
  • Simplification of the installation process with SIF 2.0
How to add a table to content in Sitecore

How to add a table to content in Sitecore

Although most of my blog posts are aimed at developers, this one is really for a content editor. When we build sites and do all the checks to make sure they work well for SEO and hit AAA accessibility standards, it's easy to forget that once we're done the content editors are going to take over with the ability to destroy things :) through the rich text editor.

Scenario

As a content editor you need to display some data in your article, and it makes most sense to put in a table.

Adding a table is actually quite straightforward in Sitecore, it's not much different to doing it in Microsoft Word. You click the insert table button and choose the size you want. However the problem that often gets missed is accessibility. While a table is actually very good for a screen reader, it does need to have a bit of info on things like table headings. e.g. are the they top row, the first column or do they exist at all.

Solution

Adding heading information takes a bit of extra work, but not a lot.

  1. Add you table by clicking the Insert table button and choosing the size you want.

2. Fill in your tables content

3. Right click the table and select "Table Properties"

4. Go to the Accessibility tab and set the heading rows and columns. In this example I have set the first row and first column to be marked as headings.

5. Click on and your table will be updated. If your site has styles for table headings these will also show now too.

6. Switching to HTML view will also show the correct HTML tags now being used.

An alternative approach to this, is at step 1 to pick table wizard rather than picking the size of the table. This will open the same wizard as in step 4 and allow you to specify the size of the table here too.