Skip to content

Commit

Permalink
chore: add admin template static files
Browse files Browse the repository at this point in the history 
This sets up for the next step - styling of the pages.
  • Loading branch information
@ngurenyaga
ngurenyaga committed Jul 14, 2021
1 parent 72e1e4e commit a58ea15
Show file tree
Hide file tree
Showing 49 changed files with 95,099 additions and 7,519 deletions.
1 change: 1 addition & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,5 +69,6 @@ RUN chmod +x /entrypoint

# copy application code to WORKDIR
COPY --from=client-builder ${APP_HOME} ${APP_HOME}
RUN npm run build

ENTRYPOINT ["/entrypoint"]
255 changes: 130 additions & 125 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,162 +1,167 @@
////////////////////////////////
// Setup
////////////////////////////////

// Gulp and package
const { src, dest, parallel, series, watch } = require('gulp')
const pjson = require('./package.json')
const { src, dest, parallel, series, watch } = require("gulp");
const pjson = require("./package.json");

// Plugins
const autoprefixer = require('autoprefixer')
const browserSync = require('browser-sync').create()

const concat = require('gulp-concat')

const cssnano = require ('cssnano')
const imagemin = require('gulp-imagemin')
const pixrem = require('pixrem')
const plumber = require('gulp-plumber')
const postcss = require('gulp-postcss')
const reload = browserSync.reload
const rename = require('gulp-rename')
const sass = require('gulp-sass')
const spawn = require('child_process').spawn
const uglify = require('gulp-uglify-es').default
const autoprefixer = require("autoprefixer");
const browserSync = require("browser-sync").create();
const cleanCSS = require("gulp-clean-css");
const del = require("del");
const gulp = require("gulp");
const merge = require("merge-stream");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");
const concat = require("gulp-concat");
const cssnano = require("cssnano");
const imagemin = require("gulp-imagemin");
const pixrem = require("pixrem");
const postcss = require("gulp-postcss");
const reload = browserSync.reload;
const spawn = require("child_process").spawn;
const lec = require("gulp-line-ending-corrector");
const sourcemaps = require("gulp-sourcemaps");

// Relative paths function
function pathsConfig(appName) {
this.app = `./${pjson.name}`
const vendorsRoot = 'node_modules'

return {
bootstrapSass: `${vendorsRoot}/bootstrap/scss`,
vendorsJs: [
`${vendorsRoot}/jquery/dist/jquery.slim.js`,
`${vendorsRoot}/popper.js/dist/umd/popper.js`,
`${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
],
app: this.app,
templates: `${this.app}/templates`,
css: `${this.app}/static/css`,
sass: `${this.app}/static/sass`,
fonts: `${this.app}/static/fonts`,
images: `${this.app}/static/images`,
js: `${this.app}/static/js`,
}
this.app = `./${pjson.name}`;
const vendorsRoot = "node_modules";

return {
bootstrapSass: `${vendorsRoot}/bootstrap/scss`,
fontAwesomeSass: `${vendorsRoot}/@fortawesome/fontawesome-free/scss`,
vendorsJs: [
`${vendorsRoot}/jquery/dist/jquery.js`,
`${vendorsRoot}/popper.js/dist/umd/popper.js`,
`${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
`${vendorsRoot}/chart.js/dist/*.js`,
`${vendorsRoot}/datatables.net/js/*.js`,
`${vendorsRoot}/datatables.net-bs4/js/*.js`,
`${vendorsRoot}/@fortawesome/fontawesome-free/js/*.js`,
`${vendorsRoot}/jquery.easing/*.js`,
],
app: this.app,
templates: `${this.app}/templates`,
css: `${this.app}/static/css`,
dataTablesCSS: `${vendorsRoot}/datatables.net-bs4/css/*.css`, // TODO
sass: `${this.app}/static/sass`,
fonts: `${this.app}/static/fonts`,
images: `${this.app}/static/images`,
js: `${this.app}/static/js`,
};
}

var paths = pathsConfig()

////////////////////////////////
// Tasks
////////////////////////////////
var paths = pathsConfig();

// Styles autoprefixing and minification
function styles() {
var processCss = [
autoprefixer(), // adds vendor prefixes
pixrem(), // add fallbacks for rem units
]

var minifyCss = [
cssnano({ preset: 'default' }) // minify result
]

return src(`${paths.sass}/project.scss`)
.pipe(sass({
includePaths: [
paths.bootstrapSass,
paths.sass
]
}).on('error', sass.logError))
.pipe(plumber()) // Checks for errors
.pipe(postcss(processCss))
.pipe(dest(paths.css))
.pipe(rename({ suffix: '.min' }))
.pipe(postcss(minifyCss)) // Minifies the result
.pipe(dest(paths.css))
var processCss = [
autoprefixer(), // adds vendor prefixes
pixrem(), // add fallbacks for rem units
];

var minifyCss = [
cssnano({ preset: "default" }), // minify result
];

return src(`${paths.sass}/project.scss`)
.pipe(
sass({
includePaths: [
paths.bootstrapSass,
paths.fontAwesomeSass,
paths.sass,
paths.dataTablesCSS,
],
}).on("error", sass.logError)
)
.pipe(plumber()) // Checks for errors
.pipe(postcss(processCss))
.pipe(dest(paths.css))
.pipe(rename({ suffix: ".min" }))
.pipe(postcss(minifyCss)) // Minifies the result
.pipe(dest(paths.css));
}

// Javascript minification
function scripts() {
return src(`${paths.js}/project.js`)
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(rename({ suffix: '.min' }))
.pipe(dest(paths.js))
return src(`${paths.js}/project.js`)
.pipe(sourcemaps.init())
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(lec({ verbose: true, eolc: "LF", encoding: "utf8" }))
.pipe(rename({ suffix: ".min" }))
.pipe(sourcemaps.write())
.pipe(dest(paths.js));
}
// Vendor Javascript minification
function vendorScripts() {
return src(paths.vendorsJs)
.pipe(concat('vendors.js'))
.pipe(dest(paths.js))
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(rename({ suffix: '.min' }))
.pipe(dest(paths.js))
return src(paths.vendorsJs)
.pipe(concat("vendors.js"))
.pipe(lec({ verbose: true, eolc: "LF", encoding: "utf8" }))
.pipe(dest(paths.js))
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(rename({ suffix: ".min" }))
.pipe(dest(paths.js));
}

// Image compression
function imgCompression() {
return src(`${paths.images}/*`)
.pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
.pipe(dest(paths.images))
}// Run django server
return src(`${paths.images}/*`)
.pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
.pipe(dest(paths.images));
} // Run django server
function asyncRunServer() {
var cmd = spawn('gunicorn', [
'config.asgi', '-k', 'uvicorn.workers.UvicornWorker', '--reload'
], {stdio: 'inherit'}
)
cmd.on('close', function(code) {
console.log('gunicorn exited with code ' + code)
})
var cmd = spawn(
"gunicorn", ["config.asgi", "-k", "uvicorn.workers.UvicornWorker", "--reload"], { stdio: "inherit" }
);
cmd.on("close", function(code) {
console.log("gunicorn exited with code " + code);
});
}

