Skip to content

Instantly share code, notes, and snippets.

@localnerve
Created November 5, 2016 13:16
Show Gist options
  • Save localnerve/2491bec305581e84ab62fa2ee927fc01 to your computer and use it in GitHub Desktop.
Save localnerve/2491bec305581e84ab62fa2ee927fc01 to your computer and use it in GitHub Desktop.
Compile css build step w/o svg2png fallback
/***
* Copyright (c) 2016 Alex Grant (@localnerve), LocalNerve LLC
* Copyrights licensed under the BSD License. See the accompanying LICENSE file for terms.
*/
import gulp from 'gulp';
import gulpSvgmin from 'gulp-svgmin';
import gulpSass from 'gulp-sass';
import gulpPostcss from 'gulp-postcss';
import gulpIf from 'gulp-if';
import gulpCssmin from 'gulp-cssmin';
import autoprefixer from 'autoprefixer';
import assetFunctions from 'node-sass-asset-functions';
/**
* Minimize svgs.
*
* @param {Object} settings - The project config settings.
*/
function svgmin (settings) {
return gulp.src('**/*.svg', {
cwd: settings.assets.images
})
.pipe(
gulpSvgmin()
)
.pipe(
gulp.dest(settings.dist.images)
);
}
/**
* Compile the sass.
* Applies autoprefixer.
* Applies cssmin if production.
*
* @param {Object} settings - The project config settings.
* @param {Boolean} prod - True if production, false otherwise.
*/
function sass (settings, prod) {
return gulp.src('*.scss', {
cwd: settings.src.styles
})
.pipe(gulpSass({
functions: assetFunctions({
images_path: settings.dist.images,
http_images_path: settings.web.images,
fonts_path: settings.dist.fonts,
http_fonts_path: settings.web.fonts
}),
includePaths: [
settings.vendor.css,
settings.src.components,
'node_modules/react-spinner'
],
outputStyle: prod ? 'compressed' : 'nested'
}).on('error', gulpSass.logError))
.pipe(
gulpPostcss([
autoprefixer({
browsers: ['last 2 versions', '> 2% in US']
})
])
)
.pipe(
gulpIf(prod, gulpCssmin())
)
.pipe(
gulp.dest(settings.dist.styles)
);
}
/**
* Prep assets and compile css.
*
* @param {Object} settings - The project config settings.
* @param {Boolean} prod - True if production, false otherwise.
*/
export default function ccssTaskFactory (settings, prod) {
return gulp.series(
svgmin.bind(null, settings),
sass.bind(null, settings, prod)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment