mirror of
https://github.com/penpot/penpot.git
synced 2025-06-02 21:51:37 +02:00
🔥 Remove gulp (#6592)
This commit is contained in:
Belén Albeza
GitHub
parent
2650eccd09
commit
e88b3bae5a
1 changed files with 0 additions and 450 deletions
|
|
@ -1,450 +0,0 @@
|
||||||
import fs from "fs";
|
|
||||||
import l from "lodash";
|
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
|
|
||||||
import log from 'fancy-log';
|
|
||||||
|
|
||||||
import gulp from "gulp";
|
|
||||||
import gulpConcat from "gulp-concat";
|
|
||||||
import gulpGzip from "gulp-gzip";
|
|
||||||
import gulpMustache from "gulp-mustache";
|
|
||||||
import gulpPostcss from "gulp-postcss";
|
|
||||||
import gulpRename from "gulp-rename";
|
|
||||||
|
|
||||||
import * as sass from "sass";
|
|
||||||
import gsass from "gulp-sass";
|
|
||||||
const gulpSass = gsass(sass);
|
|
||||||
|
|
||||||
import svgSprite from "gulp-svg-sprite";
|
|
||||||
import rename from "gulp-rename";
|
|
||||||
|
|
||||||
import autoprefixer from "autoprefixer";
|
|
||||||
import modules from "postcss-modules";
|
|
||||||
|
|
||||||
import clean from "postcss-clean";
|
|
||||||
import { mkdirp } from "mkdirp";
|
|
||||||
import { rimraf } from "rimraf";
|
|
||||||
|
|
||||||
import gettext from "gettext-parser";
|
|
||||||
import * as marked from "marked";
|
|
||||||
|
|
||||||
import mapStream from "map-stream";
|
|
||||||
|
|
||||||
/***********************************************
|
|
||||||
* Marked Extensions
|
|
||||||
***********************************************/
|
|
||||||
|
|
||||||
// Name of Penpot's top level package
|
|
||||||
const ROOT_NAME = "app";
|
|
||||||
|
|
||||||
const renderer = {
|
|
||||||
link(href, title, text) {
|
|
||||||
return `<a href="${href}" target="_blank">${text}</a>`;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
marked.use({ renderer });
|
|
||||||
|
|
||||||
/***********************************************
|
|
||||||
* Helpers
|
|
||||||
***********************************************/
|
|
||||||
|
|
||||||
// Templates
|
|
||||||
|
|
||||||
function readLocales() {
|
|
||||||
const langs = [
|
|
||||||
"ar",
|
|
||||||
"ca",
|
|
||||||
"de",
|
|
||||||
"el",
|
|
||||||
"en",
|
|
||||||
"eu",
|
|
||||||
"it",
|
|
||||||
"es",
|
|
||||||
"fa",
|
|
||||||
"fr",
|
|
||||||
"he",
|
|
||||||
"nb_NO",
|
|
||||||
"pl",
|
|
||||||
"pt_BR",
|
|
||||||
"ro",
|
|
||||||
"id",
|
|
||||||
"ru",
|
|
||||||
"tr",
|
|
||||||
"zh_CN",
|
|
||||||
"zh_Hant",
|
|
||||||
"hr",
|
|
||||||
"gl",
|
|
||||||
"pt_PT",
|
|
||||||
"cs",
|
|
||||||
"fo",
|
|
||||||
"ko",
|
|
||||||
"lv",
|
|
||||||
"nl",
|
|
||||||
// this happens when file does not matches correct
|
|
||||||
// iso code for the language.
|
|
||||||
["ja_jp", "jpn_JP"],
|
|
||||||
// ["fi", "fin_FI"],
|
|
||||||
["uk", "ukr_UA"],
|
|
||||||
"ha"
|
|
||||||
];
|
|
||||||
const result = {};
|
|
||||||
|
|
||||||
for (let lang of langs) {
|
|
||||||
let filename = `${lang}.po`;
|
|
||||||
if (l.isArray(lang)) {
|
|
||||||
filename = `${lang[1]}.po`;
|
|
||||||
lang = lang[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
const content = fs.readFileSync(`./translations/${filename}`, { encoding: "utf-8" });
|
|
||||||
|
|
||||||
lang = lang.toLowerCase();
|
|
||||||
|
|
||||||
const data = gettext.po.parse(content, "utf-8");
|
|
||||||
const trdata = data.translations[""];
|
|
||||||
|
|
||||||
for (let key of Object.keys(trdata)) {
|
|
||||||
if (key === "") continue;
|
|
||||||
const comments = trdata[key].comments || {};
|
|
||||||
|
|
||||||
if (l.isNil(result[key])) {
|
|
||||||
result[key] = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
const isMarkdown = l.includes(comments.flag, "markdown");
|
|
||||||
|
|
||||||
const msgs = trdata[key].msgstr;
|
|
||||||
if (msgs.length === 1) {
|
|
||||||
let message = msgs[0];
|
|
||||||
if (isMarkdown) {
|
|
||||||
message = marked.parseInline(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
result[key][lang] = message;
|
|
||||||
} else {
|
|
||||||
result[key][lang] = msgs.map((item) => {
|
|
||||||
if (isMarkdown) {
|
|
||||||
return marked.parseInline(item);
|
|
||||||
} else {
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// if (key === "modals.delete-font.title") {
|
|
||||||
// console.dir(trdata[key], {depth:10});
|
|
||||||
// console.dir(result[key], {depth:10});
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return JSON.stringify(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
function readManifest() {
|
|
||||||
try {
|
|
||||||
const manifestPath = path.resolve("./resources/public/js/manifest.json");
|
|
||||||
const content = JSON.parse(fs.readFileSync(manifestPath, { encoding: "utf8" }));
|
|
||||||
|
|
||||||
const index = {
|
|
||||||
config: "js/config.js?ts=" + Date.now(),
|
|
||||||
polyfills: "js/polyfills.js?ts=" + Date.now(),
|
|
||||||
};
|
|
||||||
|
|
||||||
for (let item of content) {
|
|
||||||
index[item.name] = "js/" + item["output-name"];
|
|
||||||
}
|
|
||||||
|
|
||||||
return index;
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error on reading manifest, using default.", e);
|
|
||||||
return {
|
|
||||||
config: "js/config.js",
|
|
||||||
polyfills: "js/polyfills.js",
|
|
||||||
main: "js/main.js",
|
|
||||||
shared: "js/shared.js",
|
|
||||||
worker: "js/worker.js",
|
|
||||||
rasterizer: "js/rasterizer.js",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function touch() {
|
|
||||||
return mapStream(function (file, cb) {
|
|
||||||
// console.log("touch", file.path);
|
|
||||||
if (file.isNull()) {
|
|
||||||
return cb(null, file);
|
|
||||||
} else {
|
|
||||||
// Update file modification and access time
|
|
||||||
return fs.utimes(file.path, new Date(), new Date(), () => {
|
|
||||||
// console.log("touched", file.path);
|
|
||||||
cb(null, file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let cacheStore = {}
|
|
||||||
|
|
||||||
function cache(name){
|
|
||||||
if (!cacheStore[name]) {
|
|
||||||
cacheStore[name] = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
return mapStream(function(file, callback) {
|
|
||||||
if (file.isNull()) {
|
|
||||||
return callback(null, file);
|
|
||||||
} else if (file.isStream()) {
|
|
||||||
return callback(null, file);
|
|
||||||
} else {
|
|
||||||
const mtime = file.stat.mtime.getTime();
|
|
||||||
const existingMtime = cacheStore[name][file.path];
|
|
||||||
|
|
||||||
// hit - ignore it
|
|
||||||
if (existingMtime !== undefined && existingMtime === mtime) {
|
|
||||||
callback();
|
|
||||||
} else {
|
|
||||||
log.info(`Change detected on '${file.path}'`);
|
|
||||||
|
|
||||||
// miss - add it and pass it through
|
|
||||||
cacheStore[name][file.path] = mtime;
|
|
||||||
callback(null, file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function templatePipeline(options) {
|
|
||||||
return function () {
|
|
||||||
const input = options.input;
|
|
||||||
const output = options.output;
|
|
||||||
const name = options.name;
|
|
||||||
|
|
||||||
const ts = Math.floor(new Date());
|
|
||||||
const th = process.env.APP_THEME || "default";
|
|
||||||
const themes = ["default"];
|
|
||||||
|
|
||||||
const locales = readLocales();
|
|
||||||
const manifest = readManifest();
|
|
||||||
|
|
||||||
const tmpl = gulpMustache({
|
|
||||||
ts: ts,
|
|
||||||
// th: th,
|
|
||||||
manifest: manifest,
|
|
||||||
translations: JSON.stringify(locales),
|
|
||||||
themes: JSON.stringify(themes),
|
|
||||||
isDebug: process.env.NODE_ENV !== "production",
|
|
||||||
});
|
|
||||||
|
|
||||||
return gulp.src(input).pipe(tmpl).pipe(gulpRename(name)).pipe(gulp.dest(output)).pipe(touch());
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/***********************************************
|
|
||||||
* Generic
|
|
||||||
***********************************************/
|
|
||||||
|
|
||||||
gulpSass.compiler = sass;
|
|
||||||
|
|
||||||
|
|
||||||
gulp.task("scss:clean", async function (next) {
|
|
||||||
try {
|
|
||||||
await rimraf("./resources/public/.tmp");
|
|
||||||
await rimraf("./resources/public/css");
|
|
||||||
} finally {
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss:modules", function () {
|
|
||||||
return gulp
|
|
||||||
.src(["src/**/**.scss"])
|
|
||||||
.pipe(cache("sass"))
|
|
||||||
.pipe(
|
|
||||||
gulpSass
|
|
||||||
.sync({ includePaths: ["./resources/styles/common/", "./resources/styles/"] })
|
|
||||||
.on("error", gulpSass.logError),
|
|
||||||
)
|
|
||||||
.pipe(cache("css"))
|
|
||||||
.pipe(
|
|
||||||
gulpPostcss([
|
|
||||||
modules({
|
|
||||||
getJSON: function (cssFileName, json, outputFileName) {
|
|
||||||
// We do nothing because we don't want the generated JSON files
|
|
||||||
},
|
|
||||||
// Calculates the whole css-module selector name.
|
|
||||||
// Should be the same as the one in the file `/src/app/main/style.clj`
|
|
||||||
generateScopedName: function (selector, filename, css) {
|
|
||||||
const dir = path.dirname(filename);
|
|
||||||
const name = path.basename(filename, ".css");
|
|
||||||
const parts = dir.split("/");
|
|
||||||
const rootIdx = parts.findIndex((s) => s === ROOT_NAME);
|
|
||||||
return parts.slice(rootIdx + 1).join("_") + "_" + name + "__" + selector;
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
autoprefixer(),
|
|
||||||
]),
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest("./resources/public/css/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss:main", function () {
|
|
||||||
const sources = ["./resources/styles/main-default.scss",
|
|
||||||
"./resources/styles/debug.scss"];
|
|
||||||
|
|
||||||
return gulp
|
|
||||||
.src(sources)
|
|
||||||
.pipe(
|
|
||||||
gulpSass.sync({
|
|
||||||
includePaths: ["./node_modules/animate.css"],
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
.pipe(gulpPostcss([autoprefixer]))
|
|
||||||
.pipe(gulp.dest("./resources/public/css/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss:concat", function () {
|
|
||||||
return gulp
|
|
||||||
.src(["./resources/public/css/main-default.css",
|
|
||||||
"./resources/public/css/app/**/*.css"])
|
|
||||||
.pipe(gulpConcat("main.tmp.css"), { rebaseUrls: false })
|
|
||||||
.pipe(gulp.dest("./resources/public/.tmp/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss:touch:main", function () {
|
|
||||||
return gulp
|
|
||||||
.src(["./resources/public/.tmp/main.tmp.css"])
|
|
||||||
.pipe(rename("main.css"))
|
|
||||||
.pipe(gulp.dest("./resources/public/css/"))
|
|
||||||
.pipe(touch());
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss:touch:modules", function() {
|
|
||||||
return gulp.src("src/**/**.scss").pipe(touch());
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("scss", gulp.series("scss:main",
|
|
||||||
"scss:modules",
|
|
||||||
"scss:concat",
|
|
||||||
"scss:touch:main"));
|
|
||||||
|
|
||||||
gulp.task("svg:sprite:icons", function () {
|
|
||||||
return gulp
|
|
||||||
.src("./resources/images/icons/*.svg")
|
|
||||||
.pipe(gulpRename({ prefix: "icon-" }))
|
|
||||||
.pipe(svgSprite({ mode: { symbol: { inline: true, sprite: "icons.svg" } } }))
|
|
||||||
.pipe(gulp.dest("./resources/public/images/sprites/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("svg:sprite:cursors", function () {
|
|
||||||
return gulp
|
|
||||||
.src("./resources/images/cursors/*.svg")
|
|
||||||
.pipe(gulpRename({ prefix: "cursor-" }))
|
|
||||||
.pipe(svgSprite({ mode: { symbol: { inline: true, sprite: "cursors.svg" } } }))
|
|
||||||
.pipe(gulp.dest("./resources/public/images/sprites/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task(
|
|
||||||
"template:main",
|
|
||||||
templatePipeline({
|
|
||||||
name: "index.html",
|
|
||||||
input: "./resources/templates/index.mustache",
|
|
||||||
output: "./resources/public/",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
gulp.task(
|
|
||||||
"template:storybook",
|
|
||||||
templatePipeline({
|
|
||||||
name: "preview-body.html",
|
|
||||||
input: "./resources/templates/preview-body.mustache",
|
|
||||||
output: "./.storybook/",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
gulp.task(
|
|
||||||
"template:render",
|
|
||||||
templatePipeline({
|
|
||||||
name: "render.html",
|
|
||||||
input: "./resources/templates/render.mustache",
|
|
||||||
output: "./resources/public/",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
gulp.task(
|
|
||||||
"template:rasterizer",
|
|
||||||
templatePipeline({
|
|
||||||
name: "rasterizer.html",
|
|
||||||
input: "./resources/templates/rasterizer.mustache",
|
|
||||||
output: "./resources/public/",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
gulp.task(
|
|
||||||
"templates",
|
|
||||||
gulp.series(
|
|
||||||
"svg:sprite:icons",
|
|
||||||
"svg:sprite:cursors",
|
|
||||||
"template:main",
|
|
||||||
"template:storybook",
|
|
||||||
"template:render",
|
|
||||||
"template:rasterizer",
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
gulp.task("polyfills", function () {
|
|
||||||
return gulp
|
|
||||||
.src("./resources/polyfills/*.js")
|
|
||||||
.pipe(gulpConcat("polyfills.js"))
|
|
||||||
.pipe(gulp.dest("./resources/public/js/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("copy:assets:images", function () {
|
|
||||||
return gulp.src("./resources/images/**/*").pipe(gulp.dest("./resources/public/images/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("copy:assets:fonts", function () {
|
|
||||||
return gulp.src("./resources/fonts/**/*").pipe(gulp.dest("./resources/public/fonts/"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("copy:assets", gulp.parallel("copy:assets:images", "copy:assets:fonts"));
|
|
||||||
|
|
||||||
gulp.task("dev:dirs", async function (next) {
|
|
||||||
await mkdirp("./resources/public/css/");
|
|
||||||
await mkdirp("./resources/public/js/");
|
|
||||||
next();
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("watch:main", function () {
|
|
||||||
gulp.watch("./src/**/**.scss", {delay:1000}, gulp.series("scss"));
|
|
||||||
gulp.watch("./resources/styles/**/**.scss", {delay: 100}, gulp.series("scss:touch:modules"));
|
|
||||||
gulp.watch("./resources/images/**/*", gulp.series("copy:assets:images"));
|
|
||||||
gulp.watch(["./resources/templates/*.mustache", "translations/*.po"], gulp.series("templates"));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("clean:output", function (next) {
|
|
||||||
rimraf("./resources/public/").finally(next);
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("clean:dist", function (next) {
|
|
||||||
rimraf("./target/dist/").finally(next);
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task("build:styles", gulp.parallel("scss"));
|
|
||||||
|
|
||||||
gulp.task("build:assets",
|
|
||||||
gulp.parallel("polyfills",
|
|
||||||
"templates",
|
|
||||||
"copy:assets"));
|
|
||||||
|
|
||||||
gulp.task("watch",
|
|
||||||
gulp.series("dev:dirs",
|
|
||||||
"scss:clean",
|
|
||||||
"build:styles",
|
|
||||||
"build:assets",
|
|
||||||
"watch:main"));
|
|
||||||
|
|
||||||
gulp.task("build:copy", function () {
|
|
||||||
return gulp.src("./resources/public/**/*").pipe(gulp.dest("./target/dist/"));
|
|
||||||
});
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue