vacp2p/vac.dev-experimental-old
1
0
Fork 0
mirror of https://github.com/vacp2p/vac.dev-experimental-old.git synced 2025-01-25 21:18:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated gulp tasks and npm scripts to provide multiple task configs.

Browse Source 
Added more gulp tasks to allow for a serve, build:dev, and build task.

Added npm scripts to trigger the different gulp tasks.

Heavy tasks, like purging and minifying, will now only be done for production builds.
This commit is contained in:
Joey Defourneaux 2018-11-06 11:57:51 -05:00
parent d5718d70a6
commit b4c38805d3
4 changed files with 3128 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -9,7 +9,7 @@ A starter kit for using [Tailwind](https://tailwindcss.com) (v0.6.1) with [Jekyl
* Minifies your CSS * Minifies your CSS
* Builds Jekyll * Builds Jekyll
* Runs [Browsersync](https://www.browsersync.io/) for live reload * Runs [Browsersync](https://www.browsersync.io/) for live reload
## Example ## Example
I used this starter for my personal blog. See the code [here](https://github.com/taylorbryant/taylorbryant.github.io). 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 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/) – [Jekyll](https://jekyllrb.com/)
## Requirements ## Requirements
* [Bundler](http://bundler.io/) * [Bundler](http://bundler.io/)
* [gulp-cli](https://www.npmjs.com/package/gulp-cli) * [gulp-cli](https://www.npmjs.com/package/gulp-cli)
* [Jekyll](https://jekyllrb.com/) * [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 ## Getting started
* `bundle install` to install Ruby gems * `bundle install` to install Ruby gems
* `npm install` to install npm packages * `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. Need your CSS in the `<head>`? Check out the [internal style version](https://github.com/taylorbryant/tailwind-jekyll-internal) of this starter kit.

122
gulpfile.babel.js
View File

@ -1,78 +1,83 @@
import browserSync from "browser-sync"; import { dest, series, src, task, watch } from "gulp";
import { spawn } from "child_process";
import gulp from "gulp";
import atimport from "postcss-import"; import atimport from "postcss-import";
import autoprefixer from "gulp-autoprefixer"; import autoprefixer from "autoprefixer";
import cleancss from "gulp-clean-css"; import browserSync from "browser-sync";
import cssnano from "cssnano";
import gulpif from "gulp-if";
import postcss from "gulp-postcss"; import postcss from "gulp-postcss";
import purgecss from "gulp-purgecss"; import purgecss from "gulp-purgecss";
import sourcemaps from "gulp-sourcemaps"
import { spawn } from "child_process";
import tailwindcss from "tailwindcss"; import tailwindcss from "tailwindcss";
/**
* General settings
*/
const mainStylesheet = "src/style.css"; /* Main stylesheet (pre-build) */ const mainStylesheet = "src/style.css"; /* Main stylesheet (pre-build) */
const siteRoot = "_site"; const siteRoot = "_site";
const tailwindConfig = "tailwind.config.js"; /* Tailwind config */ const tailwindConfig = "tailwind.config.js"; /* Tailwind config */
const cssDest = "_site/assets/css/";
let devBuild = false;
/** /**
* Fix Windows compatibility issue * Utilities
*/ */
// Flag dev/production builds
const setDevBuild = async () => { devBuild = true; }
// Fix for Windows compatibility
const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll"; const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
/** // Custom PurgeCSS Extractor
* Build Jekyll Site // https://github.com/FullHuman/purgecss
*/
const buildJekyll = () => {
browserSync.notify("Building Jekyll site...");
return spawn("bundle", ["exec", jekyll, "build"], { stdio: "inherit" });
};
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
*/
class TailwindExtractor { class TailwindExtractor {
static extract(content) { static extract(content) {
return content.match(/[A-z0-9-:\/]+/g); return content.match(/[A-z0-9-:\/]+/g) || [];
} }
} }
/** /**
* Compile CSS * Jekyll tasks
*/ */
const compileStyles = () => {
browserSync.notify("Compiling CSS...");
return gulp task('buildJekyll', () => {
.src(mainStylesheet) browserSync.notify("Building Jekyll site...");
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)])) const args = ["exec", jekyll, "build"];
.pipe(
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/"));
};
const buildSite = gulp.series(buildJekyll, compileStyles); if (devBuild) { args.push("--incremental"); }
return spawn("bundle", args, { stdio: "inherit" });
});
/** /**
* Serve site with Browsersync * CSS tasks
*/ */
const startServer = () => {
task('processCss', (done) => {
browserSync.notify('Compiling tailwind');
return src(mainStylesheet)
.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, postcss([autoprefixer(), cssnano()])))
.pipe(gulpif(devBuild, sourcemaps.write('')))
.pipe(dest(cssDest));
})
/**
* Browsersync tasks
*/
task('startServer', () => {
browserSync.init({ browserSync.init({
files: [siteRoot + "/**"], files: [siteRoot + "/**"],
open: "local", open: "local",
@ -82,7 +87,7 @@ const startServer = () => {
} }
}); });
gulp.watch( watch(
[ [
mainStylesheet, mainStylesheet,
tailwindConfig, tailwindConfig,
@ -91,12 +96,17 @@ const startServer = () => {
"**/*.yml", "**/*.yml",
"!_site/**/*", "!_site/**/*",
"!node_modules" "!node_modules"
], ], { interval: 500 },
{ interval: 500 },
buildSite buildSite
); );
}; });
const serve = gulp.series(buildSite, startServer); /**
* Exports
*/
export default serve; const buildSite = series('buildJekyll', 'processCss');
exports.serve = series(setDevBuild, buildSite, 'startServer');
exports.build_dev = series(setDevBuild, buildSite);
exports.default = series(buildSite);

3220
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -4,20 +4,23 @@
"description": "A starter kit for using Tailwind with Jekyll", "description": "A starter kit for using Tailwind with Jekyll",
"main": "gulpfile.js", "main": "gulpfile.js",
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.3.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0", "babel-register": "^6.26.0",
"browser-sync": "^2.23.7", "browser-sync": "^2.23.7",
"cssnano": "^4.1.7",
"gulp": "^4.0.0", "gulp": "^4.0.0",
"gulp-autoprefixer": "^4.0.0", "gulp-if": "^2.0.2",
"gulp-clean-css": "^3.9.3",
"gulp-postcss": "^7.0.0", "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", "postcss-import": "^11.1.0",
"tailwindcss": "^0.6.5" "tailwindcss": "^0.7.2"
}, },
"scripts": { "scripts": {
"build": "gulp css", "build": "gulp",
"dev": "gulp" "build:dev": "gulp build_dev",
"start": "gulp serve"
}, },
"author": "Taylor Bryant", "author": "Taylor Bryant",
"license": "ISC" "license": "ISC"