Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Gulp: Style Task
/**
* Styles
*
* Looking at src/sass and compiling the files into Expanded format, Autoprefixing and sending the files to the build folder
*
* Sass output styles: https://web-design-weekly.com/2014/06/15/different-sass-output-styles/
*/
gulp.task('styles', function () {
return gulp.src('./assets/css/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
//outputStyle: 'compressed',
outputStyle: 'compact',
// outputStyle: 'nested',
// outputStyle: 'expanded',
precision: 10
}))
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer('last 2 version', '> 1%', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write('.'))
.pipe(plumber.stop())
.pipe(gulp.dest('./'))
.pipe(filter('**/*.css')) // Filtering stream to only css files
.pipe(cmq()) // Combines Media Queries
.pipe(reload({stream:true})) // Inject Styles when style file is created
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss({
maxLineLen: 80
}))
.pipe(gulp.dest('./'))
.pipe(reload({stream:true})) // Inject Styles when min style file is created
.pipe(notify({ message: 'Styles task complete', onLast: true }))
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment