Switch to Webpack for resource build

974d16e4 · kaiyou · b88985f9 · b88985f9 · b88985f9 · 974d16e4
Commit 974d16e4 authored May 28, 2018 by kaiyou
9 changed files
--- a/bower.json
+++ b/bower.json
-{
-  "name": "tedimg",
-  "private": true,
-  "dependencies": {
-    "Materialize": "materialize#~0.97.3",
-    "jquery": "~2.1.4"
-  }
-}
--- a/gulpfile.js
+++ b/gulpfile.js
-var gulp = require('gulp'), 
-    bower = require('gulp-bower'),
-    replace = require('gulp-replace'),
-    concat = require('gulp-concat');
-
-var config = {
-     srcPath: './resources',
-     bowerDir: './bower_components' ,
-    dstPath: './tedimg/static'
-}
-
-gulp.task('bower', function() { 
-    return bower()
-     .pipe(gulp.dest(config.bowerDir)) 
-});
-
-gulp.task('styles', function () {
-    return gulp.src([
-        config.bowerDir + '/*/dist/css/*.min.css',
-        config.srcPath + '/main.css'
-      ])
-      .pipe(concat('main.css'))
-      .pipe(replace("/font/", "/static/font/"))
-      .pipe(gulp.dest(config.dstPath))
-});
-
-gulp.task('scripts', function() {
-    return gulp.src([
-        config.bowerDir + '/jquery/dist/jquery.min.js',
-        config.bowerDir + '/Materialize/dist/js/materialize.min.js',
-        config.srcPath + '/*.js'
-      ])
-      .pipe(concat('main.js'))
-      .pipe(gulp.dest(config.dstPath))
-});
-
-gulp.task('copy', function() {
-    return gulp.src(config.bowerDir + '/Materialize/dist/font/**/*')
-    .pipe(gulp.dest(config.dstPath + '/font'));
-});
-
-  gulp.task('default', ['bower', 'styles', 'copy', 'scripts']);
--- a/package.json
+++ b/package.json
 {
  "name": "tedimg",
  "dependencies": {
-    "gulp-concat": "^2.6.0",
-    "gulp-replace": "^0.5.4"
-  },
-  "devDependencies": {
-    "gulp": "^3.9.0",
-    "gulp-bower": "0.0.11",
-    "gulp-notify": "^2.2.0"
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "jquery": "^3.3.1",
+    "js-loader": "^0.1.1",
+    "materialize-css": "^0.100.2",
+    "resolve-url-loader": "^2.3.0",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.9.1",
+    "webpack-cli": "^2.1.4",
+    "webpack-dev-server": "^3.1.4"
  }
 }
--- a/requirements.txt
+++ b/requirements.txt
 Flask==0.10.1
+itsdangerous==0.24
 Jinja2==2.8
+MarkupSafe==1.0
 Pillow==3.0.0
 requests==2.8.1
-uWSGI==2.0.11.2
+uWSGI==2.0.17
+Werkzeug==0.14.1
--- a/resources/main.css
+++ b/resources/main.css
@@ -24,3 +24,29 @@ input.snippet {
 :-ms-input-placeholder {
    color:    #444;
 }
+
+/* Materialize icons */
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/resources/main.js
+++ b/resources/main.js
+// Import general CSS
+import 'materialize-css';
+import 'materialize-css/dist/css/materialize.css';
+
+// Import specific CSS
+import './main.css';
+
+// Javascript libs
+import $ from 'jquery';
+
 $(document).ready(function() {

  $("form#upload input").change(function() {

--- a/runserver.py
+++ b/runserver.py
--- a/tedimg/templates/base.html
+++ b/tedimg/templates/base.html
@@ -4,9 +4,7 @@
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>{{ config["SITE_NAME"] }}</title>
-  <link href="/static/main.css" type="text/css" rel="stylesheet" media="screen,projection"/>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script src="/static/main.js"></script>
+  <script src="/static/app.js"></script>
 </head>
 <body>
  <nav class="blue" role="navigation">
@@ -21,9 +19,8 @@
  <footer class="page-footer blue">
    <div class="footer-copyright">
      <div class="container">
-      Built with <i class="material-icons tiny">favorite</i> using <a class="white-text" href="http://flask.pocoo.org/">Flask</a>,
-      <a class="white-text" href="http://materializecss.com/">Materialize</a> and
-      <a class="white-text" href="http://gulpjs.com/">Gulp</a>
+      Built with <i class="material-icons tiny">favorite</i> using <a class="white-text" href="http://flask.pocoo.org/">Flask</a> and
+      <a class="white-text" href="http://materializecss.com/">Materialize</a>
      <span class="right"><i class="material-icons tiny">call_split</i> on <a class="white-text" href="https://github.com/kaiyou/tedimg">Github</a>.</a>
      </div>
    </div>

--- a/webpack.config.js
+++ b/webpack.config.js
+var webpack = require("webpack");
+var path = require("path");
+
+module.exports = {
+  mode: 'development',
+
+  entry: './resources/main.js',
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, 'tedimg/static'),
+    publicPath: '/static/'
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'resolve-url-loader']
+      },
+      {
+        test: /\.(png|woff2?)$/,
+        use: ['file-loader']
+      }
+    ]
+  }
+}