Updated gulp tasks and npm scripts to provide multiple task configs.
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
parent
d5718d70a6
commit
b4c38805d3
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,78 +1,83 @@
|
|||
import browserSync from "browser-sync";
|
||||
import { spawn } from "child_process";
|
||||
import gulp from "gulp";
|
||||
import { dest, series, src, task, watch } from "gulp";
|
||||
|
||||
import atimport from "postcss-import";
|
||||
import autoprefixer from "gulp-autoprefixer";
|
||||
import cleancss from "gulp-clean-css";
|
||||
import autoprefixer from "autoprefixer";
|
||||
import browserSync from "browser-sync";
|
||||
import cssnano from "cssnano";
|
||||
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 tailwindcss from "tailwindcss";
|
||||
|
||||
/**
|
||||
* General settings
|
||||
*/
|
||||
|
||||
const mainStylesheet = "src/style.css"; /* Main stylesheet (pre-build) */
|
||||
const siteRoot = "_site";
|
||||
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";
|
||||
|
||||
/**
|
||||
* Build Jekyll Site
|
||||
*/
|
||||
const buildJekyll = () => {
|
||||
browserSync.notify("Building Jekyll site...");
|
||||
|
||||
return spawn("bundle", ["exec", 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
|
||||
* Jekyll tasks
|
||||
*/
|
||||
const compileStyles = () => {
|
||||
browserSync.notify("Compiling CSS...");
|
||||
|
||||
return gulp
|
||||
.src(mainStylesheet)
|
||||
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
|
||||
.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/"));
|
||||
};
|
||||
task('buildJekyll', () => {
|
||||
browserSync.notify("Building Jekyll site...");
|
||||
const args = ["exec", jekyll, "build"];
|
||||
|
||||
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({
|
||||
files: [siteRoot + "/**"],
|
||||
open: "local",
|
||||
|
|
@ -82,7 +87,7 @@ const startServer = () => {
|
|||
}
|
||||
});
|
||||
|
||||
gulp.watch(
|
||||
watch(
|
||||
[
|
||||
mainStylesheet,
|
||||
tailwindConfig,
|
||||
|
|
@ -91,12 +96,17 @@ const startServer = () => {
|
|||
"**/*.yml",
|
||||
"!_site/**/*",
|
||||
"!node_modules"
|
||||
],
|
||||
{ interval: 500 },
|
||||
], { interval: 500 },
|
||||
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);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
|
|
@ -4,20 +4,23 @@
|
|||
"description": "A starter kit for using Tailwind with Jekyll",
|
||||
"main": "gulpfile.js",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.3.1",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"browser-sync": "^2.23.7",
|
||||
"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.5"
|
||||
"tailwindcss": "^0.7.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp css",
|
||||
"dev": "gulp"
|
||||
"build": "gulp",
|
||||
"build:dev": "gulp build_dev",
|
||||
"start": "gulp serve"
|
||||
},
|
||||
"author": "Taylor Bryant",
|
||||
"license": "ISC"
|
||||
|
|
|
|||
Loading…
Reference in New Issue