mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-08 14:16:58 +02:00
Code Issues Releases Wiki Activity

feat: add build files, add docs/ and .github/

Browse Source
This commit is contained in:
Jonas Kuske
2019-05-27 22:41:36 +02:00
parent 21869afbd7
commit 79ad695531
13 changed files with 80 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
gulpfile.js
View File

@@ -5,33 +5,36 @@ const cssnano = require('cssnano')
const sourcemaps = require('gulp-sourcemaps')
const bytediff = require('gulp-bytediff')
const browserSync = require('browser-sync').create()
const chalk = require('chalk');
const rename = require('gulp-rename');
const filter = require('gulp-filter');
const chalk = require('chalk')
const rename = require('gulp-rename')
const filter = require('gulp-filter')
const flatten = require('gulp-flatten')
const sizereport = require('gulp-sizereport')
const postcssCssVariables = require('postcss-css-variables')
const postcssImport = require('postcss-import')
const postcssColorModFunction = require('postcss-color-mod-function')
const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
/* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
stringifier: color => color.toRGBLegacy(),
})
const paths = {
srcDir: 'src/*',
docsDir: 'docs/*',
styles: { src: 'src/builds/*.css', dest: 'dist' },
html: { src: 'index.html' },
}
// https://stackoverflow.com/a/20732091
function humanFileSize(size) {
var i = Math.floor(Math.log(size) / Math.log(1024));
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
};
var i = Math.floor(Math.log(size) / Math.log(1024))
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
}
function formatByteMessage(source, data) {
const prettyStartSize = humanFileSize(data.startSize)
let message = '';
let message = ''
if (data.startSize !== data.endSize) {
const change = (data.savings > 0 ? 'saved' : 'gained')
const change = data.savings > 0 ? 'saved' : 'gained'
const prettySavings = humanFileSize(Math.abs(data.savings))
let prettyEndSize = humanFileSize(data.endSize)
@@ -41,16 +44,14 @@ function formatByteMessage(source, data) {
message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
} else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}`
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
}
function style() {
const isLegacyOrStandalone = path => /standalone|legacy/.test(path)
const isLegacy = path => /legacy/.test(path)
const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true })
const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true })
const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
return (
gulp
@@ -58,9 +59,9 @@ function style() {
// Add sourcemaps
.pipe(sourcemaps.init())
// Resolve imports and calculated colors
.pipe(postcss([postcssImport(), postcssColorMod]))
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
// * Process legacy & standalone builds *
// * Process legacy builds *
.pipe(excludeModern)
// Inline variable values so CSS works in legacy browsers
.pipe(postcss([postcssCssVariables()]))
@@ -69,7 +70,7 @@ function style() {
// autoprefix
.pipe(postcss([autoprefixer()]))
// Write the amount gained by autoprefixing
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
.pipe(excludeModern.restore)
// * Process modern builds *
@@ -80,7 +81,7 @@ function style() {
// TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
.pipe(postcss([autoprefixer()]))
// Write the amount gained by autoprefixing
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
.pipe(excludeLegacy.restore)
// Write the sourcemaps after making pre-minified changes
@@ -96,7 +97,7 @@ function style() {
// Minify using cssnano
.pipe(postcss([cssnano()]))
// Write the amount saved by minifying
.pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
.pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
// Rename the files have the .min suffix
.pipe(rename({ suffix: '.min' }))
// Write the sourcemaps after making all changes
@@ -109,10 +110,6 @@ function style() {
)
}
function reload() {
browserSync.reload()
}
function watch() {
style()
@@ -120,12 +117,12 @@ function watch() {
server: {
baseDir: './',
},
startPath: 'index.html'
startPath: 'docs/index.html',
})
gulp.watch(paths.srcDir, style)
gulp.watch([paths.srcDir, paths.html.src], reload)
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
}
module.exports.style = style
module.exports.watch = watch
module.exports.watch = watch