Skip to content

Instantly share code, notes, and snippets.

@benjaminreid
Created October 14, 2015 11:07
Show Gist options
  • Save benjaminreid/7ed97b8b80cd0904a55d to your computer and use it in GitHub Desktop.
Save benjaminreid/7ed97b8b80cd0904a55d to your computer and use it in GitHub Desktop.
Current favourite Sass compilation with gulp, it also sucks in bower depdencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var filter = require('gulp-filter');
var streamify = require('gulp-streamify');
var watch = require('gulp-watch');
var bower = require('main-bower-files');
var es = require('event-stream');
var paths = {
styles: {
file: 'styles.css',
src: './scss/styles.scss',
watch: './scss/**/*.scss',
dist: './assets'
}
};
(function() {
function styles() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError));
}
function dependencies() {
var files = bower();
return gulp.src(files)
.pipe(filter(['*.css']));
}
gulp.task('styles', function() {
return es.merge(dependencies(), styles())
.pipe(streamify(concat(paths.styles.file)))
.pipe(autoprefixer())
.pipe(gulp.dest(paths.styles.dist));
});
})();
gulp.task('watch', function() {
watch(paths.styles.watch, function() {
gulp.start('styles');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment