Cleaning up your Sitecore Helix webroot with gulp

There’s a common problem when publishing a Sitecore solution whether it’s Helix compliant or not… how we handle old files in our webroot. For example, you may change an assembly name or a view, but both the dll and cshtml files will remain in the webroot which causes obvious problems. Immutable deployments are the answer when deploying to environments other than a localhost, but we need an approach when developing locally.

One way to handle this problem is using a gulp publish and binding a cleanup gulp task to our Visual Studio publish. This is one of the areas that the Helix principles show their worth, if folders are organised on disk we can easily setup a gulp task to delete certain folders rather than using wildcards.

So the first step is to add a cleanup task which will be called by our gulp publish task. The cleanup task should remove the Foundation, Feature, and Project config folders from App_Config before deploying any files. For the dll’s we will need a wildcard:

var cleanProjectFiles = function (layerName) {
    const filesToDelete = [
        gulpConfig.webRoot + '/bin/Helixbase.' + layerName + '.*',
        gulpConfig.webRoot + '/App_Config/Include/' + layerName
    console.log("Removing " + layerName + " configs/binaries");
    return gulp.src(filesToDelete, { read: false })
        .pipe(clean({ force: true }));

The task will clear out the old configs/dll’s before publishing our solution but what about views? Helix doesn’t stipulate that views are organised on disk according to layer or context and the default view engine leaves us with a difficulty. We could use gulp to delete everything except for the Shared folder, but this could be problematic if any view folders change in a future Sitecore update. Another option is to have a whitelist of every view to delete but this isn’t ideal either. While old view files are less problematic it’s a good idea to create a custom multisite View Engine. This would give us options for organising our views on disk in a way that our gulp cleanup task can easily handle, examples being:

Views\Helixbase\SomeModule\Someview.cshtml – then delete the context folder in gulp.

Views\Layer\SomeModule\SomeView.cshtml – then delete the layer folder in gulp.

Finally, when it comes to deploying across environments we need an approach other than transform files if we want to easily use tokens/octopus variables etc. To do this involves adding config files per environment. If we’re following a similar approach we need a way to delete the unwanted config folders using gulp. This can be achieved with a post build cleanup task.

// Note: intended to be called after publishing
gulp.task("Clean-Transform-Configs", function (layerName) {
    const filesToDelete = [
        gulpConfig.webRoot + '/App_Config/Include/' + layerName + '/CD',
        gulpConfig.webRoot + '/App_Config/Include/' + layerName + '/CM'
    console.log("Removing transform configs");
    return gulp.src(filesToDelete, { read: false })
        .pipe(clean({ force: true }));

We would want to call this task after each gulp publish, and can also bind it to the Visual Studio publish:

/// <binding AfterBuild='Clean-Transform-Configs' />

But remember if we’re binding to the Visual Studio publish, we’d need to be able to pass in a layerName. As this cannot be achieved, we could add a condition to the gulp task if the layerName var was empty.


One thought on “Cleaning up your Sitecore Helix webroot with gulp

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s