[web] Minified css and javascript.

scripts/cmake/Web.cmake

@@ -39,7 +39,7 @@ if(DEFINED ENV{JENKINS_URL})
 endif()
 
 add_custom_target(web
-    COMMAND ${NPM} run build -- ${HUGO_ARGS}
+    COMMAND ${NPM} run build:release -- ${HUGO_ARGS}
     WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}/web
     DEPENDS web-install ${IMPORT_TARGET}
 )

web/README.md

@@ -24,10 +24,14 @@ In `ogs/web` run
 
 In your browser go to http://localhost:1313. As you make modifications to the site it will be rebuild and the page in the browser gets reloaded.
 
-If you want to modify css or javascript run `gulp` in another terminal:
+If you want to modify css run `gulp` in another terminal:
 
     npm run gulp
 
+If you want to modify javascript run `webpack` in another terminal:
+
+    npm run webpack-watch
+
 ## Importing CMS content (Optional)
 
 In `ogs/web/import` rename `secret_example.py` to `secret.py` and fill in `accessToken`.
@@ -126,3 +130,11 @@ Run `npm run convert` to get a list of possible arguments.
 ### Equations
 
 Equations can be set with typical LaTeX syntax by using [MathJax](https://www.mathjax.org/). Blocks are defined by `$$` at the beginning and `$$` at the end of the block. Inline math uses one `$` as the delimiter. For more usage instructions see the [MathJax LaTeX help](http://docs.mathjax.org/en/latest/tex.html).
+
+## Developer notes
+
+When adding a new module with `yarn add` you have to manually rebuild node-sass:
+
+```
+node node_modules/node-sass/scripts/install.js && npm rebuild node-sass
+```

web/gulpfile.js

@@ -4,7 +4,9 @@ var gulp = require('gulp');
 const $ = require('gulp-load-plugins')({
         rename: {
             'gulp-add-src': 'add_src',
-            'webpack-stream': 'webpack_stream',
+            'merge-stream': 'merge_stream',
+            'gulp-clean-css': 'clean_css',
+            'gulp-uglifycss': 'uglifycss'
         },
         pattern: ['*'],
         scope: ['devDependencies']
@@ -16,9 +18,8 @@ const pkg = require('./package.json');
 // scss - build the scss to the build folder, including the required paths, and writing out a sourcemap
 gulp.task('scss', () => {
     $.fancyLog("-> Compiling scss: " + pkg.paths.dist.css + pkg.vars.scssName);
-    return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
+    sassStream = gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
         // .pipe($.plumber({ errorHandler: onError }))
-        .pipe($.add_src(pkg.globs.distCss))
         // .pipe($.sourcemaps.init())
         .pipe($.sass({
                 includePaths: [
@@ -30,22 +31,18 @@ gulp.task('scss', () => {
         .pipe($.cached('sass_compile'))
         .pipe($.autoprefixer())
         // .pipe($.sourcemaps.write('./'))
-        .pipe($.size({ gzip: true, showFiles: true }))
-        .pipe(gulp.dest(pkg.paths.dist.css));
-});
+        .pipe($.size({ showFiles: true }));
 
-gulp.task('webpack-watch', () => {
-    return gulp.src(pkg.main)
-        .pipe($.webpack_stream( require('./webpack.config.watch.js') ))
-        .pipe(gulp.dest(pkg.paths.dist.js));
-});
+    cssStream = gulp.src(pkg.globs.distCss);
 
-gulp.task('webpack', () => {
-  return gulp.src(pkg.main)
-    .pipe($.webpack_stream( require('./webpack.config.js') ))
-    .pipe(gulp.dest(pkg.paths.dist.js));
+    return $.merge_stream(sassStream, cssStream)
+        .pipe($.concat(pkg.vars.cssName))
+        .pipe($.clean_css({compatibility: 'ie8', level: 1}))
+        .pipe($.size({title: 'Cleaned', showFiles: true}))
+        .pipe(gulp.dest(pkg.paths.dist.css));
 });
 
+
 gulp.task('watch', function() {
   gulp.watch(pkg.paths.src.scss + pkg.vars.scssName, ['scss']);
   gulp.watch('./package.json', ['scss']);
@@ -70,6 +67,6 @@ gulp.task('clean-all', function() {
     ]);
 });
 
-gulp.task('build', ['scss', 'webpack'])
+gulp.task('build', ['scss'])
 
-gulp.task('default', ['scss', 'webpack-watch', 'watch'])
+gulp.task('default', ['scss', 'watch'])

web/layouts/partials/header.html

@@ -7,8 +7,6 @@
   <meta name="description" content="OpenGeoSys">
   <meta name="author" content="OpenGeoSys Community">
 
-  <link rel="stylesheet" href="/css/normalize.css">
-  <link rel="stylesheet" href="/css/flexboxgrid.min.css">
   <link rel="stylesheet" href="/css/main.css">
 
   <script type="text/x-mathjax-config">

web/package.json

@@ -9,7 +9,7 @@
     "clean": "gulp clean",
     "gulp": "gulp",
     "hugo": "hugo server --disableRSS",
-    "build": "gulp build && hugo",
+    "build": "webpack && gulp build && hugo",
     "build:release": "export NODE_ENV=production && webpack --env=production && gulp build && hugo",
     "import": "cd import && python import.py",
     "convert": "vtkDataConverter",

web/webpack.config.js

+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const parts = require('./webpack.parts');
 const pkg = require('./package.json');
 
-var path = require('path'),
-    webpack = require('webpack'),
-    loaders = require('./node_modules/vtk.js/Utilities/config/webpack.loaders.js'),
-    plugins = [];
-if(process.env.NODE_ENV === 'production') {
-    console.log('==> Production build');
-    plugins.push(new webpack.DefinePlugin({
-        "process.env": {
-            NODE_ENV: JSON.stringify("production"),
-        },
-    }));
-}
-
-module.exports = {
-  plugins: plugins,
-  entry: pkg.paths.src.js + '/app.js',
-  output: {
-    // path: pkg.paths.dist.js, // does not work with webpack-stream
-    filename: 'bundle.js',
-  },
-  module: {
-      loaders: [
-          { test: require.resolve("./src/js/app.js"), loader: "expose-loader?MyWebApp" },
-      ].concat(loaders),
+const commonConfig = merge([
+  {
+    entry: {
+      app: pkg.paths.src.js + 'app.js', // PATHS.app,
     },
-    postcss: [
-      require('autoprefixer')({ browsers: ['last 2 versions'] }),
-    ],
+    output: {
+      path: pkg.paths.dist.js,
+      filename: 'bundle.js'
+    },
+    module: {
+        rules: [
+            {
+              test: require.resolve("./src/js/app.js"),
+              loader: "expose-loader?MyWebApp"
+            }
+        ].concat(module.exports = parts.loaders()),
+      },
+    // postcss: [
+      // require('autoprefixer')({ browsers: ['last 2 versions'] }),
+    // ],
+  },
+  // parts.lintJavaScript({ include: pkg.paths.src.js + '/app.js' }),
+]);
+
+const productionConfig = merge([
+  parts.productionEnv(),
+  parts.minifyJavaScript({ useSourceMap: true })
+]);
+
+const developmentConfig = merge([
+  {
+    // plugins: [
+      // new webpack.NamedModulesPlugin(),
+    // ],
+  }
+]);
+
+module.exports = function(env) {
+  if (env === 'production') {
+    return merge(commonConfig, productionConfig);
+  }
+
+  return merge(commonConfig, developmentConfig);
 };

web/webpack.parts.js

+const webpack = require('webpack');
+
+exports.minifyJavaScript = function() {
+  return {
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false,
+        },
+      }),
+    ],
+  };
+};
+
+exports.productionEnv = function() {
+  return {
+    plugins: [
+      new webpack.DefinePlugin({
+        "process.env": {
+            NODE_ENV: JSON.stringify("production"),
+        },
+      })
+    ]
+  }
+}
+
+exports.loaders = function() {
+  var replaceConfig = JSON.stringify({
+    multiple: [
+      { search: 'test.onlyIfWebGL', replace: process.env.TRAVIS ? 'test.skip' : 'test', flags: 'g' },
+    ],
+  });
+
+  return [
+  {
+    test: /\.svg$/,
+    loader: 'svg-sprite',
+    exclude: /fonts/,
+  }, {
+    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    loader: 'url-loader?limit=60000&mimetype=application/font-woff',
+  }, {
+    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    loader: 'url-loader?limit=60000',
+    include: /fonts/,
+  }, {
+    test: /\.(png|jpg)$/,
+    exclude: /test[^\.]*\.(png|jpg)$/,
+    loader: 'url-loader?limit=8192',
+  }, {
+    test: /test[^\.]*\.(png|jpg)$/,
+    loader: 'url-loader?limit=1048576',
+  }, {
+    test: /\.css$/,
+    loader: 'style-loader!css-loader!postcss-loader',
+  }, {
+    test: /\.mcss$/,
+    loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss-loader',
+  }, {
+    test: /\.c$/i,
+    loader: 'shader-loader',
+  }, {
+    test: /\.glsl$/i,
+    loader: 'shader-loader',
+  }, {
+    test: /\.json$/,
+    loader: 'json-loader',
+  }, {
+    test: /\.cjson$/,
+    loader: 'json-loader',
+  }, {
+    test: /\.html$/,
+    loader: 'html-loader',
+  }, {
+    test: /\.js$/,
+    include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
+    loader: `babel-loader?presets[]=es2015,presets[]=react!string-replace-loader?${replaceConfig}`,
+  }, {
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loader: `babel-loader?presets[]=es2015,presets[]=react!string-replace-loader?${replaceConfig}`,
+  }];
+}