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
Show 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
......@@ -3,24 +3,24 @@
* 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')({
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'
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./public/**/*.html",
"./public/**/*.js",
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});
function resolvePath(pathInput) {
......@@ -31,62 +31,80 @@ function resolvePath(pathInput) {
* 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)));
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(){
return gulp.src('**/*.*',{cwd: resolvePath(paths().source.images)} )
.pipe(gulp.dest(resolvePath(paths().public.images)));
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(){
return gulp.src('favicon.ico', {cwd: resolvePath(paths().source.root)} )
.pipe(gulp.dest(resolvePath(paths().public.root)));
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(){
return gulp.src('*', {cwd: resolvePath(paths().source.fonts)})
.pipe(gulp.dest(resolvePath(paths().public.fonts)));
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(){
return gulp.src(resolvePath(paths().source.root) + '/dist/style.pkgd.css')
.pipe(gulp.src(resolvePath(paths().source.css) + '/pattern-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());
.pipe(browserSync.stream())
.on("end", done);
});
// Styleguide Copy everything but css
gulp.task('pl-copy:styleguide', function(){
return gulp.src(resolvePath(paths().source.styleguide) + '/**/!(*.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());
.pipe(browserSync.stream())
.on("end", done);
});
// 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){
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());
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);
var config = require("./patternlab-config.json"),
patternlab = require("patternlab-node")(config);
function paths() {
return config.paths;
......@@ -97,53 +115,53 @@ function getConfiguredCleanOption() {
}
function build(done) {
console.log("Building Pattern Lab ...");
patternlab.build(done, getConfiguredCleanOption());
}
gulp.task('pl-assets', gulp.series(
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'
),
function(done){
done();
})
"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) {
gulp.task("patternlab:version", function (done) {
patternlab.version();
done();
});
gulp.task('patternlab:help', function (done) {
gulp.task("patternlab:help", function (done) {
patternlab.help();
done();
});
gulp.task('patternlab:patternsonly', function (done) {
gulp.task("patternlab:patternsonly", function (done) {
patternlab.patternsonly(done, getConfiguredCleanOption());
});
gulp.task('patternlab:liststarterkits', function (done) {
gulp.task("patternlab:liststarterkits", function (done) {
patternlab.liststarterkits();
done();
});
gulp.task('patternlab:loadstarterkit', function (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:build",
gulp.series("pl-assets", build)
);
gulp.task('patternlab:installplugin', function (done) {
gulp.task("patternlab:installplugin", function (done) {
patternlab.installplugin(argv.plugin);
done();
});
......@@ -153,135 +171,191 @@ gulp.task('patternlab:installplugin', function (done) {
******************************************************/
// watch task utility functions
function getSupportedTemplateExtensions() {
var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines');
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;
return resolvePath(paths().source.patterns) + "/**/*" + dotExtension;
});
}
function reload() {
function reload(done) {
browserSync.reload();
done();
}
function reloadCSS() {
browserSync.reload('*.css');
function reloadCSS(done) {
browserSync.reload("*.css");
done();
}
function reloadJS() {
browserSync.reload('*.js');
function reloadJS(done) {
browserSync.reload("*.js");
done();
}
/******************************************************
* 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'),
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'),
require("postcss-custom-properties"),
require("autoprefixer"),
assets({
basePath: 'source/',
loadPaths: ['images/']
basePath: "source/",
loadPaths: ["images/"],
}),
require('postcss-clean')
]))
.pipe(rename('style.pkgd.css'))
.pipe(gulp.dest('./source/dist'));
require("postcss-clean"),
])
)
.pipe(rename("style.pkgd.css"))
.pipe(gulp.dest("./source/dist"))
.on("end", done);
});
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'),
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'),
require("postcss-custom-properties"),
require("autoprefixer"),
assets({
basePath: 'source/',
loadPaths: ['images/']
basePath: "source/",
loadPaths: ["images/"],
}),
require('postcss-clean'),
postcssPurgecss
]))
.pipe(rename('style.pkgd.css'))
.pipe(gulp.dest('./source/dist'));
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', function(done) {
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(done) {
done();
}));
gulp.task(
"tailwind-postcss:build:production",
gulp.series("tailwind-postcss:production", "patternlab:build")
);
function rebuild(done) {
return gulp.series(build, reload, () => 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));
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) + '/*'
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);
console.log("Watching following Pattern Lab files:", patternWatches);
gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload));
gulp.watch(patternWatches, gulp.series(build, reload));
}
gulp.task('patternlab:connect', gulp.series(function(done) {
browserSync.init({
gulp.task(
"patternlab:connect",
function (done) {
browserSync.init(
{
server: {
baseDir: resolvePath(paths().public.root)
baseDir: resolvePath(paths().public.root),
},
snippetOptions: {
// Ignore all HTML files within the templates folder
blacklist: ['/index.html', '/', '/?*']
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'
]
"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
);
}
}, 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));
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/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