404busters · tonyhhyip · Jan 25, 2017 · Jan 25, 2017 · Jan 25, 2017 · Jan 25, 2017
diff --git a/assets/images/Free-HK-Kai_4700-v1.02.ttf → assets/blob/Free-HK-Kai_4700-v1.02.ttf b/assets/images/Free-HK-Kai_4700-v1.02.ttf → assets/blob/Free-HK-Kai_4700-v1.02.ttf
diff --git a/public/index.html → assets/html/index.html b/public/index.html → assets/html/index.html
@@ -1,33 +1,23 @@
 <html>
   <head>
     <title>自由香港楷書 Web Font 示範</title>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="自由香港楷書 Web Font 示範">
     <meta name="author" content="Open Source Hong Kong">
-
-    <style>
-    @font-face {
-      font-family: freehkfonts;
-      src: url('/images/Free-HK-Kai_4700-v1.02.ttf');
-    }
-    </style>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
-    <div id="app" />
+    <div id="app"></div>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
       ga('create', 'UA-47867649-10', 'auto');
       ga('send', 'pageview');
-
     </script>
-
     <script src="/js/app.js"></script>
   </body>
 </html>
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -1,3 +1,9 @@
+
+@font-face {
+  font-family: freehkfonts;
+  src: url('./Free-HK-Kai_4700-v1.02.ttf');
+}
+
 .container {
   width: 100%
 }

diff --git a/css/template.css b/css/template.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,11 +1,7 @@
 'use strict';
 
 const gulp = require('gulp-help')(require('gulp'));
-const gutil = require("gulp-util");
 const util = require('gulp-util');
-const rename = require('gulp-rename');
-
-const imagemin = require('gulp-imagemin');
 
 const sass = require('gulp-sass');
 const cleanCss = require('gulp-clean-css');
@@ -18,47 +14,59 @@ const fs = require('fs');
 
 const WebpackDevServer = require('webpack-dev-server');
 
-const {NODE_ENV} = process.env;
+gulp.task('blob', 'Copy file to public', () => {
+  return gulp.src('./assets/blob/**/*.*')
+    .pipe(gulp.dest('public'));
+});
+
+gulp.task('dev:html', 'Build html page for developement', () => {
+  return gulp.src('./assets/html/**/*.html')
+    .pipe(gulp.dest('public'));
+});
+
+gulp.task('build:html', 'Build html page for production', () => {
+  return gulp.src('./assets/html/**/*.html')
+    .pipe(htmlmin({
+      collapseWhitespace: true,
+      collapseBooleanAttributes: true
+    }))
+    .pipe(gulp.dest('public'));
+});
 
