mirror of
https://github.com/vacp2p/vac.dev-experimental-old.git
synced 2025-02-27 04:20:34 +00:00
Update Gulpfile
This commit is contained in:
Taylor Bryant
parent
b4c38805d3
commit
99d393b3c5
@ -4,10 +4,11 @@ description: A starter kit for using Tailwind with Jekyll
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- gulpfile.js
|
||||
- gulpfile.babel.js
|
||||
- LICENSE.md
|
||||
- node_modules
|
||||
- package.json
|
||||
- package-lock.json
|
||||
- README.md
|
||||
- src
|
||||
- tailwind.js
|
||||
- tailwind.config.js
|
||||
|
||||
@ -3,8 +3,10 @@
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<div class="bg-teal flex h-screen items-center justify-center text-white w-full">
|
||||
<div
|
||||
class="bg-blue flex h-screen items-center justify-center text-white w-full"
|
||||
>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
{% include footer.html %}
|
||||
|
||||
@ -1,32 +1,23 @@
|
||||
import { dest, series, src, task, watch } from "gulp";
|
||||
|
||||
import atimport from "postcss-import";
|
||||
import autoprefixer from "autoprefixer";
|
||||
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 { spawn } from "child_process";
|
||||
import sourcemaps from "gulp-sourcemaps";
|
||||
import atimport from "postcss-import";
|
||||
import tailwindcss from "tailwindcss";
|
||||
|
||||
/**
|
||||
* General settings
|
||||
*/
|
||||
|
||||
const mainStylesheet = "src/style.css"; /* Main stylesheet (pre-build) */
|
||||
const rawStylesheet = "src/style.css";
|
||||
const siteRoot = "_site";
|
||||
const tailwindConfig = "tailwind.config.js"; /* Tailwind config */
|
||||
const cssDest = "_site/assets/css/";
|
||||
let devBuild = false;
|
||||
const cssRoot = `${siteRoot}/assets/css/`;
|
||||
const tailwindConfig = "tailwind.config.js";
|
||||
|
||||
/**
|
||||
* Utilities
|
||||
*/
|
||||
|
||||
// Flag dev/production builds
|
||||
const setDevBuild = async () => { devBuild = true; }
|
||||
const devBuild =
|
||||
(process.env.NODE_ENV || "development").trim().toLowerCase() ===
|
||||
"development";
|
||||
|
||||
// Fix for Windows compatibility
|
||||
const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
|
||||
@ -39,45 +30,44 @@ class TailwindExtractor {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Jekyll tasks
|
||||
*/
|
||||
|
||||
task('buildJekyll', () => {
|
||||
task("buildJekyll", () => {
|
||||
browserSync.notify("Building Jekyll site...");
|
||||
|
||||
const args = ["exec", jekyll, "build"];
|
||||
|
||||
if (devBuild) { args.push("--incremental"); }
|
||||
if (devBuild) {
|
||||
args.push("--incremental");
|
||||
}
|
||||
|
||||
return spawn("bundle", args, { stdio: "inherit" });
|
||||
});
|
||||
|
||||
/**
|
||||
* CSS tasks
|
||||
*/
|
||||
task("processStyles", done => {
|
||||
browserSync.notify("Compiling styles...");
|
||||
|
||||
task('processCss', (done) => {
|
||||
browserSync.notify('Compiling tailwind');
|
||||
return src(mainStylesheet)
|
||||
return src(rawStylesheet)
|
||||
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
|
||||
.pipe(gulpif(devBuild, sourcemaps.init()))
|
||||
.pipe(gulpif(!devBuild, new purgecss({
|
||||
content: ["_site/**/*.html"],
|
||||
extractors: [{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "js"]
|
||||
}]
|
||||
})))
|
||||
.pipe(
|
||||
gulpif(
|
||||
!devBuild,
|
||||
new purgecss({
|
||||
content: ["_site/**/*.html"],
|
||||
extractors: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "js"]
|
||||
}
|
||||
]
|
||||
})
|
||||
)
|
||||
)
|
||||
.pipe(gulpif(!devBuild, postcss([autoprefixer(), cssnano()])))
|
||||
.pipe(gulpif(devBuild, sourcemaps.write('')))
|
||||
.pipe(dest(cssDest));
|
||||
})
|
||||
.pipe(gulpif(devBuild, sourcemaps.write("")))
|
||||
.pipe(dest(cssRoot));
|
||||
});
|
||||
|
||||
/**
|
||||
* Browsersync tasks
|
||||
*/
|
||||
|
||||
task('startServer', () => {
|
||||
task("startServer", () => {
|
||||
browserSync.init({
|
||||
files: [siteRoot + "/**"],
|
||||
open: "local",
|
||||
@ -89,24 +79,20 @@ task('startServer', () => {
|
||||
|
||||
watch(
|
||||
[
|
||||
mainStylesheet,
|
||||
rawStylesheet,
|
||||
tailwindConfig,
|
||||
"**/*.html",
|
||||
"**/*.md",
|
||||
"**/*.yml",
|
||||
"!_site/**/*",
|
||||
"!node_modules"
|
||||
], { interval: 500 },
|
||||
],
|
||||
{ interval: 500 },
|
||||
buildSite
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* Exports
|
||||
*/
|
||||
const buildSite = series("buildJekyll", "processStyles");
|
||||
|
||||
const buildSite = series('buildJekyll', 'processCss');
|
||||
|
||||
exports.serve = series(setDevBuild, buildSite, 'startServer');
|
||||
exports.build_dev = series(setDevBuild, buildSite);
|
||||
exports.serve = series(buildSite, "startServer");
|
||||
exports.default = series(buildSite);
|
||||
|
||||
785
package-lock.json
generated
785
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "tailwind-jekyll",
|
||||
"version": "3.0.1",
|
||||
"version": "4.0.0",
|
||||
"description": "A starter kit for using Tailwind with Jekyll",
|
||||
"main": "gulpfile.js",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.3.1",
|
||||
"autoprefixer": "^9.4.2",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"browser-sync": "^2.23.7",
|
||||
"browser-sync": "^2.26.3",
|
||||
"cssnano": "^4.1.7",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-if": "^2.0.2",
|
||||
@ -15,11 +15,11 @@
|
||||
"gulp-purgecss": "^1.1.1",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"postcss-import": "^11.1.0",
|
||||
"tailwindcss": "^0.7.2"
|
||||
"tailwindcss": "^0.7.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
"build:dev": "gulp build_dev",
|
||||
"build": "NODE_ENV=production gulp",
|
||||
"build:dev": "gulp",
|
||||
"start": "gulp serve"
|
||||
},
|
||||
"author": "Taylor Bryant",
|
||||
|
||||
101
src/style.css
101
src/style.css
@ -9,55 +9,54 @@
|
||||
*
|
||||
* @import "tailwindcss/preflight";
|
||||
*/
|
||||
@tailwind preflight;
|
||||
@tailwind preflight;
|
||||
|
||||
/**
|
||||
* This injects any component classes registered by plugins.
|
||||
*
|
||||
* If using `postcss-import`, use this import instead:
|
||||
*
|
||||
* @import "tailwindcss/components";
|
||||
*/
|
||||
@tailwind components;
|
||||
|
||||
/**
|
||||
* Here you would add any of your custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities could still
|
||||
* override them.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* .btn { ... }
|
||||
* .form-input { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @import "components/buttons";
|
||||
* @import "components/forms";
|
||||
*/
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*
|
||||
* If using `postcss-import`, use this import instead:
|
||||
*
|
||||
* @import "tailwindcss/utilities";
|
||||
*/
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the
|
||||
* box with Tailwind.
|
||||
*
|
||||
* Example :
|
||||
*
|
||||
* .bg-pattern-graph-paper { ... }
|
||||
* .skew-45 { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @import "utilities/background-patterns";
|
||||
* @import "utilities/skew-transforms";
|
||||
*/
|
||||
|
||||
/**
|
||||
* This injects any component classes registered by plugins.
|
||||
*
|
||||
* If using `postcss-import`, use this import instead:
|
||||
*
|
||||
* @import "tailwindcss/components";
|
||||
*/
|
||||
@tailwind components;
|
||||
|
||||
/**
|
||||
* Here you would add any of your custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities could still
|
||||
* override them.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* .btn { ... }
|
||||
* .form-input { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @import "components/buttons";
|
||||
* @import "components/forms";
|
||||
*/
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*
|
||||
* If using `postcss-import`, use this import instead:
|
||||
*
|
||||
* @import "tailwindcss/utilities";
|
||||
*/
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the
|
||||
* box with Tailwind.
|
||||
*
|
||||
* Example :
|
||||
*
|
||||
* .bg-pattern-graph-paper { ... }
|
||||
* .skew-45 { ... }
|
||||
*
|
||||
* Or if using a preprocessor or `postcss-import`:
|
||||
*
|
||||
* @import "utilities/background-patterns";
|
||||
* @import "utilities/skew-transforms";
|
||||
*/
|
||||
|
||||
@ -24,7 +24,7 @@ View the full documentation at https://tailwindcss.com.
|
||||
|
|
||||
*/
|
||||
|
||||
// let defaultConfig = require('tailwindcss/defaultConfig')()
|
||||
let defaultConfig = require('tailwindcss/defaultConfig')()
|
||||
|
||||
|
||||
/*
|
||||
@ -189,6 +189,7 @@ module.exports = {
|
||||
| provided by the platform.
|
||||
|
|
||||
| Class name: .font-{name}
|
||||
| CSS property: font-family
|
||||
|
|
||||
*/
|
||||
|
||||
@ -226,7 +227,7 @@ module.exports = {
|
||||
'Liberation Mono',
|
||||
'Courier New',
|
||||
'monospace',
|
||||
]
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@ -246,6 +247,7 @@ module.exports = {
|
||||
| prefer, be it rems, ems, pixels or other.
|
||||
|
|
||||
| Class name: .text-{size}
|
||||
| CSS property: font-size
|
||||
|
|
||||
*/
|
||||
|
||||
@ -273,6 +275,7 @@ module.exports = {
|
||||
| all of these, so we recommend removing those you don't need.
|
||||
|
|
||||
| Class name: .font-{weight}
|
||||
| CSS property: font-weight
|
||||
|
|
||||
*/
|
||||
|
||||
@ -298,6 +301,7 @@ module.exports = {
|
||||
| them in Tailwind, leadings.
|
||||
|
|
||||
| Class name: .leading-{size}
|
||||
| CSS property: line-height
|
||||
|
|
||||
*/
|
||||
|
||||
@ -318,6 +322,7 @@ module.exports = {
|
||||
| them in Tailwind, tracking.
|
||||
|
|
||||
| Class name: .tracking-{size}
|
||||
| CSS property: letter-spacing
|
||||
|
|
||||
*/
|
||||
|
||||
@ -338,6 +343,7 @@ module.exports = {
|
||||
| independently if that makes sense for your project.
|
||||
|
|
||||
| Class name: .text-{color}
|
||||
| CSS property: color
|
||||
|
|
||||
*/
|
||||
|
||||
@ -354,6 +360,7 @@ module.exports = {
|
||||
| these independently if that makes sense for your project.
|
||||
|
|
||||
| Class name: .bg-{color}
|
||||
| CSS property: background-color
|
||||
|
|
||||
*/
|
||||
|
||||
@ -370,6 +377,7 @@ module.exports = {
|
||||
| that are specific to your project here as well.
|
||||
|
|
||||
| Class name: .bg-{size}
|
||||
| CSS property: background-size
|
||||
|
|
||||
*/
|
||||
|
||||
@ -390,6 +398,7 @@ module.exports = {
|
||||
| width that will be used when you do not specify a border width.
|
||||
|
|
||||
| Class name: .border{-side?}{-width?}
|
||||
| CSS property: border-width
|
||||
|
|
||||
*/
|
||||
|
||||
@ -416,6 +425,7 @@ module.exports = {
|
||||
| specify a border color.
|
||||
|
|
||||
| Class name: .border-{color}
|
||||
| CSS property: border-color
|
||||
|
|
||||
*/
|
||||
|
||||
@ -435,6 +445,7 @@ module.exports = {
|
||||
| a good idea to put it first so other values are able to override it.
|
||||
|
|
||||
| Class name: .rounded{-side?}{-size?}
|
||||
| CSS property: border-radius
|
||||
|
|
||||
*/
|
||||
|
||||
@ -464,6 +475,7 @@ module.exports = {
|
||||
| awesome classes like .w-2/3.
|
||||
|
|
||||
| Class name: .w-{size}
|
||||
| CSS property: width
|
||||
|
|
||||
*/
|
||||
|
||||
@ -496,7 +508,7 @@ module.exports = {
|
||||
'1/6': '16.66667%',
|
||||
'5/6': '83.33333%',
|
||||
'full': '100%',
|
||||
'screen': '100vw'
|
||||
'screen': '100vw',
|
||||
},
|
||||
|
||||
|
||||
@ -512,6 +524,7 @@ module.exports = {
|
||||
| needed.
|
||||
|
|
||||
| Class name: .h-{size}
|
||||
| CSS property: height
|
||||
|
|
||||
*/
|
||||
|
||||
@ -533,7 +546,7 @@ module.exports = {
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
'screen': '100vh',
|
||||
},
|
||||
|
||||
|
||||
@ -548,6 +561,7 @@ module.exports = {
|
||||
| these values as needed.
|
||||
|
|
||||
| Class name: .min-w-{size}
|
||||
| CSS property: min-width
|
||||
|
|
||||
*/
|
||||
|
||||
@ -568,13 +582,14 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .min-h-{size}
|
||||
| CSS property: min-height
|
||||
|
|
||||
*/
|
||||
|
||||
minHeight: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
'screen': '100vh',
|
||||
},
|
||||
|
||||
|
||||
@ -590,6 +605,7 @@ module.exports = {
|
||||
| modify these values as needed.
|
||||
|
|
||||
| Class name: .max-w-{size}
|
||||
| CSS property: max-width
|
||||
|
|
||||
*/
|
||||
|
||||
@ -618,6 +634,7 @@ module.exports = {
|
||||
| these values as needed.
|
||||
|
|
||||
| Class name: .max-h-{size}
|
||||
| CSS property: max-height
|
||||
|
|
||||
*/
|
||||
|
||||
@ -639,6 +656,7 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .p{side?}-{size}
|
||||
| CSS property: padding
|
||||
|
|
||||
*/
|
||||
|
||||
@ -673,6 +691,7 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .m{side?}-{size}
|
||||
| CSS property: margin
|
||||
|
|
||||
*/
|
||||
|
||||
@ -708,6 +727,7 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .-m{side?}-{size}
|
||||
| CSS property: margin
|
||||
|
|
||||
*/
|
||||
|
||||
@ -743,6 +763,7 @@ module.exports = {
|
||||
| suffixed `.shadow` utility.
|
||||
|
|
||||
| Class name: .shadow-{size?}
|
||||
| CSS property: box-shadow
|
||||
|
|
||||
*/
|
||||
|
||||
@ -766,6 +787,7 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .z-{index}
|
||||
| CSS property: z-index
|
||||
|
|
||||
*/
|
||||
|
||||
@ -790,6 +812,7 @@ module.exports = {
|
||||
| values as needed.
|
||||
|
|
||||
| Class name: .opacity-{name}
|
||||
| CSS property: opacity
|
||||
|
|
||||
*/
|
||||
|
||||
@ -813,6 +836,7 @@ module.exports = {
|
||||
| generated CSS file size down.
|
||||
|
|
||||
| Class name: .fill-{name}
|
||||
| CSS property: fill
|
||||
|
|
||||
*/
|
||||
|
||||
@ -832,6 +856,7 @@ module.exports = {
|
||||
| keep the generated CSS file size down.
|
||||
|
|
||||
| Class name: .stroke-{name}
|
||||
| CSS property: stroke
|
||||
|
|
||||
*/
|
||||
|
||||
@ -852,6 +877,7 @@ module.exports = {
|
||||
| - responsive
|
||||
| - hover
|
||||
| - focus
|
||||
| - focus-within
|
||||
| - active
|
||||
| - group-hover
|
||||
|
|
||||
@ -886,6 +912,8 @@ module.exports = {
|
||||
minHeight: ['responsive'],
|
||||
minWidth: ['responsive'],
|
||||
negativeMargin: ['responsive'],
|
||||
objectFit: false,
|
||||
objectPosition: false,
|
||||
opacity: ['responsive'],
|
||||
outline: ['focus'],
|
||||
overflow: ['responsive'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user