Merge pull request #17 from taylorbryant/update-gulpfile
Update npm scripts, Gulpfile, and Tailwind
This commit is contained in:
Taylor Bryant
GitHub
commit
2a6e3a134e
|
|
@ -9,7 +9,7 @@ A starter kit for using [Tailwind](https://tailwindcss.com) (v0.6.1) with [Jekyl
|
|||
* Minifies your CSS
|
||||
* Builds Jekyll
|
||||
* Runs [Browsersync](https://www.browsersync.io/) for live reload
|
||||
|
||||
|
||||
## Example
|
||||
I used this starter for my personal blog. See the code [here](https://github.com/taylorbryant/taylorbryant.github.io).
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ I used this starter for my personal blog. See the code [here](https://github.com
|
|||
>"Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories."
|
||||
– [Jekyll](https://jekyllrb.com/)
|
||||
|
||||
## Requirements
|
||||
## Requirements
|
||||
* [Bundler](http://bundler.io/)
|
||||
* [gulp-cli](https://www.npmjs.com/package/gulp-cli)
|
||||
* [Jekyll](https://jekyllrb.com/)
|
||||
|
|
@ -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,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,78 +1,73 @@
|
|||
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({
|
||||
content: ["_site/**/*.html"],
|
||||
extractors: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "js"]
|
||||
}
|
||||
]
|
||||
})
|
||||
gulpif(
|
||||
!devBuild,
|
||||
new purgecss({
|
||||
content: ["_site/**/*.html"],
|
||||
extractors: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "js"]
|
||||
}
|
||||
]
|
||||
})
|
||||
)
|
||||
)
|
||||
.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);
|
||||
|
|
|
|||
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"
|
||||
|
|
|
|||
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…
Reference in New Issue