-gulp.task('image', 'Build imagemin version of ./assets/images/**/* into ./public/images', () => {
-  return gulp.src('./assets/images/**/*.*')
-    .pipe(imagemin())
+gulp.task('dev:css', 'Build ./assets/scss/*.scss into ./public for development', () => {
+  return gulp.src('./assets/scss/**/*.scss')
+    .pipe(sass())
     .on('error', util.log)
-    .pipe(gulp.dest('public/images'));
+    .pipe(gulp.dest('public'));
 });
 
-gulp.task('css', 'Build ./assets/scss/*.scss into ./public', () => {
-  return gulp.src(['./assets/scss/*.scss', './assets/scss/*.css'])
+gulp.task('build:css', 'Build scss files into public for production', () => {
+  return gulp.src('./assets/scss/**/*.scss')
     .pipe(sass())
     .on('error', util.log)
-    .pipe(gulp.dest('public'))
-    .pipe(rename({
-      suffix: '.min'
-    }))
     .pipe(cleanCss())
     .pipe(gulp.dest('public'));
 });
 
 gulp.task('server', 'Start a webpack-dev-server for the project at http://localhost:8080', () => {
-  const devConfig = merge(config, {
+  const devConfig = merge.smart({
     entry: {
       app: [
         'webpack-dev-server/client?http://localhost:8080/',
-        './assets/js/index.jsx'
       ]
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ],
+    module: {
+        loaders: [
+            {test: /\.jsx?/, loaders: ['react-hot']}
+        ]
     }
-  });
+  }, config);
 
   const compiler = webpack(devConfig);
   compiler.plugin('done', (stats) => {
-    util.log('[webpack]', stats.toString({
-      version: true,
-      timings: true,
-      assets: true,
-      chunks: true,
-      chunkModules: true,
-      modules: true
-    }));
     fs.writeFile('./webpack.json', JSON.stringify(stats.toJson('verbose')));
   });
 
@@ -71,7 +79,16 @@ gulp.task('server', 'Start a webpack-dev-server for the project at http://localh
 });
 
 gulp.task('js', 'Build javascripts bundle into ./public/js/app.js', (cb) => {
-  webpack(config, (e, stats) => {
+  const UglifyPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+  const prodConfig = merge.smart({
+      plugins: [
+        new UglifyPlugin({minimize: true}),
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': JSON.stringify('production')
+        })
+      ]
+  }, config);
+  webpack(prodConfig, (e, stats) => {
     if (e) {
       throw new gutil.PluginError('[webpack]', e);
     } else {
@@ -91,19 +108,18 @@ gulp.task('js', 'Build javascripts bundle into ./public/js/app.js', (cb) => {
 
 gulp.task('watch:css', false, () => {
   return gulp.watch([
-    './assets/scss/**/*.scss',
-    './assets/scss/**/*.css'
-  ], ['css']);
+    './assets/scss/**/*.scss'
+  ], ['dev:css']);
 });
 
-gulp.task('watch:image', false, () => {
+gulp.task('watch:html', false, () => {
   return gulp.watch([
-    './assets/images/**/*.*'
-  ], ['image']);
+    './assets/html/**/*.html'
+  ], ['dev:html']);
 });
 
-gulp.task('watch', 'Monitor and rebuild images and css files.',
-  ['watch:image', 'watch:css']);
-gulp.task('build:dev', false, ['js', 'image', 'css', 'server']);
-gulp.task('dev', 'Development mode. Starts',['build:dev', 'watch']);
-gulp.task('build', 'Build the site.', ['image', 'css', 'js']);
+gulp.task('watch:blob', false, () => gulp.watch(['./assets/blob/**/*.*'], ['blob']))
+
+gulp.task('watch', 'Monitor and rebuild images and css files.', ['watch:html', 'watch:css', 'watch:blob']);
+gulp.task('dev', 'Development mode. Starts',['dev:html', 'dev:css', 'server', 'blob', 'watch']);
+gulp.task('build', 'Build the site.', ['build:css', 'build:html', 'js', 'blob']);
diff --git a/package.json b/package.json
@@ -1,54 +1,55 @@
 {
   "name": "oshk-kaidemo",
+  "private": true,
   "version": "1.0.0",
-  "description": "kaidemo",
+  "description": "Demo of free HK kai fonts",
   "main": "index.js",
   "repository": {
-    "url": "git@github.com:railsstudent/oshk-kaidemo.git",
+    "url": "git+https://github.com/opensourcehk/kaidemo.git",
     "type": "git"
   },
-  "author": "Connie Leung",
+  "author": "Open Source Hong Kong",
+  "contributors": [
+    {
+      "name": "Connie Leung"
+    },
+    {
+      "name": "Tony Yip",
+      "email": "[email protected]",
+      "url": "https://tonyhhyip.me"
+    }
+  ],
   "license": "MIT",
   "scripts": {
-    "build": "NODE_ENV=production ./node_modules/.bin/gulp build",
-    "dev": "node_modules/.bin/gulp dev",
-    "gulp": "node_modules/.bin/gulp",
-    "help": "node_modules/.bin/gulp help",
-    "watch": "node_modules/.bin/gulp watch",
+    "build": "gulp build",
+    "dev": "gulp dev",
+    "gulp": "gulp",
+    "help": "gulp help",
+    "watch": "gulp watch",
     "test": "echo \"No Test\""
   },
   "devDependencies": {
-    "autoprefixer": "6.4.0",
-    "babel-core": "6.21.0",
-    "babel-loader": "6.2.10",
-    "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "6.16.0",
-    "css-loader": "0.23.1",
-    "extract-text-webpack-plugin": "1.0.1",
-    "gulp": "3.9.1",
-    "gulp-clean-css": "2.2.2",
-    "gulp-help": "1.6.1",
-    "gulp-htmlmin": "3.0.0",
-    "gulp-imagemin": "3.1.0",
-    "gulp-nunjucks": "2.3.0",
-    "gulp-rename": "1.2.2",
-    "gulp-sass": "3.0.0",
-    "gulp-util": "3.0.7",
-    "jsx-loader": "0.13.2",
-    "node-sass": "4.3.0",
-    "postcss-loader": "0.10.1",
-    "react-hot-loader": "1.3.1",
-    "sass-loader": "4.1.1",
-    "style-loader": "0.13.1",
-    "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2",
-    "webpack-merge": "2.3.1"
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^2.3.2",
+    "gulp-help": "^1.6.1",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-util": "^3.0.7",
+    "postcss-loader": "^1.2.2",
+    "react-hot-loader": "^1.3.1",
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-merge": "^2.3.1"
   },
   "dependencies": {
-    "material-ui": "0.16.7",
-    "react": "15.4.2",
-    "react-addons-css-transition-group": "15.4.2",
-    "react-dom": "15.4.2",
-    "react-tap-event-plugin": "2.0.1"
+    "material-ui": "^0.16.7",
+    "react": "^15.4.2",
+    "react-addons-css-transition-group": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-tap-event-plugin": "^2.0.1"
   }
 }
diff --git a/public/.gitignore b/public/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,15 +4,10 @@ const UglifyPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OccurenceOrderPlugin = require('webpack/lib/optimize/OccurrenceOrderPlugin');
 const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
 
 module.exports = {
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new ExtractTextPlugin('bundle.css', { allChunks: true }),
-    new UglifyPlugin({minimize: true}),
     new OccurenceOrderPlugin(),
     new DedupePlugin()
   ],
@@ -21,36 +16,26 @@ module.exports = {
   },
   devtool: 'source-map',
   entry: {
-    app: './assets/js/index.jsx'
+    app: ['./assets/js/index.jsx']
   },
   output: {
     path: `${__dirname}/public/js`,
     publicPath: '/js',
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json', '.css' ],
+    extensions: ['', '.jsx', '.js', '.json'],
     fallback: ['node_modules']
   },
   resolveLoader: {
     fallback: ['node_modules']
   },
-  postcss: [autoprefixer],
   module: {
     loaders: [
       {
-        test: /\.js$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
-        loaders: ['react-hot', 'jsx', 'babel']
-      },
-      {
-        test: /\.jsx$/,
-        exclude: /node_modules/,
-        loaders: ['react-hot', 'jsx', 'babel']
-      },
-      {
-        test: /(\.scss|\.css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
+        loaders: ['babel']
       }
     ]
   }