Select Git revision
gulpfile.js
gulpfile.js 12.19 KiB
/******************************************************
* PATTERN LAB NODE
* EDITION-NODE-GULP
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
var gulp = require("gulp"),
path = require("path"),
browserSync = require("browser-sync").create(),
argv = require("minimist")(process.argv.slice(2));
const vue = require('rollup-plugin-vue');
const { terser } = require('rollup-plugin-terser');
const rollup = require('@rollup/stream');
const buble = require('@rollup/plugin-buble');
const commonjs = require('@rollup/plugin-commonjs');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const replace = require('@rollup/plugin-replace');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const addsrc = require('gulp-add-src');
const concat = require('gulp-concat');
const postcss = require("gulp-postcss");
const tailwindcss = require("tailwindcss");
const rename = require("gulp-rename");
const assets = require("postcss-assets");
const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
whitelistPatterns: [
/(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
/(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
/(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
/(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
/max-w-*/, // maximum width
/grid-cols-\d\d?/, // grid columns
/col-span-\d\d?/, // grid spans
/row-span-\d\d?/, // grid spans
/grid-flow/, // grid flow
/(sm|md|lg|xl)(\\:)text-.*/,
// /text-*/,
/ico--*/, // icons
],
});
function resolvePath(pathInput) {
return path.resolve(pathInput).replace(/\\/g, "/");
}
/******************************************************
* COPY TASKS - stream assets from source to destination
******************************************************/
// Images copy
gulp.task("pl-copy:img", function (done) {
return gulp
.src("**/*.*", { cwd: resolvePath(paths().source.images) })
.pipe(gulp.dest(resolvePath(paths().public.images)))
.on("end", done);
});
// Favicon copy
gulp.task("pl-copy:favicon", function (done) {
return gulp
.src("favicon.ico", { cwd: resolvePath(paths().source.root) }) .pipe(gulp.dest(resolvePath(paths().public.root)))
.on("end", done);
});
// Iconset font copy
gulp.task("pl-copy:icons", function (done) {
return gulp
.src("**/*.*", { cwd: resolvePath(paths().source.iconfont) })
.pipe(gulp.dest(resolvePath(paths().public.fonts)))
.on("end", done);
});
// Fonts copy
gulp.task("pl-copy:font", function (done) {
return gulp
.src("*", { cwd: resolvePath(paths().source.fonts) })
.pipe(gulp.dest(resolvePath(paths().public.fonts)))
.on("end", done);
});
// Custom styleguide CSS copy
// only copy patternlab-scaffolding.css
gulp.task("pl-copy:styleguide-custom-css", function (done) {
return gulp
.src(resolvePath(paths().source.css) + "/pattern-scaffolding.css")
.pipe(gulp.dest(resolvePath(paths().public.css)))
.pipe(browserSync.stream())
.on("end", done);
});
// Styleguide Copy everything but css
gulp.task("pl-copy:styleguide", function (done) {
return gulp
.src(resolvePath(paths().source.styleguide) + "/**/!(*.css)")
.pipe(gulp.dest(resolvePath(paths().public.root)))
.pipe(browserSync.stream())
.on("end", done);
});
// Styleguide Copy and flatten css
gulp.task("pl-copy:styleguide-css", function (done) {
return gulp
.src(resolvePath(paths().source.styleguide) + "/**/*.css")
.pipe(
gulp.dest(function (file) {
//flatten anything inside the styleguide into a single output dir per http://stackoverflow.com/a/34317320/1790362
file.path = path.join(file.base, path.basename(file.path));
return resolvePath(path.join(paths().public.styleguide, "/css"));
})
)
.pipe(browserSync.stream())
.on("end", done);
});
/******************************************************
* PATTERN LAB CONFIGURATION - API with core library
******************************************************/
//read all paths from our namespaced config file
var config = require("./patternlab-config.json"),
patternlab = require("patternlab-node")(config);
function paths() {
return config.paths;
}
function getConfiguredCleanOption() {
return config.cleanPublic;
}
function build(done) { console.log("Building Pattern Lab ...");
patternlab.build(done, getConfiguredCleanOption());
}
gulp.task(
"pl-assets",
gulp.parallel(
"pl-copy:img",
"pl-copy:favicon",
"pl-copy:icons",
"pl-copy:font",
"pl-copy:styleguide",
"pl-copy:styleguide-css",
"pl-copy:styleguide-custom-css",
)
);
gulp.task("patternlab:version", function (done) {
patternlab.version();
done();
});
gulp.task("patternlab:help", function (done) {
patternlab.help();
done();
});
gulp.task("patternlab:patternsonly", function (done) {
patternlab.patternsonly(done, getConfiguredCleanOption());
});
gulp.task("patternlab:liststarterkits", function (done) {
patternlab.liststarterkits();
done();
});
gulp.task("patternlab:loadstarterkit", function (done) {
patternlab.loadstarterkit(argv.kit, argv.clean);
done();
});
gulp.task(
"patternlab:build",
gulp.series("pl-assets", build)
);
gulp.task("patternlab:installplugin", function (done) {
patternlab.installplugin(argv.plugin);
done();
});
/******************************************************
* SERVER AND WATCH TASKS
******************************************************/
// watch task utility functions
function getSupportedTemplateExtensions() {
var engines = require("./node_modules/patternlab-node/core/lib/pattern_engines");
return engines.getSupportedFileExtensions();
}
function getTemplateWatches() {
return getSupportedTemplateExtensions().map(function (dotExtension) {
return resolvePath(paths().source.patterns) + "/**/*" + dotExtension;
});
}
function reload(done) {
browserSync.reload();
done();
}
function reloadCSS(done) {
browserSync.reload("*.css");
done();
}
function reloadJS(done) {
browserSync.reload("*.js");
done();
}
/******************************************************
* TAILWIND AND POSTCSS TASKS
******************************************************/
gulp.task("tailwind-postcss:build", function (done) {
return gulp
.src("./source/css/style.pcss")
.pipe(
postcss([
require("postcss-import"),
tailwindcss("./tailwind.config.js"),
require("postcss-nested"),
// require('postcss-preset-env'),
require("postcss-custom-properties"),
require("autoprefixer"),
assets({
basePath: "source/",
loadPaths: ["images/"],
}),
require("postcss-clean"),
])
)
.pipe(rename("styles.css"))
.pipe(gulp.dest(resolvePath(paths().public.css)))
.on("end", done);
});
gulp.task("tailwind-postcss:build:production", function (done) {
return gulp
.src("./source/css/style.pcss")
.pipe(
postcss([
require("postcss-import"),
tailwindcss("./tailwind.config.js"),
require("postcss-nested"),
// require('postcss-preset-env'),
require("postcss-custom-properties"),
require("autoprefixer"),
assets({
basePath: "source/",
loadPaths: ["images/"],
}),
require("postcss-clean"),
postcssPurgecss,
])
)
.pipe(rename("styles.css"))
.pipe(gulp.dest(resolvePath(paths().public.css)))
.on("end", done);
});
function rebuild(done) {
return gulp.series(build, reload, () => done());
}
function watch () {
const jsPaths = [
resolvePath(paths().source.js) + "/*.js",
resolvePath(paths().source.js) + "/*.vue",
resolvePath(paths().source.js) + "/**/*.js", resolvePath(paths().source.js) + "/**/*.vue",
];
const postcssPaths = [
resolvePath(paths().source.css) + "/*.pcss",
resolvePath(paths().source.css) + "/**/*.pcss",
];
// Detect JS changes
gulp.watch(
jsPaths,
{useFsEvents: false},
gulp.series("rollup:build", reloadJS)
);
// Detect postcss file changes
gulp.watch(
postcssPaths,
{useFsEvents: false},
gulp.series("tailwind-postcss:build", reloadCSS)
);
console.log("Watching following source files:", jsPaths.concat(postcssPaths));
// Detect changes in custom styleguide CSS
gulp.watch(
resolvePath(paths().source.css) + "/pattern-scaffolding.css",
{useFsEvents: false},
gulp.series("pl-copy:styleguide-custom-css", reloadCSS)
);
// Detect changes in styleguide assets down in node_modules
gulp.watch(
[
resolvePath(paths().source.styleguide) + "/*.*",
resolvePath(paths().source.styleguide) + "/**/*.*",
],
{useFsEvents: false},
gulp.series("pl-copy:styleguide", "pl-copy:styleguide-css", reloadCSS)
);
var patternWatches = [
resolvePath(paths().source.patterns) + "/**/*.json",
resolvePath(paths().source.patterns) + "/**/*.md",
resolvePath(paths().source.data) + "/**/*.json",
resolvePath(paths().source.fonts) + "/**/*",
resolvePath(paths().source.images) + "/**/*",
resolvePath(paths().source.meta) + "/**/*",
resolvePath(paths().source.annotations) + "/**/*",
].concat(getTemplateWatches());
console.log("Watching following Pattern Lab files:", patternWatches);
gulp.watch(patternWatches, {useFsEvents: false}, gulp.series(build, reload));
}
gulp.task(
"patternlab:connect",
function (done) {
browserSync.init(
{
server: {
baseDir: resolvePath(paths().public.root),
},
snippetOptions: {
// Ignore all HTML files within the templates folder
blacklist: ["/index.html", "/", "/?*"],
},
notify: {
styles: [
"display: none", "padding: 15px",
"font-family: sans-serif",
"position: fixed",
"font-size: 1em",
"z-index: 9999",
"bottom: 0px",
"right: 0px",
"border-top-left-radius: 5px",
"background-color: #1B2032",
"opacity: 0.4",
"margin: 0",
"color: white",
"text-align: center",
],
},
},
done
);
}
);
const buildJSBundle = (env) => {
const isProd = env === "production";
const plugins = [
vue({ css: false }),
buble({
exclude: "node_modules/**/*",
target: {
chrome: 71,
firefox: 64
},
}),
commonjs(),
nodeResolve({
extensions: ['.js', '.vue'],
browser: true,
preferBuiltins: true
}),
replace({
'process.env.NODE_ENV': JSON.stringify(env),
})
];
if (isProd) {
plugins.push(terser());
}
return function () {
return rollup({
plugins,
input: resolvePath(paths().source.js) + "/main.js",
output: {
format: "iife",
sourcemap: !isProd,
globals: {
'vue': 'Vue',
},
},
external: ["vue"],
})
// .on('bundle', bundle => { rollupCache = bundle })
.pipe(source("main.bundle.js"))
.pipe(buffer())
// .pipe(addsrc.prepend([
// './node_modules/vue/dist/vue.js'
// ]))
// .pipe(concat("main.bundle.js"))
.pipe(gulp.dest("./public/js"));
};}
gulp.task('rollup:build', buildJSBundle("development"));
gulp.task('rollup:build:production', buildJSBundle("production"));
gulp.task(
"site:build",
gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build")
);
gulp.task(
"site:build:production",
// Build patternlab first to have all the necessary CSS classes ready for auto purge.
gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production"))
);
/******************************************************
* COMPOUND TASKS
******************************************************/
gulp.task("default", gulp.series("site:build:production"));
gulp.task("patternlab:watch", gulp.series("site:build", watch));
gulp.task(
"patternlab:serve",
gulp.series("site:build", "patternlab:connect", watch)
);