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:
55
gulpfile.js
55
gulpfile.js
@@ -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
|
||||||
|
@@ -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"
|
||||||
|
Reference in New Issue
Block a user