3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 18:46:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Simplify gulp compilation stage.

Browse source
This commit is contained in:
Andrey Antukh 2020-03-30 23:56:15 +02:00
parent c10c6cf149
commit 884cac4b3b
3 changed files with 21 additions and 373 deletions
Download patch file Download diff file Expand all files Collapse all files

99
frontend/gulpfile.js
View file

@ -77,12 +77,6 @@ function scssPipeline(options) {
// Templates // Templates
function readSvgSprite() {
const path = paths.build + "/icons-sprite/symbol/svg/sprite.symbol.svg";
const content = fs.readFileSync(path, {encoding: "utf8"});
return content;
}
function readLocales() { function readLocales() {
const path = __dirname + "/resources/locales.json"; const path = __dirname + "/resources/locales.json";
const content = JSON.parse(fs.readFileSync(path, {encoding: "utf8"})); const content = JSON.parse(fs.readFileSync(path, {encoding: "utf8"}));
@ -132,12 +126,11 @@ function templatePipeline(options) {
const ts = Math.floor(new Date()); const ts = Math.floor(new Date());
const locales = readLocales(); const locales = readLocales();
const icons = readSvgSprite(); // const icons = readSvgSprite();
const config = readConfig(); const config = readConfig();
const tmpl = mustache({ const tmpl = mustache({
ts: ts, ts: ts,
ic: icons,
config: JSON.stringify(config), config: JSON.stringify(config),
translations: JSON.stringify(locales), translations: JSON.stringify(locales),
}); });
@ -155,7 +148,7 @@ function templatePipeline(options) {
gulp.task("scss:main", scssPipeline({ gulp.task("scss:main", scssPipeline({
input: paths.resources + "styles/main.scss", input: paths.resources + "styles/main.scss",
output: paths.build + "css/main.css" output: paths.output + "css/main.css"
})); }));
gulp.task("scss", gulp.parallel("scss:main")); gulp.task("scss", gulp.parallel("scss:main"));
@ -163,25 +156,23 @@ gulp.task("scss", gulp.parallel("scss:main"));
gulp.task("svg:sprite", function() { gulp.task("svg:sprite", function() {
return gulp.src(paths.resources + "images/icons/*.svg") return gulp.src(paths.resources + "images/icons/*.svg")
.pipe(rename({prefix: 'icon-'})) .pipe(rename({prefix: 'icon-'}))
.pipe(svgSprite({mode:{symbol: {inline: true}}})) .pipe(svgSprite({mode:{symbol: {inline: false}}}))
.pipe(gulp.dest(paths.build + "icons-sprite/")); .pipe(gulp.dest(paths.output + "images/svg-sprite/"));
}); });
gulp.task("template:main", templatePipeline({ gulp.task("template:main", templatePipeline({
input: paths.resources + "templates/index.mustache", input: paths.resources + "templates/index.mustache",
output: paths.build output: paths.output
})); }));
gulp.task("templates", gulp.series("svg:sprite", "template:main")); gulp.task("templates", gulp.series("template:main"));
/*********************************************** /***********************************************
* Development * Development
***********************************************/ ***********************************************/
gulp.task("dev:clean", function(next) { gulp.task("dev:clean", function(next) {
rimraf(paths.output, function() { rimraf(paths.output, next);
rimraf(paths.build, next);
});
}); });
gulp.task("dev:copy:images", function() { gulp.task("dev:copy:images", function() {
@ -189,52 +180,32 @@ gulp.task("dev:copy:images", function() {
.pipe(gulp.dest(paths.output + "images/")); .pipe(gulp.dest(paths.output + "images/"));
}); });
gulp.task("dev:copy:css", function() {
return gulp.src(paths.build + "css/**/*")
.pipe(gulp.dest(paths.output + "css/"));
});
gulp.task("dev:copy:icons-sprite", function() {
return gulp.src(paths.build + "icons-sprite/**/*")
.pipe(gulp.dest(paths.output + "icons-sprite/"));
});
gulp.task("dev:copy:templates", function() {
return gulp.src(paths.build + "index.html")
.pipe(gulp.dest(paths.output));
});
gulp.task("dev:copy:fonts", function() { gulp.task("dev:copy:fonts", function() {
return gulp.src(paths.resources + "fonts/**/*") return gulp.src(paths.resources + "fonts/**/*")
.pipe(gulp.dest(paths.output + "fonts/")); .pipe(gulp.dest(paths.output + "fonts/"));
}); });
gulp.task("dev:copy", gulp.parallel("dev:copy:images", gulp.task("dev:copy", gulp.parallel("dev:copy:images",
"dev:copy:css", "dev:copy:fonts"));
"dev:copy:fonts",
"dev:copy:icons-sprite",
"dev:copy:templates"));
gulp.task("dev:dirs", function(next) { gulp.task("dev:dirs", function(next) {
mkdirp("./resources/public/css/") mkdirp("./resources/public/css/").then(() => next())
.then(() => next())
}); });
gulp.task("watch:main", function() { gulp.task("watch:main", function() {
gulp.watch(paths.scss, gulp.series("scss", "dev:copy:css")); gulp.watch(paths.scss, gulp.series("scss"));
gulp.watch(paths.resources + "images/**/*",
gulp.series("svg:sprite",
"dev:copy:images"));
gulp.watch([paths.resources + "templates/*.mustache", gulp.watch([paths.resources + "templates/*.mustache",
paths.resources + "locales.json", paths.resources + "locales.json"],
paths.resources + "images/**/*"], gulp.series("templates"));
gulp.series("templates",
"dev:copy:images",
"dev:copy:templates",
"dev:copy:icons-sprite"));
}); });
gulp.task("watch", gulp.series( gulp.task("watch", gulp.series(
"dev:dirs", "dev:dirs",
gulp.parallel("scss", "templates"), gulp.parallel("scss", "templates", "svg:sprite"),
"dev:copy", "dev:copy",
"watch:main" "watch:main"
)); ));
@ -244,42 +215,14 @@ gulp.task("watch", gulp.series(
***********************************************/ ***********************************************/
gulp.task("dist:clean", function(next) { gulp.task("dist:clean", function(next) {
rimraf(paths.dist, function() { rimraf(paths.dist, next);
rimraf(paths.build, next);
});
}); });
gulp.task("dist:copy:templates", function() { gulp.task("dist:copy", function() {
return gulp.src(paths.build + "index.html") return gulp.src(paths.output + "**/*")
.pipe(gulp.dest(paths.dist)); .pipe(gulp.dest(paths.dist));
}); });
gulp.task("dist:copy:images", function() {
return gulp.src(paths.resources + "images/**/*")
.pipe(gulp.dest(paths.dist + "images/"));
});
gulp.task("dist:copy:styles", function() {
return gulp.src(paths.build + "css/**/*")
.pipe(gulp.dest(paths.dist + "css/"));
});
gulp.task("dist:copy:icons-sprite", function() {
return gulp.src(paths.build + "icons-sprite/**/*")
.pipe(gulp.dest(paths.dist + "icons-sprite/"));
});
gulp.task("dist:copy:fonts", function() {
return gulp.src(paths.resources + "/fonts/**/*")
.pipe(gulp.dest(paths.dist + "fonts/"));
});
gulp.task("dist:copy", gulp.parallel("dist:copy:fonts",
"dist:copy:icons-sprite",
"dist:copy:styles",
"dist:copy:templates",
"dist:copy:images"));
gulp.task("dist:gzip", function() { gulp.task("dist:gzip", function() {
return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`) return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`)
.pipe(gzip({gzipOptions: {level: 9}})) .pipe(gzip({gzipOptions: {level: 9}}))
@ -287,8 +230,8 @@ gulp.task("dist:gzip", function() {
}); });
gulp.task("dist", gulp.series( gulp.task("dist", gulp.series(
"dev:clean",
"dist:clean", "dist:clean",
"scss", gulp.parallel("scss", "templates", "svg:sprite", "dev:copy"),
"templates",
"dist:copy" "dist:copy"
)); ));

45
frontend/resources/styles/view.scss
View file

@ -1,45 +0,0 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// UXBOX VIEW STYLES
//#################################################
//
//#################################################
@import 'common/dependencies/colors';
@import 'common/dependencies/uxbox-light';
//@import 'common/dependencies/uxbox-dark';
@import 'common/dependencies/helpers';
@import 'common/dependencies/mixin';
@import 'common/dependencies/fonts';
@import 'common/dependencies/reset';
@import 'common/dependencies/animations';
@import 'common/dependencies/z-index';
//#################################################
// Layouts
//#################################################
@import 'common/base';
@import 'view/layouts/main-layout';
//#################################################
// Commons
//#################################################
@import 'common/framework';
//#################################################
// Partials
//#################################################
//#################################################
// Resources
//#################################################
@import 'collection/font-collection';

250
frontend/resources/styles/view/layouts/main-layout.scss
View file

@ -1,250 +0,0 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.view-content {
display: flex;
flex-direction: column-reverse;
height: 100vh;
width: 100%;
@include bp(tablet) {
flex-direction: row;
}
}
.view-nav {
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
border-right: 0;
display: flex;
flex-shrink: 0;
height: 55px;
width: 100%;
@include bp(tablet) {
border-right: 1px solid $color-gray-60;
border-top: 0;
height: 100%;
width: 70px;
}
}
.view-options-btn {
align-items: center;
display: flex;
margin: auto;
@include bp(tablet) {
flex-direction: column;
}
li {
align-items: center;
background-color: $color-gray-60;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 40px;
justify-content: center;
margin: $small;
position: relative;
width: 40px;
a {
padding-top: 6px;
}
svg {
fill: $color-gray-20;
height: 24px;
width: 24px;
}
&:hover {
background-color: $color-gray-10;
border-color: $color-gray-60;
}
&.selected {
background-color: $color-primary;
svg {
fill: $color-white;
}
}
}
}
.view-sitemap {
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
border-right: 0;
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 155px;
width: 100%;
overflow: scroll;
.sitemap-title {
border-bottom: 1px solid $color-gray-60;
padding: $small;
font-weight: bold;
}
@include bp(tablet) {
border-right: 1px solid $color-gray-60;
border-top: 0;
height: 100%;
width: 220px;
}
}
.sitemap-list {
width: 100%;
li {
align-items: center;
border-bottom: 1px solid $color-gray-60;
cursor: pointer;
display: flex;
flex-direction: row;
padding: $small;
width: 100%;
.page-icon {
svg {
fill: $color-gray-30;
height: 15px;
margin-right: $x-small;
width: 15px;
}
}
span {
color: $color-gray-20;
font-size: $fs14;
max-width: 75%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-actions {
align-items: center;
display: none;
margin-left: auto;
a {
svg {
fill: $color-gray-60;
height: 15px;
margin-left: $x-small;
width: 15px;
&:hover {
fill: $color-gray-20;
}
}
}
}
&:hover {
.page-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
}
&.selected {
.page-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
font-weight: bold;
}
}
}
&:hover {
.page-actions {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
}
.view-canvas {
background-color: $color-gray-60;
width: 100%;
overflow: scroll;
display: flex;
.page-layout {
flex-shrink: 0;
margin: auto;
}
}
.interaction-mark {
align-items: center;
background-color: $color-primary;
border-radius: 50%;
display: flex;
justify-content: center;
height: 20px;
width: 20px;
svg {
fill: $color-white;
height: 15px;
width: 15px;
}
}
.interaction-bullet {
fill: $color-primary;
fill-opacity: 1;
}
.interaction-hightlight {
fill: $color-primary;
fill-opacity: 0.3;
stroke: $color-primary;
}