Skip to content
Snippets Groups Projects
Commit 8879aeaa authored by xaralis's avatar xaralis
Browse files

Gulpfile polishing

parent f3afe428
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.editorconfig 0 → 100644
+ 8
− 0
View file @ 8879aeaa
# Editor configuration, see https://editorconfig.org
root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
gulpfile.js
+ 361
− 287
View file @ 8879aeaa
/******************************************************
* 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 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',
'./public/**/*.html',
'./public/**/*.js'
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
function resolvePath(pathInput) {
return path.resolve(pathInput).replace(/\\/g,"/");
}
/******************************************************
* COPY TASKS - stream assets from source to destination
******************************************************/
// JS copy
gulp.task('pl-copy:js', function(){
return gulp.src('**/*.js', {cwd: resolvePath(paths().source.js)} )
.pipe(gulp.dest(resolvePath(paths().public.js)));
});
// Images copy
gulp.task('pl-copy:img', function(){
return gulp.src('**/*.*',{cwd: resolvePath(paths().source.images)} )
.pipe(gulp.dest(resolvePath(paths().public.images)));
});
// Favicon copy
gulp.task('pl-copy:favicon', function(){
return gulp.src('favicon.ico', {cwd: resolvePath(paths().source.root)} )
.pipe(gulp.dest(resolvePath(paths().public.root)));
});
// Fonts copy
gulp.task('pl-copy:font', function(){
return gulp.src('*', {cwd: resolvePath(paths().source.fonts)})
.pipe(gulp.dest(resolvePath(paths().public.fonts)));
});
// CSS Copy
// only copy style.pkgd.css and patternlab-scaffolding.css
gulp.task('pl-copy:css', function(){
return gulp.src(resolvePath(paths().source.root) + '/dist/style.pkgd.css')
.pipe(gulp.src(resolvePath(paths().source.css) + '/pattern-scaffolding.css'))
.pipe(gulp.dest(resolvePath(paths().public.css)))
.pipe(browserSync.stream());
});
// Styleguide Copy everything but css
gulp.task('pl-copy:styleguide', function(){
return gulp.src(resolvePath(paths().source.styleguide) + '/**/!(*.css)')
.pipe(gulp.dest(resolvePath(paths().public.root)))
.pipe(browserSync.stream());
});
// Styleguide Copy and flatten css
gulp.task('pl-copy:styleguide-css', function(){
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());
});
/******************************************************
* 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) {
patternlab.build(done, getConfiguredCleanOption());
}
gulp.task('pl-assets', gulp.series(
gulp.parallel(
'pl-copy:js',
'pl-copy:img',
'pl-copy:favicon',
'pl-copy:font',
'pl-copy:css',
'pl-copy:styleguide',
'pl-copy:styleguide-css'
),
function(done){
done();
})
);
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, function(done){
done();
}));
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() {
browserSync.reload();
}
function reloadCSS() {
browserSync.reload('*.css');
}
function reloadJS() {
browserSync.reload('*.js');
}
/******************************************************
* TAILWIND AND POSTCSS TASKS
******************************************************/
gulp.task('tailwind-postcss', function () {
return gulp.src('./source/css/style.css')
.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('style.pkgd.css'))
.pipe(gulp.dest('./source/dist'));
});
gulp.task('tailwind-postcss:production', function(){
return gulp.src('./source/css/style.css')
.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('style.pkgd.css'))
.pipe(gulp.dest('./source/dist'));
});
gulp.task('tailwind-postcss:build', gulp.series('tailwind-postcss', 'patternlab:build', function(done) {
done();
}));
gulp.task('tailwind-postcss:build:production', gulp.series('tailwind-postcss:production', 'patternlab:build', function(done) {
done();
}));
function watch() {
gulp.watch(resolvePath(paths().source.js) + '/**/*.js', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:js', reloadJS));
gulp.watch(resolvePath(paths().source.css) + '/**/*.pcss', { awaitWriteFinish: true }).on('change', gulp.series('tailwind-postcss'));
gulp.watch(resolvePath(paths().source.root) + '/dist/style.pkgd.css', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:css', reloadCSS));
gulp.watch(resolvePath(paths().source.styleguide) + '/**/*.*', { awaitWriteFinish: true }).on('change', 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(patternWatches);
gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload));
}
gulp.task('patternlab:connect', gulp.series(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'
]
}
}, function(){
console.log('PATTERN LAB NODE WATCHING FOR CHANGES');
done();
});
}));
/******************************************************
* COMPOUND TASKS
******************************************************/
gulp.task('default', gulp.series('tailwind-postcss:build:production'));
gulp.task('patternlab:watch', gulp.series('tailwind-postcss:build', watch));
gulp.task('patternlab:serve', gulp.series('tailwind-postcss:build', 'patternlab:connect', watch));
/******************************************************
* 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 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",
"./public/**/*.html",
"./public/**/*.js",
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});
function resolvePath(pathInput) {
return path.resolve(pathInput).replace(/\\/g, "/");
}
/******************************************************
* COPY TASKS - stream assets from source to destination
******************************************************/
// JS copy
gulp.task("pl-copy:js", function (done) {
return gulp
.src("**/*.js", { cwd: resolvePath(paths().source.js) })
.pipe(gulp.dest(resolvePath(paths().public.js)))
.on("end", done);
});
// 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);
});
// 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);
});
// CSS Copy
// only copy style.pkgd.css and patternlab-scaffolding.css
gulp.task("pl-copy:css", function (done) {
return gulp
.src(resolvePath(paths().source.root) + "/dist/style.pkgd.css")
.pipe(
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:js",
"pl-copy:img",
"pl-copy:favicon",
"pl-copy:font",
"pl-copy:css",
"pl-copy:styleguide",
"pl-copy:styleguide-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", function (done) {
return gulp
.src("./source/css/style.css")
.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("style.pkgd.css"))
.pipe(gulp.dest("./source/dist"))
.on("end", done);
});
gulp.task("tailwind-postcss:production", function (done) {
return gulp
.src("./source/css/style.css")
.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("style.pkgd.css"))
.pipe(gulp.dest("./source/dist"))
.on("end", done);
});
gulp.task(
"tailwind-postcss:build",
gulp.series("tailwind-postcss", "patternlab:build")
);
gulp.task(
"tailwind-postcss:build:production",
gulp.series("tailwind-postcss:production", "patternlab:build")
);
function rebuild(done) {
return gulp.series(build, reload, () => done());
}
function watch() {
const jsPaths = [
resolvePath(paths().source.js) + "/*.js",
resolvePath(paths().source.js) + "/**/*.js",
];
const postcssPaths = [
resolvePath(paths().source.css) + "/*.pcss",
resolvePath(paths().source.css) + "/**/*.pcss",
];
// Detect JS changes
gulp.watch(
jsPaths,
gulp.series("pl-copy:js", reloadJS)
);
// Detect postcss file changes
gulp.watch(
postcssPaths,
gulp.series("tailwind-postcss")
);
console.log("Watching following source files:", jsPaths.concat(postcssPaths));
// Detect updated css bundle change
gulp.watch(
resolvePath(paths().source.root) + "/dist/style.pkgd.css",
gulp.series("pl-copy:css", reloadCSS)
);
// Detect changes in styleguide assets down in node_modules
gulp.watch(
[
resolvePath(paths().source.styleguide) + "/*.*",
resolvePath(paths().source.styleguide) + "/**/*.*",
],
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, 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
);
}
);
/******************************************************
* COMPOUND TASKS
******************************************************/
gulp.task("default", gulp.series("tailwind-postcss:build:production"));
gulp.task("patternlab:watch", gulp.series("tailwind-postcss:build", watch));
gulp.task(
"patternlab:serve",
gulp.series("tailwind-postcss:build", "patternlab:connect", watch)
);
source/_patterns/02-organisms/00-global/footer.mustache
+ 1
− 1
View file @ 8879aeaa
......@@ -10,7 +10,7 @@
class="footer-brand w-9 md:w-10 pb-3"
/>
<p class="para hidden md:block">
Piráti, 2020. Všechna práva vyhlazena.Sdílejte a nechte
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
ostatní sdílet za stejných podmínek.
</p>
</div>
......
source/css/atoms/button.pcss
+ 1
− 1
View file @ 8879aeaa
......@@ -8,7 +8,7 @@
.btn-body {
@apply block;
padding: .5em 2em;
padding: .75em 2em;
}
&:hover {
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ 8879aeaa
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft