Commit 1d4b9915 authored by Bob Hageman's avatar Bob Hageman

Replaced gulp with webpack for faster developing. Updated README.md with webpack commands.

parent 1767d3d0
# Schluss.app
Schluss locker webapp; javascript runs client side code only, fully decentralized and distributed end to end encryped storage.
Schluss locker webapp; javascript runs client side code only, fully decentralized and distributed end to end encryped storage.
## Installation
For coding, debugging and releasing
## Installation
For coding, debugging and releasing
#### Requirements
#### Requirements
- NPM
- NodeJS (already available after installing NPM)
- NPM
- NodeJS (already available after installing NPM)
*Run*
>\> npm install
>\> npm install
## Local development
This project uses Gulp to stream the build process. Contains embedded local https webserver (ignore the certificate warnings in your browser)
This project uses Webpack to simplify the developing and building process. It contains an local development https webserver with hot reloading (ignore the certificate warnings in your browser)
### Build the code
Does all the necessary things to generate a complete and working version of the app in the `./dist` folder
>\> gulp build
Does all the necessary things to generate a complete and working version of the app in the `./dist` folder
>\> npm run build
### Start webserver
To start the local embedded https webserver run the following command:
>\>gulp webserver
Your browser opens automatically and shows the index.html in the `./dist` folder
### Start webserver
To start the local embedded https webserver run the following command:
>\> npm run serve
### Specific tasks
Your browser opens automatically and shows the index.html in the `./dist` folder
Watch changes and auto-update scripts (JS / CSS):
>\> gulp watch
\ No newline at end of file
### Pack and publish
To make a production ready version, that can be found in the `./dist` folder, run:
>\> npm run publish
\ No newline at end of file
'use strict';
// Load modules ---------------------------------------
var fs = require('fs');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var log = require('gulplog');
var webserver = require('gulp-webserver');
var clean = require('gulp-clean');
var runsequence = require('run-sequence');
var terser = require('gulp-terser');
var watch = require('gulp-watch');
var htmlmin = require('gulp-htmlmin');
var replaceTemplate = require('gulp-replace-template');
// Configuration settings ---------------------------------------
var config = {
base : {
src : './src/',
dist : './dist/'
},
paths : {
assets : 'assets/',
scripts : 'scripts/',
views : 'views/'
},
serverport : 8080,
tersercfg : { mangle: { toplevel: true } }
};
// Tasks ---------------------------------------
// Default: All you need to start developing
gulp.task('default', function(){
// run in sequence, first build. when done start webserver and watch
//return runsequence('copy', ['javascript', 'html', 'css']);
return runsequence('build');
});
// Build: copy and bundle needed files
gulp.task('build', function() {
return runsequence('copy', ['javascript', 'html', 'css']);
});
// Clean: empty release folder, delete tmp files
gulp.task('clean', function() {
return gulp.src(config.base.dist, {read: false})
.pipe(clean()); // del dist folder
});
// Copy: copy needed folder/files to release folder
gulp.task('copy', ['clean'], function() {
gulp.src([
config.base.src + "**/*",
"!" + config.base.src + "scripts", // do not copy scripts folder
"!" + config.base.src + "scripts/**",
"!" + config.base.src + "index.html" // do not copy index because its minified
]
, {read: true})
.pipe(gulp.dest(config.base.dist));
});
// whatch for changes
gulp.task('watch', function () {
// Endless stream mode
return watch([
config.base.src + "**/*",
"!" + config.base.src + "scripts", // do not copy scripts folder
"!" + config.base.src + "scripts/**"
], { ignoreInitial: false })
.pipe(gulp.dest(config.base.dist));
});
// Release: make a release version
gulp.task('release', ['build'], function() {
// todo: automated versioning, see:
// https://github.com/gulpjs/gulp/blob/v3.9.1/docs/recipes/automate-release-workflow.md
});
// FILE CONVERSION
// Minify html files and do template merging
gulp.task('html', () => {
gulp.src(config.base.src + config.paths.views + '**/*.tpl')
// template merging
// .pipe( replaceTemplate({
// '<include:_headernav.tpl>' : fs.readFileSync("src/views/_headernav.tpl", "utf8"),
// repKeyB: "TEST",
// repKeyC: "WORLD!"
// }) )
// view files minification
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS : true, minifyJS : true, removeComments : true }))
// place in dest/views folder
.pipe(gulp.dest(config.base.dist + config.paths.views));
// index file minification
return gulp.src(config.base.src + 'index.html')
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS : true, minifyJS : true, removeComments : true }))
.pipe(gulp.dest(config.base.dist));
});
// Bundle and minify javascript files
gulp.task('javascript', function () {
// app.js
// set up the browserify instance on a task basis
var b = browserify({
entries: config.base.src + 'scripts/app.js',
debug: false
});
b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
// .pipe(sourcemaps.init({loadMaps: true}))
// // Add transformation tasks to the pipeline here.
// .pipe(terser(config.tersercfg))
// .on('error', log.error)
// .pipe(sourcemaps.write('./'))
//.pipe(gulp.dest(config.base.src + 'assets/js/')) // a copy to src
.pipe(gulp.dest(config.base.dist + 'assets/js/'));
// worker.js
var c = browserify({
entries: config.base.src + 'scripts/worker.js',
debug: false
});
return c.bundle()
.pipe(source('worker.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(terser(config.tersercfg))
.on('error', log.error)
.pipe(sourcemaps.write('./'))
//.pipe(gulp.dest(config.base.src + 'assets/js/')) // a copy to src
.pipe(gulp.dest(config.base.dist + 'assets/js/'));
});
// Bundle and minify CSS files
gulp.task('css', function () {
return gulp.src(config.base.src + "assets/css/**", {read: true})
.pipe(gulp.dest(config.base.dist + "assets/css/"));
});
// ADDITIONAL SERVICES
// Webserver: run local dev webserver
gulp.task('webserver', function() {
gulp.src(config.base.dist)
.pipe(webserver({
host : config.serverhost,
port : config.serverport,
https : true,
livereload : true,
directoryListing: false,
open : 'index.html',
}));
});
This diff is collapsed.
......@@ -3,6 +3,12 @@
"title": "Schluss.app",
"description": "Personal locker - Powered by Schluss technology",
"version": "0.0.1",
"main": "./src/app.js",
"scripts": {
"build": "webpack --config webpack.common.js",
"serve": "webpack-dev-server --https --hot --progress --colors --open --config webpack.prod.js",
"publish": "webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "https://gitlab.com/schluss/schluss.app.git"
......@@ -17,9 +23,8 @@
"dependencies": {
"cryptico": "^1.0.2",
"crypto-js": "^3.1.9-1",
"gulp-replace-template": "^0.1.2",
"ipfs-minime": "git+https://gitlab.com/schluss/ipfs-minime.git",
"jquery": "^3.3.1",
"jquery": "^3.4.1",
"jquery-pinlogin": "https://github.com/bobhageman/jquery-pinlogin/tarball/master",
"jquery-toast-plugin": "^1.3.2",
"localforage": "^1.7.3",
......@@ -27,18 +32,17 @@
"sammy": "^0.7.6"
},
"devDependencies": {
"browserify": "^16.2.3",
"gulp": "^3.9.1",
"gulp-clean": "^0.4.0",
"gulp-htmlmin": "^5.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.1.7",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1",
"gulp-webserver": "^0.9.1",
"gulplog": "^1.0.0",
"run-sequence": "^2.2.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel": "^6.23.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"copy-webpack-plugin": "^5.0.4",
"html-webpack-plugin": "^3.2.0",
"terser-webpack-plugin": "^1.4.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0"
}
}
......@@ -22,7 +22,7 @@ const config = require('./config.js');
global.pubsub = require('./pubsub.js');
// routing / framework
require('sammy');
var app = $.sammy = require('sammy');
require('sammy/lib/plugins/sammy.template.js');
require('sammy/lib/plugins/sammy.nested_params.js');
require('sammy/lib/plugins/sammy.flash.js');
......@@ -46,8 +46,8 @@ global.views = require('./views.js');
global.router = require('./router.js');
// sammy: routing and displaying views
//var app = $.sammy('#main', function () {
global.app = Sammy('#main', function () {
var app = $.sammy('#main', function () {
//global.app = Sammy('#main', function () {
/// VARS -------------------
......
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: {
app: ['babel-polyfill', './src/scripts/app.js','sammy'],
worker: ['babel-polyfill', './src/scripts/worker.js'],
},
output: {
filename: 'assets/js/[name].js',
globalObject: 'this'
},
devtool: "cheap-module-eval-source-map",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
mode: 'development',
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: 4,//Enable multi-process parallel running and set number of concurrent runs.
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
}),
],
},
plugins: [
new htmlWebpackPlugin({
inject: false,
template:path.join(__dirname,'src','index.html')
}),
// copy static assets to dist folder
new CopyWebpackPlugin([{
from: path.join(__dirname, 'src'),
to: path.join(__dirname, 'dist'),
ignore: ['scripts/**/*'],
}
])
],
};
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
app: ['babel-polyfill', './src/scripts/app.js','sammy'],
worker: ['babel-polyfill', './src/scripts/worker.js'],
},
output: {
filename: 'assets/js/[name].js',
globalObject: 'this'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
mode: 'production',
optimization: {
minimizer: [//default minify function. By default plugin uses terser package.
new TerserPlugin({
cache: false,
parallel: 4,//Enable multi-process parallel running and set number of concurrent runs.
sourceMap: false, // Must be set to true if using source-maps in production
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
}),
],
},
plugins: [
new htmlWebpackPlugin({
inject: false,
template:path.join(__dirname,'src','index.html'),
title: 'Production',
}),
// copy static assets to dist folder
new CopyWebpackPlugin([{
from: path.join(__dirname, 'src'),
to: path.join(__dirname, 'dist'),
ignore: ['scripts/**/*'],
}
])
],
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment