Create a gist now

Instantly share code, notes, and snippets.

Boilerplate gulpfile for Umbraco projects
'use strict';
// Load plugins
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
browserSync = require('browser-sync'),
reload = browserSync.reload;
// Sass
gulp.task('sass:dev', function () {
// Sass to css
// Sourcemap
// Prefix for latest browsers
// Put .css in /css root
return gulp.src('css/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.sourcemaps.write()) // Bug Workaround (https://github.com/dlmanning/gulp-sass/issues/106#issuecomment-60977513)
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.autoprefixer())
.pipe($.sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(reload({ stream: true }));
});
gulp.task('sass:prod', function () {
// Sass to css
// No sourcemap
// Prefix for latest browsers
// Put .css in /css root
return gulp.src('css/sass/main.scss')
.pipe($.sass({
outputStyle: 'compressed',
precision: 10, // Default 5
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.autoprefixer())
.pipe(gulp.dest('css'));
});
// Production
gulp.task('production', ['sass:prod', 'fonts'], function () {
var assets = $.useref.assets({ searchPath: ['.'] });
return gulp.src('Views/*.cshtml')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.js', $.stripDebug()))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
// Fonts
gulp.task('fonts', function () {
return gulp.src([
'bower_components/font-awesome/fonts/fontawesome-webfont.*'])
.pipe(gulp.dest('dist/fonts/'));
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('css/sass/*.scss')
.pipe(wiredep(({
ignorePath: /^(\.\.\/)+/
})))
.pipe(gulp.dest('css/sass'));
gulp.src('Views/**/*.cshtml')
.pipe(wiredep(({
ignorePath: /^(\.\.\/)*\.\./
})))
.pipe(gulp.dest('Views'));
});
gulp.task('initialize', ['sass:dev'], function () {
// Init watch and browsersync on build
browserSync.init({
proxy: 'http://localhost:55107/'
});
// Watch .scss files
gulp.watch('css/sass/**/*.scss', ['sass:dev']);
// Watch .js files
gulp.watch('scripts/**/*.js', function () {
browserSync.reload();
});
// Watch HTML
gulp.watch('Views/**/*.cshtml', function () {
browserSync.reload();
});
// Watch Bower for new Libraries
gulp.watch('bower.json', ['wiredep', function () {
browserSync.reload();
}]);
});
@biapar
biapar commented Nov 19, 2015

Could you explain how to have organized your Umbraco folders?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment