Gulp + SASS+ Umbraco

Tutorial: Speed up CSS load on Umbraco 8

Reducing load times with code-splitting

Getting Started

Prerequisites

Setting Up Gulp

npm install gulp-cli -g
npm install gulp gulp-autoprefixer gulp-sass gulp-changed -D

Creating Separate Tasks

Feeding the Gulpfile

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed');
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed');
const sassCompiler = require('./gulp-tasks/scss-compiler');
const defaulSCSSTasks = gulp.parallel(sassCompiler(gulp, sass, changed, autoprefixer, 'scss/*.scss'));

Structuring SCSS Nicely

scss/*.scss <-- Global files
scss/views/*.scss <-- Views
scss/views/partials/*.scss <-- Partials
// In your view or partial:
<div class="partial-name">
<div class="foo">
...
</div>
<div class="bar">
...
</div>
</div>
// In your SCSS filepartial-name {
.foo{
... specificity ;)
}
.bar{
...
}
}

Linking Up Variables

@import 'settings'; 
@import 'foundation';

Client Dependencies

@using ClientDependency.Core.Mvc
@Html.Raw(Html.RenderCssHere())
@using ClientDependency.Core.Mvc
@{
Html.RequiresCss("~/css/carousel.css");
}

Bonus: Debugging

Creative Technologist at Greenwood Campbell

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store