// Browser sync server for live reload
function initBrowserSync() {
browserSync.init(
[
`${paths.css}/*.css`,
`${paths.js}/*.js`,
`${paths.templates}/*.html`
], {
// https://www.browsersync.io/docs/options/#option-proxy
proxy: {
target: 'django:8000',
proxyReq: [
function(proxyReq, req) {
// Assign proxy "host" header same as current request at Browsersync server
proxyReq.setHeader('Host', req.headers.host)
}
]
},
// https://www.browsersync.io/docs/options/#option-open
// Disable as it doesn't work from inside a container
open: false
}
)
[`${paths.css}/*.css`, `${paths.js}/*.js`, `${paths.templates}/*.html`], {
// https://www.browsersync.io/docs/options/#option-proxy
proxy: {
target: "django:8000",
proxyReq: [
function(proxyReq, req) {
// Assign proxy "host" header same as current request at Browsersync server
proxyReq.setHeader("Host", req.headers.host);
},
],
},
// https://www.browsersync.io/docs/options/#option-open
// Disable as it doesn't work from inside a container
open: false,
}
);
}

// Watch
function watchPaths() {
watch(`${paths.sass}/*.scss`, { usePolling: true }, styles)
watch(`${paths.templates}/**/*.html`, { usePolling: true }).on("change", reload)
watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`], { usePolling: true }, scripts).on("change", reload)
console.dir(paths, { depth: null });
watch(`${paths.sass}/*.scss`, { usePolling: true }, styles);
watch(`${paths.templates}/**/*.html`, { usePolling: true }).on(
"change",
reload
);
watch(
[`${paths.js}/*.js`, `!${paths.js}/*.min.js`], { usePolling: true },
scripts
).on("change", reload);
}

// Generate all assets
const generateAssets = parallel(
styles,
scripts,vendorScripts,
imgCompression
)
const generateAssets = parallel(styles, scripts, vendorScripts, imgCompression);

// Set up dev environment
const dev = parallel(
initBrowserSync,
watchPaths
)

exports.default = series(generateAssets, dev)
exports["generate-assets"] = generateAssets
exports["dev"] = dev
const dev = parallel(initBrowserSync, watchPaths);
exports.default = series(generateAssets, dev);
exports["generate-assets"] = generateAssets;
exports["dev"] = dev;
Loading

0 comments on commit a58ea15

Please sign in to comment.