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 * PATTERN LAB NODE
* EDITION-NODE-GULP * EDITION-NODE-GULP
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets. * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/ ******************************************************/
var gulp = require('gulp'), var gulp = require("gulp"),
path = require('path'), path = require("path"),
browserSync = require('browser-sync').create(), browserSync = require("browser-sync").create(),
argv = require('minimist')(process.argv.slice(2)); argv = require("minimist")(process.argv.slice(2));
const postcss = require('gulp-postcss'); const postcss = require("gulp-postcss");
const tailwindcss = require('tailwindcss'); const tailwindcss = require("tailwindcss");
const rename = require('gulp-rename'); const rename = require("gulp-rename");
const assets = require('postcss-assets'); const assets = require("postcss-assets");
const postcssPurgecss = require('@fullhuman/postcss-purgecss')({ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
content: [ content: [
'./source/**/*.mustache', "./source/**/*.mustache",
'./source/**/*.json', "./source/**/*.json",
'./source/**/*.js', "./source/**/*.js",
'./public/**/*.html', "./public/**/*.html",
'./public/**/*.js' "./public/**/*.js",
], ],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
}); });
function resolvePath(pathInput) { function resolvePath(pathInput) {
return path.resolve(pathInput).replace(/\\/g,"/"); return path.resolve(pathInput).replace(/\\/g, "/");
} }
/****************************************************** /******************************************************
* COPY TASKS - stream assets from source to destination * COPY TASKS - stream assets from source to destination
******************************************************/ ******************************************************/
// JS copy // JS copy
gulp.task('pl-copy:js', function(){ gulp.task("pl-copy:js", function (done) {
return gulp.src('**/*.js', {cwd: resolvePath(paths().source.js)} ) return gulp
.pipe(gulp.dest(resolvePath(paths().public.js))); .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(){
return gulp.src('**/*.*',{cwd: resolvePath(paths().source.images)} ) // Images copy
.pipe(gulp.dest(resolvePath(paths().public.images))); gulp.task("pl-copy:img", function (done) {
}); return gulp
.src("**/*.*", { cwd: resolvePath(paths().source.images) })
// Favicon copy .pipe(gulp.dest(resolvePath(paths().public.images)))
gulp.task('pl-copy:favicon', function(){ .on("end", done);
return gulp.src('favicon.ico', {cwd: resolvePath(paths().source.root)} ) });
.pipe(gulp.dest(resolvePath(paths().public.root)));
}); // Favicon copy
gulp.task("pl-copy:favicon", function (done) {
// Fonts copy return gulp
gulp.task('pl-copy:font', function(){ .src("favicon.ico", { cwd: resolvePath(paths().source.root) })
return gulp.src('*', {cwd: resolvePath(paths().source.fonts)}) .pipe(gulp.dest(resolvePath(paths().public.root)))
.pipe(gulp.dest(resolvePath(paths().public.fonts))); .on("end", done);
}); });
// CSS Copy // Fonts copy
// only copy style.pkgd.css and patternlab-scaffolding.css gulp.task("pl-copy:font", function (done) {
gulp.task('pl-copy:css', function(){ return gulp
return gulp.src(resolvePath(paths().source.root) + '/dist/style.pkgd.css') .src("*", { cwd: resolvePath(paths().source.fonts) })
.pipe(gulp.src(resolvePath(paths().source.css) + '/pattern-scaffolding.css')) .pipe(gulp.dest(resolvePath(paths().public.fonts)))
.pipe(gulp.dest(resolvePath(paths().public.css))) .on("end", done);
.pipe(browserSync.stream()); });
});
// CSS Copy
// Styleguide Copy everything but css // only copy style.pkgd.css and patternlab-scaffolding.css
gulp.task('pl-copy:styleguide', function(){ gulp.task("pl-copy:css", function (done) {
return gulp.src(resolvePath(paths().source.styleguide) + '/**/!(*.css)') return gulp
.pipe(gulp.dest(resolvePath(paths().public.root))) .src(resolvePath(paths().source.root) + "/dist/style.pkgd.css")
.pipe(browserSync.stream()); .pipe(
}); gulp.src(resolvePath(paths().source.css) + "/pattern-scaffolding.css")
)
// Styleguide Copy and flatten css .pipe(gulp.dest(resolvePath(paths().public.css)))
gulp.task('pl-copy:styleguide-css', function(){ .pipe(browserSync.stream())
return gulp.src(resolvePath(paths().source.styleguide) + '/**/*.css') .on("end", done);
.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)); // Styleguide Copy everything but css
return resolvePath(path.join(paths().public.styleguide, '/css')); gulp.task("pl-copy:styleguide", function (done) {
})) return gulp
.pipe(browserSync.stream()); .src(resolvePath(paths().source.styleguide) + "/**/!(*.css)")
}); .pipe(gulp.dest(resolvePath(paths().public.root)))
.pipe(browserSync.stream())
/****************************************************** .on("end", done);
* PATTERN LAB CONFIGURATION - API with core library });
******************************************************/
//read all paths from our namespaced config file // Styleguide Copy and flatten css
var config = require('./patternlab-config.json'), gulp.task("pl-copy:styleguide-css", function (done) {
patternlab = require('patternlab-node')(config); return gulp
.src(resolvePath(paths().source.styleguide) + "/**/*.css")
function paths() { .pipe(
return config.paths; 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));
function getConfiguredCleanOption() { return resolvePath(path.join(paths().public.styleguide, "/css"));
return config.cleanPublic; })
} )
.pipe(browserSync.stream())
function build(done) { .on("end", done);
patternlab.build(done, getConfiguredCleanOption()); });
}
/******************************************************
gulp.task('pl-assets', gulp.series( * PATTERN LAB CONFIGURATION - API with core library
gulp.parallel( ******************************************************/
'pl-copy:js', //read all paths from our namespaced config file
'pl-copy:img', var config = require("./patternlab-config.json"),
'pl-copy:favicon', patternlab = require("patternlab-node")(config);
'pl-copy:font',
'pl-copy:css', function paths() {
'pl-copy:styleguide', return config.paths;
'pl-copy:styleguide-css' }
),
function(done){ function getConfiguredCleanOption() {
done(); return config.cleanPublic;
}) }
);
function build(done) {
gulp.task('patternlab:version', function (done) { console.log("Building Pattern Lab ...");
patternlab.version(); patternlab.build(done, getConfiguredCleanOption());
done(); }
});
gulp.task(
gulp.task('patternlab:help', function (done) { "pl-assets",
patternlab.help(); gulp.parallel(
done(); "pl-copy:js",
}); "pl-copy:img",
"pl-copy:favicon",
gulp.task('patternlab:patternsonly', function (done) { "pl-copy:font",
patternlab.patternsonly(done, getConfiguredCleanOption()); "pl-copy:css",
}); "pl-copy:styleguide",
"pl-copy:styleguide-css"
gulp.task('patternlab:liststarterkits', function (done) { )
patternlab.liststarterkits(); );
done();
}); gulp.task("patternlab:version", function (done) {
patternlab.version();
gulp.task('patternlab:loadstarterkit', function (done) { done();
patternlab.loadstarterkit(argv.kit, argv.clean); });
done();
}); gulp.task("patternlab:help", function (done) {
patternlab.help();
gulp.task('patternlab:build', gulp.series('pl-assets', build, function(done){ done();
done(); });
}));
gulp.task("patternlab:patternsonly", function (done) {
gulp.task('patternlab:installplugin', function (done) { patternlab.patternsonly(done, getConfiguredCleanOption());
patternlab.installplugin(argv.plugin); });
done();
}); gulp.task("patternlab:liststarterkits", function (done) {
patternlab.liststarterkits();
/****************************************************** done();
* SERVER AND WATCH TASKS });
******************************************************/
// watch task utility functions gulp.task("patternlab:loadstarterkit", function (done) {
function getSupportedTemplateExtensions() { patternlab.loadstarterkit(argv.kit, argv.clean);
var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines'); done();
return engines.getSupportedFileExtensions(); });
}
function getTemplateWatches() { gulp.task(
return getSupportedTemplateExtensions().map(function (dotExtension) { "patternlab:build",
return resolvePath(paths().source.patterns) + '/**/*' + dotExtension; gulp.series("pl-assets", build)
}); );
}
gulp.task("patternlab:installplugin", function (done) {
function reload() { patternlab.installplugin(argv.plugin);
browserSync.reload(); done();
} });
function reloadCSS() { /******************************************************
browserSync.reload('*.css'); * SERVER AND WATCH TASKS
} ******************************************************/
// watch task utility functions
function reloadJS() { function getSupportedTemplateExtensions() {
browserSync.reload('*.js'); var engines = require("./node_modules/patternlab-node/core/lib/pattern_engines");
} return engines.getSupportedFileExtensions();
}
/****************************************************** function getTemplateWatches() {
* TAILWIND AND POSTCSS TASKS return getSupportedTemplateExtensions().map(function (dotExtension) {
******************************************************/ return resolvePath(paths().source.patterns) + "/**/*" + dotExtension;
});
gulp.task('tailwind-postcss', function () { }
return gulp.src('./source/css/style.css')
.pipe(postcss([ function reload(done) {
require('postcss-import'), browserSync.reload();
tailwindcss('./tailwind.config.js'), done();
require('postcss-nested'), }
// require('postcss-preset-env'),
require('postcss-custom-properties'), function reloadCSS(done) {
require('autoprefixer'), browserSync.reload("*.css");
assets({ done();
basePath: 'source/', }
loadPaths: ['images/']
}), function reloadJS(done) {
require('postcss-clean') browserSync.reload("*.js");
])) done();
.pipe(rename('style.pkgd.css')) }
.pipe(gulp.dest('./source/dist'));
}); /******************************************************
* TAILWIND AND POSTCSS TASKS
gulp.task('tailwind-postcss:production', function(){ ******************************************************/
return gulp.src('./source/css/style.css')
.pipe(postcss([ gulp.task("tailwind-postcss", function (done) {
require('postcss-import'), return gulp
tailwindcss('./tailwind.config.js'), .src("./source/css/style.css")
require('postcss-nested'), .pipe(
// require('postcss-preset-env'), postcss([
require('postcss-custom-properties'), require("postcss-import"),
require('autoprefixer'), tailwindcss("./tailwind.config.js"),
assets({ require("postcss-nested"),
basePath: 'source/', // require('postcss-preset-env'),
loadPaths: ['images/'] require("postcss-custom-properties"),
}), require("autoprefixer"),
require('postcss-clean'), assets({
postcssPurgecss basePath: "source/",
])) loadPaths: ["images/"],
.pipe(rename('style.pkgd.css')) }),
.pipe(gulp.dest('./source/dist')); require("postcss-clean"),
}); ])
)
gulp.task('tailwind-postcss:build', gulp.series('tailwind-postcss', 'patternlab:build', function(done) { .pipe(rename("style.pkgd.css"))
done(); .pipe(gulp.dest("./source/dist"))
})); .on("end", done);
});
gulp.task('tailwind-postcss:build:production', gulp.series('tailwind-postcss:production', 'patternlab:build', function(done) {
done(); gulp.task("tailwind-postcss:production", function (done) {
})); return gulp
.src("./source/css/style.css")
function watch() { .pipe(
gulp.watch(resolvePath(paths().source.js) + '/**/*.js', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:js', reloadJS)); postcss([
gulp.watch(resolvePath(paths().source.css) + '/**/*.pcss', { awaitWriteFinish: true }).on('change', gulp.series('tailwind-postcss')); require("postcss-import"),
gulp.watch(resolvePath(paths().source.root) + '/dist/style.pkgd.css', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:css', reloadCSS)); tailwindcss("./tailwind.config.js"),
gulp.watch(resolvePath(paths().source.styleguide) + '/**/*.*', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reloadCSS)); require("postcss-nested"),
// require('postcss-preset-env'),
var patternWatches = [ require("postcss-custom-properties"),
resolvePath(paths().source.patterns) + '/**/*.json', require("autoprefixer"),
resolvePath(paths().source.patterns) + '/**/*.md', assets({
resolvePath(paths().source.data) + '/*.json', basePath: "source/",
resolvePath(paths().source.fonts) + '/*', loadPaths: ["images/"],
resolvePath(paths().source.images) + '/*', }),
resolvePath(paths().source.meta) + '/*', require("postcss-clean"),
resolvePath(paths().source.annotations) + '/*' postcssPurgecss,
].concat(getTemplateWatches()); ])
)
console.log(patternWatches); .pipe(rename("style.pkgd.css"))
.pipe(gulp.dest("./source/dist"))
gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload)); .on("end", done);
} });
gulp.task('patternlab:connect', gulp.series(function(done) { gulp.task(
browserSync.init({ "tailwind-postcss:build",
server: { gulp.series("tailwind-postcss", "patternlab:build")
baseDir: resolvePath(paths().public.root) );
},
snippetOptions: { gulp.task(
// Ignore all HTML files within the templates folder "tailwind-postcss:build:production",
blacklist: ['/index.html', '/', '/?*'] gulp.series("tailwind-postcss:production", "patternlab:build")
}, );
notify: {
styles: [ function rebuild(done) {
'display: none', return gulp.series(build, reload, () => done());
'padding: 15px', }
'font-family: sans-serif',
'position: fixed', function watch() {
'font-size: 1em', const jsPaths = [
'z-index: 9999', resolvePath(paths().source.js) + "/*.js",
'bottom: 0px', resolvePath(paths().source.js) + "/**/*.js",
'right: 0px', ];
'border-top-left-radius: 5px', const postcssPaths = [
'background-color: #1B2032', resolvePath(paths().source.css) + "/*.pcss",
'opacity: 0.4', resolvePath(paths().source.css) + "/**/*.pcss",
'margin: 0', ];
'color: white',
'text-align: center' // Detect JS changes
] gulp.watch(
} jsPaths,
}, function(){ gulp.series("pl-copy:js", reloadJS)
console.log('PATTERN LAB NODE WATCHING FOR CHANGES'); );
done();
}); // Detect postcss file changes
})); gulp.watch(
postcssPaths,
/****************************************************** gulp.series("tailwind-postcss")
* COMPOUND TASKS );
******************************************************/
gulp.task('default', gulp.series('tailwind-postcss:build:production')); console.log("Watching following source files:", jsPaths.concat(postcssPaths));
gulp.task('patternlab:watch', gulp.series('tailwind-postcss:build', watch));
gulp.task('patternlab:serve', gulp.series('tailwind-postcss:build', 'patternlab:connect', watch)); // 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 @@ ...@@ -10,7 +10,7 @@
class="footer-brand w-9 md:w-10 pb-3" class="footer-brand w-9 md:w-10 pb-3"
/> />
<p class="para hidden md:block"> <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. ostatní sdílet za stejných podmínek.
</p> </p>
</div> </div>
......
source/css/atoms/button.pcss
+ 1
− 1
View file @ 8879aeaa
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.btn-body { .btn-body {
@apply block; @apply block;
padding: .5em 2em; padding: .75em 2em;
} }
&:hover { &: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.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft