mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
♻️ Simplify gulp compilation stage.
This commit is contained in:
Andrey Antukh
parent
c10c6cf149
commit
884cac4b3b
3 changed files with 21 additions and 373 deletions
|
|
@ -77,12 +77,6 @@ function scssPipeline(options) {
|
|||
|
||||
// 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() {
|
||||
const path = __dirname + "/resources/locales.json";
|
||||
const content = JSON.parse(fs.readFileSync(path, {encoding: "utf8"}));
|
||||
|
|
@ -132,12 +126,11 @@ function templatePipeline(options) {
|
|||
const ts = Math.floor(new Date());
|
||||
|
||||
const locales = readLocales();
|
||||
const icons = readSvgSprite();
|
||||
// const icons = readSvgSprite();
|
||||
const config = readConfig();
|
||||
|
||||
const tmpl = mustache({
|
||||
ts: ts,
|
||||
ic: icons,
|
||||
config: JSON.stringify(config),
|
||||
translations: JSON.stringify(locales),
|
||||
});
|
||||
|
|
@ -155,7 +148,7 @@ function templatePipeline(options) {
|
|||
|
||||
gulp.task("scss:main", scssPipeline({
|
||||
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"));
|
||||
|
|
@ -163,25 +156,23 @@ gulp.task("scss", gulp.parallel("scss:main"));
|
|||
gulp.task("svg:sprite", function() {
|
||||
return gulp.src(paths.resources + "images/icons/*.svg")
|
||||
.pipe(rename({prefix: 'icon-'}))
|
||||
.pipe(svgSprite({mode:{symbol: {inline: true}}}))
|
||||
.pipe(gulp.dest(paths.build + "icons-sprite/"));
|
||||
.pipe(svgSprite({mode:{symbol: {inline: false}}}))
|
||||
.pipe(gulp.dest(paths.output + "images/svg-sprite/"));
|
||||
});
|
||||
|
||||
gulp.task("template:main", templatePipeline({
|
||||
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
|
||||
***********************************************/
|
||||
|
||||
gulp.task("dev:clean", function(next) {
|
||||
rimraf(paths.output, function() {
|
||||
rimraf(paths.build, next);
|
||||
});
|
||||
rimraf(paths.output, next);
|
||||
});
|
||||
|
||||
gulp.task("dev:copy:images", function() {
|
||||
|
|
@ -189,52 +180,32 @@ gulp.task("dev:copy:images", function() {
|
|||
.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() {
|
||||
return gulp.src(paths.resources + "fonts/**/*")
|
||||
.pipe(gulp.dest(paths.output + "fonts/"));
|
||||
});
|
||||
|
||||
gulp.task("dev:copy", gulp.parallel("dev:copy:images",
|
||||
"dev:copy:css",
|
||||
"dev:copy:fonts",
|
||||
"dev:copy:icons-sprite",
|
||||
"dev:copy:templates"));
|
||||
"dev:copy:fonts"));
|
||||
|
||||
gulp.task("dev:dirs", function(next) {
|
||||
mkdirp("./resources/public/css/")
|
||||
.then(() => next())
|
||||
mkdirp("./resources/public/css/").then(() => next())
|
||||
});
|
||||
|
||||
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",
|
||||
paths.resources + "locales.json",
|
||||
paths.resources + "images/**/*"],
|
||||
gulp.series("templates",
|
||||
"dev:copy:images",
|
||||
"dev:copy:templates",
|
||||
"dev:copy:icons-sprite"));
|
||||
paths.resources + "locales.json"],
|
||||
gulp.series("templates"));
|
||||
});
|
||||
|
||||
gulp.task("watch", gulp.series(
|
||||
"dev:dirs",
|
||||
gulp.parallel("scss", "templates"),
|
||||
gulp.parallel("scss", "templates", "svg:sprite"),
|
||||
"dev:copy",
|
||||
"watch:main"
|
||||
));
|
||||
|
|
@ -244,42 +215,14 @@ gulp.task("watch", gulp.series(
|
|||
***********************************************/
|
||||
|
||||
gulp.task("dist:clean", function(next) {
|
||||
rimraf(paths.dist, function() {
|
||||
rimraf(paths.build, next);
|
||||
});
|
||||
rimraf(paths.dist, next);
|
||||
});
|
||||
|
||||
gulp.task("dist:copy:templates", function() {
|
||||
return gulp.src(paths.build + "index.html")
|
||||
gulp.task("dist:copy", function() {
|
||||
return gulp.src(paths.output + "**/*")
|
||||
.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() {
|
||||
return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`)
|
||||
.pipe(gzip({gzipOptions: {level: 9}}))
|
||||
|
|
@ -287,8 +230,8 @@ gulp.task("dist:gzip", function() {
|
|||
});
|
||||
|
||||
gulp.task("dist", gulp.series(
|
||||
"dev:clean",
|
||||
"dist:clean",
|
||||
"scss",
|
||||
"templates",
|
||||
gulp.parallel("scss", "templates", "svg:sprite", "dev:copy"),
|
||||
"dist:copy"
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue