1
0
mirror of https://github.com/kognise/water.css.git synced 2025-08-09 22:57:00 +02:00

feat: update gulp to compile using PostCSS

This commit is contained in:
Jonas Kuske
2019-05-07 01:43:58 +02:00
parent 1efce0e559
commit 11b0a7d3a5
3 changed files with 130 additions and 672 deletions

View File

@@ -1,5 +1,4 @@
const gulp = require('gulp') const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss') const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer') const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano') const cssnano = require('cssnano')
@@ -10,22 +9,15 @@ const chalk = require('chalk');
const rename = require('gulp-rename'); const rename = require('gulp-rename');
const filter = require('gulp-filter'); const filter = require('gulp-filter');
const flatten = require('gulp-flatten') const flatten = require('gulp-flatten')
const postcssSassParser = require('postcss-scss') const sizereport = require('gulp-sizereport')
const postcssCssVariables = require('postcss-css-variables') const postcssCssVariables = require('postcss-css-variables')
const postcssImport = require('postcss-import')
const postcssColorModFunction = require('postcss-color-mod-function')
const paths = { const paths = {
styles: { srcDir: 'src/*',
src: 'src/**/*.scss', styles: { src: 'src/builds/*.css', dest: 'dist' },
variables: { html: { src: 'index.html' },
src: 'src/variables-*.scss',
compiled: 'src/_variables/_variables-*.scss',
dest: 'src/_variables',
},
dest: 'dist'
},
html: {
src: 'index.html'
}
} }
// https://stackoverflow.com/a/20732091 // https://stackoverflow.com/a/20732091
@@ -52,32 +44,21 @@ function formatByteMessage(source, data) {
return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}` return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}`
} }
/* Inlines variable references within the variable files themselves. */ function style() {
/* Allows computing new variables based on previous ones, e.g. with `lighten()` */
function computeVariables() {
const plugins = [postcssCssVariables({ preserve: 'computed' })]
const parser = postcssSassParser
return gulp.src(paths.styles.variables.src)
.pipe(postcss(plugins, { parser }))
.pipe(rename({ prefix: '_' }))
.pipe(gulp.dest(paths.styles.variables.dest));
}
function compileStyles() {
const isLegacyOrStandalone = path => /standalone|legacy/.test(path) const isLegacyOrStandalone = path => /standalone|legacy/.test(path)
const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true }) const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true })
const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true }) const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true })
const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
return ( return (
gulp.src(paths.styles.src, { ignore: paths.styles.variables.src }) gulp
.src(paths.styles.src)
// Add sourcemaps // Add sourcemaps
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
// Create a human readable sass file // Resolve imports and calculated colors
.pipe(sass({ outputStyle: 'expanded' })) .pipe(postcss([postcssImport(), postcssColorMod]))
// Catch any sass errors
.on('error', sass.logError)
// * Process legacy & standalone builds * // * Process legacy & standalone builds *
.pipe(excludeModern) .pipe(excludeModern)
@@ -122,13 +103,12 @@ function compileStyles() {
.pipe(sourcemaps.write('.')) .pipe(sourcemaps.write('.'))
// Write the minified files // Write the minified files
.pipe(gulp.dest(paths.styles.dest)) .pipe(gulp.dest(paths.styles.dest))
.pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
// Stream any changes to browserSync // Stream any changes to browserSync
.pipe(browserSync.stream()) .pipe(browserSync.stream())
) )
} }
const style = gulp.series(computeVariables, compileStyles)
function reload() { function reload() {
browserSync.reload() browserSync.reload()
} }
@@ -143,11 +123,8 @@ function watch() {
startPath: 'index.html' startPath: 'index.html'
}) })
// Don't watch compiled variables or every build triggers the watcher again (infinite loop) gulp.watch(paths.srcDir, style)
const watched = [paths.styles.src, `!${paths.styles.variables.compiled}`] gulp.watch([paths.srcDir, paths.html.src], reload)
gulp.watch(watched, style)
gulp.watch(paths.html.src, reload)
} }
module.exports.style = style module.exports.style = style

View File

@@ -34,10 +34,11 @@
"gulp-flatten": "^0.4.0", "gulp-flatten": "^0.4.0",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0", "gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2", "gulp-sizereport": "^1.2.1",
"gulp-sourcemaps": "^2.6.5", "gulp-sourcemaps": "^2.6.5",
"postcss-color-mod-function": "^3.0.3",
"postcss-css-variables": "^0.12.0", "postcss-css-variables": "^0.12.0",
"postcss-scss": "^2.0.0" "postcss-import": "^12.0.1"
}, },
"browserslist": [ "browserslist": [
"defaults AND not android 4.4.3" "defaults AND not android 4.4.3"

742
yarn.lock

File diff suppressed because it is too large Load Diff