mirror of
https://github.com/penpot/penpot.git
synced 2025-01-22 14:39:45 -05:00
Add build steps for preview app.
This commit is contained in:
Andrey Antukh
parent
3367e9befe
commit
b4bd723685
4 changed files with 165 additions and 43 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -18,4 +18,5 @@ node_modules
|
|||
/resources/public/css
|
||||
/resources/public/js
|
||||
/resources/public/index.html
|
||||
/resources/public/preview/index.html
|
||||
/*-init.clj
|
||||
130
gulpfile.js
130
gulpfile.js
|
|
@ -1,21 +1,25 @@
|
|||
var gulp = require("gulp");
|
||||
var runseq = require('run-sequence');
|
||||
var scss = require("gulp-sass");
|
||||
var plumber = require("gulp-plumber");
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
var watch = require("gulp-watch");
|
||||
var cssmin = require("gulp-cssmin");
|
||||
var rimraf = require("rimraf");
|
||||
var mustache = require("gulp-mustache");
|
||||
var rename = require("gulp-rename");
|
||||
const gulp = require("gulp");
|
||||
const runseq = require('run-sequence');
|
||||
const scss = require("gulp-sass");
|
||||
const plumber = require("gulp-plumber");
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
const watch = require("gulp-watch");
|
||||
const cssmin = require("gulp-cssmin");
|
||||
const rimraf = require("rimraf");
|
||||
const mustache = require("gulp-mustache");
|
||||
const rename = require("gulp-rename");
|
||||
|
||||
var paths = {};
|
||||
const paths = {};
|
||||
paths.app = "./resources/";
|
||||
paths.output = "./resources/public/";
|
||||
paths.dist = "./dist/";
|
||||
paths.target = "./target/";
|
||||
paths.scss = paths.app + "styles/**/*.scss";
|
||||
|
||||
/***********************************************
|
||||
* Styles
|
||||
***********************************************/
|
||||
|
||||
function makeAutoprefixer() {
|
||||
return autoprefixer('last 2 version',
|
||||
'safari 5',
|
||||
|
|
@ -24,60 +28,96 @@ function makeAutoprefixer() {
|
|||
}
|
||||
|
||||
function scssPipeline(options) {
|
||||
var input = options.input;
|
||||
var output = options.output;
|
||||
const input = options.input;
|
||||
const output = options.output;
|
||||
|
||||
return gulp.src(input)
|
||||
.pipe(plumber())
|
||||
.pipe(scss({style: "expanded"}))
|
||||
.pipe(makeAutoprefixer())
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(plumber())
|
||||
.pipe(scss({style: "expanded"}))
|
||||
.pipe(makeAutoprefixer())
|
||||
.pipe(gulp.dest(output));
|
||||
}
|
||||
|
||||
gulp.task("scss:theme-light", function() {
|
||||
gulp.task("scss:main", function() {
|
||||
return scssPipeline({
|
||||
input: paths.app + "styles/main.scss",
|
||||
output: paths.output + "css/"
|
||||
});
|
||||
});
|
||||
|
||||
// gulp.task("scss:theme-dark", function() {
|
||||
// return scssPipeline({
|
||||
// input: paths.app + "styles/main-theme-dark.scss",
|
||||
// output: paths.output + "css/"
|
||||
// });
|
||||
// });
|
||||
|
||||
gulp.task("scss:all", [ // "scss:theme-dark",
|
||||
"scss:theme-light"]);
|
||||
|
||||
gulp.task("dist:cssmin", function() {
|
||||
return gulp.src(paths.output + "css/main.css")
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest(paths.output + "css/"));
|
||||
gulp.task("scss:preview", function() {
|
||||
return scssPipeline({
|
||||
input: paths.app + "styles/preview.scss",
|
||||
output: paths.output + "css/"
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("template", function() {
|
||||
var ts = Math.floor(new Date());
|
||||
var tmpl = mustache({
|
||||
gulp.task("scss", ["scss:main", "scss:preview"]);
|
||||
|
||||
/***********************************************
|
||||
* Templates
|
||||
***********************************************/
|
||||
|
||||
gulp.task("template:main", function() {
|
||||
const ts = Math.floor(new Date());
|
||||
const tmpl = mustache({
|
||||
jsfile: "/js/main.js?v=" + ts,
|
||||
cssfile: "/css/main.css?v=" + ts
|
||||
});
|
||||
|
||||
return gulp.src(paths.app + "index.mustache")
|
||||
.pipe(tmpl)
|
||||
.pipe(rename("index.html"))
|
||||
.pipe(gulp.dest(paths.output));
|
||||
.pipe(tmpl)
|
||||
.pipe(rename("index.html"))
|
||||
.pipe(gulp.dest(paths.output));
|
||||
});
|
||||
|
||||
gulp.task("template:preview", function() {
|
||||
const ts = Math.floor(new Date());
|
||||
const tmpl = mustache({
|
||||
jsfile: "/js/preview.js?v=" + ts,
|
||||
cssfile: "/css/preview.css?v=" + ts
|
||||
});
|
||||
|
||||
return gulp.src(paths.app + "preview.mustache")
|
||||
.pipe(tmpl)
|
||||
.pipe(rename("index.html"))
|
||||
.pipe(gulp.dest(paths.output + "preview/"));
|
||||
});
|
||||
|
||||
gulp.task("template", ["template:preview",
|
||||
"template:main"]);
|
||||
|
||||
/***********************************************
|
||||
* Production Build
|
||||
***********************************************/
|
||||
|
||||
gulp.task("dist:cssmin:main", function() {
|
||||
return gulp.src(paths.output + "css/main.css")
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest(paths.output + "css/"));
|
||||
});
|
||||
|
||||
gulp.task("dist:cssmin:preview", function() {
|
||||
return gulp.src(paths.output + "css/preview.css")
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest(paths.output + "css/"));
|
||||
});
|
||||
|
||||
gulp.task("dist:cssmin", ["dist:cssmin:main",
|
||||
"dist:cssmin:preview"]);
|
||||
|
||||
gulp.task("dist:scss", function(next) {
|
||||
runseq("scss:all", "dist:cssmin", next);
|
||||
runseq("scss", "dist:cssmin", next);
|
||||
});
|
||||
|
||||
gulp.task("dist:clean", function(next) {
|
||||
rimraf(paths.dist, next);
|
||||
});
|
||||
|
||||
/***********************************************
|
||||
* Helper Tasks
|
||||
***********************************************/
|
||||
|
||||
gulp.task("clean", function(next) {
|
||||
rimraf(paths.output + "css/", function() {
|
||||
rimraf(paths.output + "js/", function() {
|
||||
|
|
@ -88,15 +128,19 @@ gulp.task("clean", function(next) {
|
|||
|
||||
gulp.task("dist:copy", function() {
|
||||
return gulp.src(paths.output + "/**/*.*")
|
||||
.pipe(gulp.dest(paths.dist));
|
||||
.pipe(gulp.dest(paths.dist));
|
||||
});
|
||||
|
||||
/***********************************************
|
||||
* Entry Points
|
||||
***********************************************/
|
||||
|
||||
// Default
|
||||
gulp.task("dist", function(next) {
|
||||
runseq("template", "dist:scss", "dist:clean", "dist:copy", next);
|
||||
runseq(["template", "dist:scss"], "dist:clean", "dist:copy", next);
|
||||
});
|
||||
|
||||
// Watch
|
||||
gulp.task("default", ["scss:all", "template"], function () {
|
||||
gulp.watch(paths.scss, ["scss:all"]);
|
||||
gulp.task("default", ["scss", "template"], function () {
|
||||
gulp.watch(paths.scss, ["scss"]);
|
||||
});
|
||||
|
|
|
|||
16
resources/preview.mustache
Normal file
16
resources/preview.mustache
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<title>UXBOX/preview - The Open-Source prototyping tool</title>
|
||||
<link href="{{& cssfile}}" rel="stylesheet" type="text/css" />
|
||||
<link rel="icon" href="/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<section id="app" tabindex="1"></section>
|
||||
<section id="lightbox" tabindex="2"></section>
|
||||
<section id="loader" tabindex="3"></section>
|
||||
<script src="{{& jsfile}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
61
resources/styles/preview.scss
Normal file
61
resources/styles/preview.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// UXBOX STYLES
|
||||
//#################################################
|
||||
//
|
||||
//#################################################
|
||||
|
||||
@import 'dependencies/colors';
|
||||
@import 'dependencies/uxbox-light';
|
||||
/* @import 'dependencies/uxbox-dark'; */
|
||||
@import 'dependencies/helpers';
|
||||
@import 'dependencies/mixin';
|
||||
@import 'dependencies/fonts';
|
||||
@import 'dependencies/reset';
|
||||
@import 'dependencies/animations';
|
||||
@import 'dependencies/z-index';
|
||||
|
||||
//#################################################
|
||||
// Layouts
|
||||
//#################################################
|
||||
|
||||
@import 'base';
|
||||
@import 'layouts/main-layout';
|
||||
@import 'layouts/login';
|
||||
|
||||
//#################################################
|
||||
// Commons
|
||||
//#################################################
|
||||
|
||||
@import 'framework';
|
||||
|
||||
//#################################################
|
||||
// Partials
|
||||
//#################################################
|
||||
|
||||
@import 'partials/main-bar';
|
||||
@import 'partials/workspace-bar';
|
||||
@import 'partials/workspace-canvas';
|
||||
@import 'partials/tool-bar';
|
||||
@import 'partials/project-bar';
|
||||
@import 'partials/sidebar';
|
||||
@import 'partials/sidebar-tools';
|
||||
@import 'partials/sidebar-element-options';
|
||||
@import 'partials/sidebar-icons';
|
||||
@import 'partials/sidebar-layers';
|
||||
@import 'partials/sidebar-sitemap';
|
||||
@import 'partials/sidebar-document-history';
|
||||
@import 'partials/dashboard-bar';
|
||||
@import 'partials/dashboard-grid';
|
||||
@import 'partials/user-settings';
|
||||
@import 'partials/activity-bar';
|
||||
@import 'partials/library-bar';
|
||||
@import 'partials/lightbox';
|
||||
@import 'partials/color-palette';
|
||||
@import 'partials/colorpicker';
|
||||
@import 'partials/forms';
|
||||
@import 'partials/loader';
|
||||
|
||||
//#################################################
|
||||
// Resources
|
||||
//#################################################
|
||||
|
||||
@import 'collection/font-collection';
|
||||
Loading…
Add table
Reference in a new issue