mirror of
https://github.com/vacp2p/vac.dev-experimental-old.git
synced 2025-02-17 07:47:06 +00:00
Merge pull request #17 from taylorbryant/update-gulpfile
Update npm scripts, Gulpfile, and Tailwind
This commit is contained in:
Taylor Bryant
GitHub
commit
2a6e3a134e
@ -32,7 +32,9 @@ I used this starter for my personal blog. See the code [here](https://github.com
|
||||
## Getting started
|
||||
* `bundle install` to install Ruby gems
|
||||
* `npm install` to install npm packages
|
||||
* `gulp` to run the default Gulp task
|
||||
* `npm run start` to run the local development server using BrowserSync
|
||||
* `npm run build:dev` to compile the site with development settings
|
||||
* `npm run build` to compile the site for production
|
||||
|
||||
Need your CSS in the `<head>`? Check out the [internal style version](https://github.com/taylorbryant/tailwind-jekyll-internal) of this starter kit.
|
||||
|
||||
|
||||
@ -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,7 +3,9 @@
|
||||
|
||||
{% 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>
|
||||
|
||||
|
||||
@ -1,52 +1,57 @@
|
||||
import autoprefixer from "autoprefixer";
|
||||
import browserSync from "browser-sync";
|
||||
import { spawn } from "child_process";
|
||||
import gulp from "gulp";
|
||||
import atimport from "postcss-import";
|
||||
import autoprefixer from "gulp-autoprefixer";
|
||||
import cleancss from "gulp-clean-css";
|
||||
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 atimport from "postcss-import";
|
||||
import tailwindcss from "tailwindcss";
|
||||
|
||||
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 cssRoot = `${siteRoot}/assets/css/`;
|
||||
const tailwindConfig = "tailwind.config.js";
|
||||
|
||||
/**
|
||||
* Fix Windows compatibility issue
|
||||
*/
|
||||
const devBuild =
|
||||
(process.env.NODE_ENV || "development").trim().toLowerCase() ===
|
||||
"development";
|
||||
|
||||
// Fix for Windows compatibility
|
||||
const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
|
||||
|
||||
/**
|
||||
* Build Jekyll Site
|
||||
*/
|
||||
const buildJekyll = () => {
|
||||
browserSync.notify("Building Jekyll site...");
|
||||
|
||||
return spawn(jekyll, ["build"], { stdio: "inherit" });
|
||||
};
|
||||
|
||||
/**
|
||||
* Custom PurgeCSS Extractor
|
||||
* https://github.com/FullHuman/purgecss
|
||||
*/
|
||||
// Custom PurgeCSS Extractor
|
||||
// https://github.com/FullHuman/purgecss
|
||||
class TailwindExtractor {
|
||||
static extract(content) {
|
||||
return content.match(/[A-z0-9-:\/]+/g);
|
||||
return content.match(/[A-z0-9-:\/]+/g) || [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile CSS
|
||||
*/
|
||||
const compileStyles = () => {
|
||||
browserSync.notify("Compiling CSS...");
|
||||
task("buildJekyll", () => {
|
||||
browserSync.notify("Building Jekyll site...");
|
||||
|
||||
return gulp
|
||||
.src(mainStylesheet)
|
||||
const args = ["exec", jekyll, "build"];
|
||||
|
||||
if (devBuild) {
|
||||
args.push("--incremental");
|
||||
}
|
||||
|
||||
return spawn("bundle", args, { stdio: "inherit" });
|
||||
});
|
||||
|
||||
task("processStyles", done => {
|
||||
browserSync.notify("Compiling styles...");
|
||||
|
||||
return src(rawStylesheet)
|
||||
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
|
||||
.pipe(gulpif(devBuild, sourcemaps.init()))
|
||||
.pipe(
|
||||
purgecss({
|
||||
gulpif(
|
||||
!devBuild,
|
||||
new purgecss({
|
||||
content: ["_site/**/*.html"],
|
||||
extractors: [
|
||||
{
|
||||
@ -56,23 +61,13 @@ const compileStyles = () => {
|
||||
]
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
autoprefixer({
|
||||
browsers: ["last 2 versions"],
|
||||
cascade: false
|
||||
})
|
||||
)
|
||||
.pipe(cleancss())
|
||||
.pipe(gulp.dest("assets/css/"))
|
||||
.pipe(gulp.dest("_site/assets/css/"));
|
||||
};
|
||||
.pipe(gulpif(!devBuild, postcss([autoprefixer(), cssnano()])))
|
||||
.pipe(gulpif(devBuild, sourcemaps.write("")))
|
||||
.pipe(dest(cssRoot));
|
||||
});
|
||||
|
||||
const buildSite = gulp.series(buildJekyll, compileStyles);
|
||||
|
||||
/**
|
||||
* Serve site with Browsersync
|
||||
*/
|
||||
const startServer = () => {
|
||||
task("startServer", () => {
|
||||
browserSync.init({
|
||||
files: [siteRoot + "/**"],
|
||||
open: "local",
|
||||
@ -82,9 +77,9 @@ const startServer = () => {
|
||||
}
|
||||
});
|
||||
|
||||
gulp.watch(
|
||||
watch(
|
||||
[
|
||||
mainStylesheet,
|
||||
rawStylesheet,
|
||||
tailwindConfig,
|
||||
"**/*.html",
|
||||
"**/*.md",
|
||||
@ -95,8 +90,9 @@ const startServer = () => {
|
||||
{ interval: 500 },
|
||||
buildSite
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
const serve = gulp.series(buildSite, startServer);
|
||||
const buildSite = series("buildJekyll", "processStyles");
|
||||
|
||||
export default serve;
|
||||
exports.serve = series(buildSite, "startServer");
|
||||
exports.default = series(buildSite);
|
||||
|
||||
3381
package-lock.json
generated
3381
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@ -1,23 +1,26 @@
|
||||
{
|
||||
"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.4.2",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"browser-sync": "^2.26.3",
|
||||
"cssnano": "^4.1.7",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-autoprefixer": "^4.0.0",
|
||||
"gulp-clean-css": "^3.9.3",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-purgecss": "^0.20.0",
|
||||
"gulp-purgecss": "^1.1.1",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"postcss-import": "^11.1.0",
|
||||
"tailwindcss": "^0.6.6"
|
||||
"tailwindcss": "^0.7.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp css",
|
||||
"dev": "gulp"
|
||||
"build": "NODE_ENV=production gulp",
|
||||
"build:dev": "gulp",
|
||||
"start": "gulp serve"
|
||||
},
|
||||
"author": "Taylor Bryant",
|
||||
"license": "ISC"
|
||||
|
||||
@ -9,18 +9,18 @@
|
||||
*
|
||||
* @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;
|
||||
@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.
|
||||
@ -36,7 +36,7 @@
|
||||
* @import "components/forms";
|
||||
*/
|
||||
|
||||
/**
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*
|
||||
@ -44,9 +44,9 @@
|
||||
*
|
||||
* @import "tailwindcss/utilities";
|
||||
*/
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the
|
||||
* box with Tailwind.
|
||||
*
|
||||
@ -60,4 +60,3 @@
|
||||
* @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