Rework for PurgeCSS v2

This commit is contained in:
Taylor Bryant 2020-01-25 12:35:18 -06:00
parent eaeb64a192
commit 9b7f8403b4
4 changed files with 42 additions and 324 deletions

View File

@ -9,7 +9,6 @@ A starter kit for using [Tailwind](https://tailwindcss.com) with [Jekyll](https:
* Strips out unused CSS using [Purgecss](http://www.purgecss.com/)
* Runs [Autoprefixer](https://github.com/postcss/autoprefixer)
* Minifies your CSS
* Generate a CSS sourcemap
* Compiles Jekyll
* Runs [Browsersync](https://www.browsersync.io/) for local development
@ -31,11 +30,11 @@ A starter kit for using [Tailwind](https://tailwindcss.com) with [Jekyll](https:
## Get started
* `bundle install` to install Ruby gems
* `npm ci` to install npm packages listed in `package-lock.json`
* `npm run start` to compile the site with development settings and run BrowserSync
* `npm run start` or `npm run dev` to compile the site with development settings and run BrowserSync
## Build your site
* `npm run build:dev` to compile the site with development settings
* `npm run build` to compile the site for production
* `npm run build:production` to compile the site for production
## Deploy

View File

@ -3,10 +3,8 @@ import browserSync from "browser-sync";
import { spawn } from "child_process";
import cssnano from "cssnano";
import { dest, series, src, task, watch } from "gulp";
import gulpif from "gulp-if";
import postcss from "gulp-postcss";
import purgecss from "gulp-purgecss";
import sourcemaps from "gulp-sourcemaps";
import purgecss from "@fullhuman/postcss-purgecss";
import atimport from "postcss-import";
import tailwindcss from "tailwindcss";
@ -22,13 +20,8 @@ const isDevelopmentBuild = environment === DEVELOPMENT_ENVIRONMENT;
// Fix for Windows compatibility
const JEKYLL = process.platform === "win32" ? "jekyll.bat" : "jekyll";
// Custom PurgeCSS Extractor
// https://github.com/FullHuman/purgecss
class TailwindExtractor {
static extract(content) {
return content.match(/[\w-/:]+(?<!:)/g) || [];
}
}
// Custom PurgeCSS Extractor for Tailwind CSS
const purgeFromTailwind = content => content.match(/[\w-/:]+(?<!:)/g) || [];
task("buildJekyll", () => {
browserSync.notify("Building Jekyll site...");
@ -46,24 +39,27 @@ task("processStyles", () => {
browserSync.notify("Compiling styles...");
return src(PRE_BUILD_STYLESHEET)
.pipe(postcss([atimport(), tailwindcss(TAILWIND_CONFIG)]))
.pipe(gulpif(isDevelopmentBuild, sourcemaps.init()))
.pipe(
gulpif(
!isDevelopmentBuild,
new purgecss({
content: [`${SITE_ROOT}/**/*.html`],
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js"]
}
]
})
)
postcss([
atimport(),
tailwindcss(TAILWIND_CONFIG),
...(!isDevelopmentBuild
? [
purgecss({
content: [`${SITE_ROOT}/**/*.html`],
extractors: [
{
extractor: purgeFromTailwind,
extensions: ["html", "js"]
}
]
}),
autoprefixer(),
cssnano()
]
: [])
])
)
.pipe(gulpif(!isDevelopmentBuild, postcss([autoprefixer(), cssnano()])))
.pipe(gulpif(isDevelopmentBuild, sourcemaps.write("")))
.pipe(dest(POST_BUILD_STYLESHEET));
});

302
package-lock.json generated
View File

@ -4,47 +4,25 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@gulp-sourcemaps/identity-map": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz",
"integrity": "sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==",
"@fullhuman/postcss-purgecss": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.0.5.tgz",
"integrity": "sha512-lWSnRiLfI3dGowZkPBfFOVkWlBP+Wk12u91mtjCTmA3hJ+d5+MyizVsTAOB1e52QJww6BRSD4g6XpknF+dEPnA==",
"dev": true,
"requires": {
"acorn": "^5.0.3",
"css": "^2.2.1",
"normalize-path": "^2.1.1",
"source-map": "^0.6.0",
"through2": "^2.0.3"
"postcss": "7.0.26",
"purgecss": "^2.0.5"
},
"dependencies": {
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"postcss": {
"version": "7.0.26",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
"integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
}
}
}
},
"@gulp-sourcemaps/map-sources": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz",
"integrity": "sha1-iQrnxdjId/bThIYCFazp1+yUW9o=",
"dev": true,
"requires": {
"normalize-path": "^2.0.1",
"through2": "^2.0.3"
},
"dependencies": {
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
}
}
@ -65,12 +43,6 @@
"negotiator": "0.6.2"
}
},
"acorn": {
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
"integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
"dev": true
},
"after": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@ -1771,18 +1743,6 @@
}
}
},
"css": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
"dev": true,
"requires": {
"inherits": "^2.0.3",
"source-map": "^0.6.1",
"source-map-resolve": "^0.5.2",
"urix": "^0.1.0"
}
},
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@ -1981,34 +1941,6 @@
"ms": "2.0.0"
}
},
"debug-fabulous": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/debug-fabulous/-/debug-fabulous-1.1.0.tgz",
"integrity": "sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==",
"dev": true,
"requires": {
"debug": "3.X",
"memoizee": "0.4.X",
"object-assign": "4.X"
},
"dependencies": {
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
}
}
},
"decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@ -2121,12 +2053,6 @@
"repeating": "^2.0.0"
}
},
"detect-newline": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
"integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
"dev": true
},
"dev-ip": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
@ -2428,16 +2354,6 @@
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
"dev": true
},
"event-emitter": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
"integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
"dev": true,
"requires": {
"d": "1",
"es5-ext": "~0.10.14"
}
},
"eventemitter3": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
@ -2716,12 +2632,6 @@
"for-in": "^1.0.1"
}
},
"fork-stream": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz",
"integrity": "sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=",
"dev": true
},
"fragment-cache": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@ -3512,37 +3422,6 @@
}
}
},
"gulp-if": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz",
"integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==",
"dev": true,
"requires": {
"gulp-match": "^1.1.0",
"ternary-stream": "^3.0.0",
"through2": "^3.0.1"
},
"dependencies": {
"through2": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
"dev": true,
"requires": {
"readable-stream": "2 || 3"
}
}
}
},
"gulp-match": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz",
"integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==",
"dev": true,
"requires": {
"minimatch": "^3.0.3"
}
},
"gulp-postcss": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-8.0.0.tgz",
@ -3556,62 +3435,6 @@
"vinyl-sourcemaps-apply": "^0.2.1"
}
},
"gulp-purgecss": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/gulp-purgecss/-/gulp-purgecss-2.0.5.tgz",
"integrity": "sha512-uTSka26yR522qEe6pBLONvELd3tXYkhDjXNFFrbmQnqPTFLorrkfVCMzA0JCBSaH3vcwRSydSfNRUvb6UfFVjA==",
"dev": true,
"requires": {
"glob": "^7.1.6",
"plugin-error": "^1.0.1",
"purgecss": "^2.0.5",
"through2": "^3.0.1"
},
"dependencies": {
"glob": {
"version": "7.1.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"through2": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
"dev": true,
"requires": {
"readable-stream": "2 || 3"
}
}
}
},
"gulp-sourcemaps": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz",
"integrity": "sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==",
"dev": true,
"requires": {
"@gulp-sourcemaps/identity-map": "1.X",
"@gulp-sourcemaps/map-sources": "1.X",
"acorn": "5.X",
"convert-source-map": "1.X",
"css": "2.X",
"debug-fabulous": "1.X",
"detect-newline": "2.X",
"graceful-fs": "4.X",
"source-map": "~0.6.0",
"strip-bom-string": "1.X",
"through2": "2.X"
}
},
"gulplog": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
@ -4093,12 +3916,6 @@
"isobject": "^3.0.1"
}
},
"is-promise": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
"dev": true
},
"is-regex": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@ -4414,15 +4231,6 @@
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"lru-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
"integrity": "sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=",
"dev": true,
"requires": {
"es5-ext": "~0.10.2"
}
},
"make-iterator": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
@ -4488,28 +4296,6 @@
"integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
"dev": true
},
"memoizee": {
"version": "0.4.14",
"resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.14.tgz",
"integrity": "sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==",
"dev": true,
"requires": {
"d": "1",
"es5-ext": "^0.10.45",
"es6-weak-map": "^2.0.2",
"event-emitter": "^0.3.5",
"is-promise": "^2.1",
"lru-queue": "0.1",
"next-tick": "1",
"timers-ext": "^0.1.5"
}
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
"dev": true
},
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@ -6695,12 +6481,6 @@
"is-utf8": "^0.2.0"
}
},
"strip-bom-string": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
"integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=",
"dev": true
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@ -6839,52 +6619,6 @@
}
}
},
"ternary-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz",
"integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==",
"dev": true,
"requires": {
"duplexify": "^4.1.1",
"fork-stream": "^0.0.4",
"merge-stream": "^2.0.0",
"through2": "^3.0.1"
},
"dependencies": {
"duplexify": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz",
"integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==",
"dev": true,
"requires": {
"end-of-stream": "^1.4.1",
"inherits": "^2.0.3",
"readable-stream": "^3.1.1",
"stream-shift": "^1.0.0"
}
},
"readable-stream": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
"integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
"dev": true,
"requires": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
}
},
"through2": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
"dev": true,
"requires": {
"readable-stream": "2 || 3"
}
}
}
},
"tfunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/tfunk/-/tfunk-3.1.0.tgz",
@ -6948,16 +6682,6 @@
"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
"dev": true
},
"timers-ext": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
"integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
"dev": true,
"requires": {
"es5-ext": "~0.10.46",
"next-tick": "1"
}
},
"timsort": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",

View File

@ -1,26 +1,25 @@
{
"name": "jekyll-starter-tailwind",
"version": "5.0.12",
"version": "6.0.0",
"description": "A starter kit for using Tailwind with Jekyll",
"main": "gulpfile.babel.js",
"devDependencies": {
"@fullhuman/postcss-purgecss": "2.0.5",
"autoprefixer": "9.7.4",
"babel-preset-env": "1.7.0",
"babel-register": "6.26.0",
"browser-sync": "2.26.7",
"cssnano": "4.1.10",
"gulp": "4.0.2",
"gulp-if": "3.0.0",
"gulp-postcss": "8.0.0",
"gulp-purgecss": "^2.0.5",
"gulp-sourcemaps": "2.6.5",
"postcss-import": "12.0.1",
"tailwindcss": "1.1.4"
},
"scripts": {
"build": "NODE_ENV=production gulp",
"build:production": "NODE_ENV=production gulp",
"build:dev": "gulp",
"start": "gulp serve"
"dev": "gulp serve",
"start": "npm run dev"
},
"repository": {
"type": "git",