Resolve "Replace Gulp with Webpack"

.gitlab-ci.yml

@@ -14,7 +14,7 @@ javascript build:
   before_script:
     - npm install
   script:
-    - npx gulp
+    - npm run build
 
 python tests:
   services:

.pre-commit-config.yaml

@@ -1,39 +0,0 @@
-# See https://pre-commit.com for more information
-# See https://pre-commit.com/hooks.html for more hooks
-default_language_version:
-  python: python3.7
-
-repos:
-  - repo: local
-    hooks:
-      - id: autoflake
-        name: autoflake
-        entry: autoflake
-        language: system
-        types: [python]
-        args: ["--in-place", "--remove-unused-variables"]
-
-  - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v2.0.0
-    hooks:
-      - id: trailing-whitespace
-      - id: end-of-file-fixer
-      - id: check-yaml
-      - id: check-added-large-files
-      - id: pretty-format-json
-
-  - repo: https://github.com/psf/black
-    rev: 19.3b0
-    hooks:
-      - id: black
-        args: [--line-length=90]
-
-  - repo: https://github.com/timothycrosley/isort
-    rev: 4.3.21-2
-    hooks:
-      - id: isort
-
-  - repo: https://github.com/prettier/prettier
-    rev: 1.18.2
-    hooks:
-      - id: prettier

gulpfile.babel.js

@@ -1,70 +0,0 @@
-import path from 'path';
-import del from 'del';
-
-import { dest, parallel, series, src, watch as _watch } from 'gulp';
-import concat from 'gulp-concat';
-import globby from 'globby';
-import sass from 'gulp-sass';
-import babelify from 'babelify';
-import browserify from 'browserify';
-import source from 'vinyl-source-stream';
-import buffer from 'vinyl-buffer';
-
-const PROJECT_DIR = path.join('src', 'newsreader');
-const STATIC_DIR = path.join(PROJECT_DIR, 'static');
-const CSS_SUFFIX = 'css/';
-const JS_SUFFIX = 'js/';
-
-const SASS_DEST_DIR = path.join(STATIC_DIR, CSS_SUFFIX);
-const JS_DEST_DIR = path.join(STATIC_DIR, JS_SUFFIX);
-
-const SASS_DIR = path.join(PROJECT_DIR, 'scss');
-const JS_DIR = path.join(PROJECT_DIR, 'js');
-
-const clean = () => {
-  return del([`${STATIC_DIR}/${CSS_SUFFIX}/*.css`, `${STATIC_DIR}/${JS_SUFFIX}/*.js`]);
-};
-
-const sassTask = () => {
-  return src(`${SASS_DIR}/index.scss`)
-    .pipe(sass().on('error', sass.logError))
-    .pipe(concat(`main.css`))
-    .pipe(dest(SASS_DEST_DIR));
-};
-
-const babelTask = () => {
-  const getDirName = filename => {
-    const fragments = filename.split('/');
-
-    return fragments[fragments.length - 2];
-  };
-
-  const promise = globby([`${JS_DIR}/pages/**/index.js`]).then(entries => {
-    entries.forEach(entry => {
-      const bundle = browserify({ entries: entry, debug: true });
-      const transpiledBundle = bundle.transform(babelify);
-      const bundleName = getDirName(entry);
-
-      return transpiledBundle
-        .bundle()
-        .pipe(source('index.js'))
-        .pipe(buffer())
-        .pipe(concat(`${bundleName}.js`))
-        .pipe(dest(JS_DEST_DIR));
-    });
-  });
-
-  return Promise.resolve(promise);
-};
-
-export const watch = () => {
-  return _watch(
-    [`${PROJECT_DIR}/scss/**/*.scss`, `${PROJECT_DIR}/js/**/*.js`],
-    { ignoreInitial: false },
-    done => {
-      series(clean, parallel(sassTask, babelTask))(done);
-    }
-  );
-};
-
-export default series(clean, parallel(babelTask, sassTask));

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "lint": "npx prettier \"src/newsreader/js/**/*.js\" --check",
     "format": "npx prettier \"src/newsreader/js/**/*.js\" --write",
-    "watch": "npx gulp watch",
+    "build": "webpack --config webpack.dev.babel.js",
+    "build:prod": "webpack --config webpack.prod.babel.js",
+    "watch": "npx webpack --config webpack.dev.babel.js --watch",
     "test": "npx jest",
     "test:watch": "npm test -- --watch"
   },
@@ -17,7 +19,6 @@
   "author": "Sonny",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "globby": "^11.0.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "object-assign": "^4.1.1",
@@ -38,23 +39,22 @@
     "@babel/register": "^7.7.7",
     "@babel/runtime": "^7.7.7",
     "babel-jest": "^24.9.0",
-    "babelify": "^10.0.0",
+    "babel-loader": "^8.1.0",
-    "browserify": "^16.5.0",
+    "clean-webpack-plugin": "^3.0.0",
-    "del": "^5.1.0",
+    "css-loader": "^3.4.2",
     "fetch-mock": "^8.3.1",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-cli": "^2.2.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-sass": "^4.0.2",
     "jest": "^24.9.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "node-fetch": "^2.6.0",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "redux-mock-store": "^1.5.4",
-    "vinyl-buffer": "^1.0.1",
+    "sass-loader": "^8.0.2",
-    "vinyl-source-stream": "^2.0.0"
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-merge": "^4.2.2"
   }
 }

src/newsreader/js/pages/categories/index.js

@@ -3,8 +3,11 @@ import ReactDOM from 'react-dom';
 
 import App from './App.js';
 
-const content = document.getElementById('categories--page');
+const page = document.getElementById('categories--page');
-const dataScript = document.getElementById('categories-data');
-const categories = JSON.parse(dataScript.textContent);
 
-ReactDOM.render(<App categories={categories} />, content);
+if (page) {
+  const dataScript = document.getElementById('categories-data');
+  const categories = JSON.parse(dataScript.textContent);
+
+  ReactDOM.render(<App categories={categories} />, page);
+}

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -51,7 +51,7 @@ class PostModal extends React.Component {
             className="button post__close-button"
             onClick={() => this.props.unSelectPost()}
           >
-            Close <i class="gg-close"></i>
+            Close <i className="gg-close"></i>
           </button>
           <div className="post__header">
             <h1 className={titleClassName}>{`${post.title} `}</h1>

src/newsreader/js/pages/homepage/components/feedlist/FeedList.js

@@ -52,7 +52,7 @@ class FeedList extends React.Component {
       return (
         <div className="post-message">
           <div className="post-message__block">
-            <i class="gg-arrow-left" />
+            <i className="gg-arrow-left" />
             <p className="post-message__text">Select an item to show its unread posts</p>
           </div>
         </div>

src/newsreader/js/pages/homepage/index.js

@@ -6,12 +6,15 @@ import configureStore from './configureStore.js';
 
 import App from './App.js';
 
-const content = document.getElementById('homepage--page');
+const page = document.getElementById('homepage--page');
-const store = configureStore();
 
-ReactDOM.render(
+if (page) {
-  <Provider store={store}>
+  const store = configureStore();
-    <App />
+
-  </Provider>,
+  ReactDOM.render(
-  content
+    <Provider store={store}>
-);
+      <App />
+    </Provider>,
+    page
+  );
+}

src/newsreader/js/pages/rules/index.js

@@ -3,8 +3,11 @@ import ReactDOM from 'react-dom';
 
 import App from './App.js';
 
-const content = document.getElementById('rules--page');
+const page = document.getElementById('rules--page');
-const dataScript = document.getElementById('rules-data');
-const rules = JSON.parse(dataScript.textContent);
 
-ReactDOM.render(<App rules={rules} />, content);
+if (page) {
+  const dataScript = document.getElementById('rules-data');
+  const rules = JSON.parse(dataScript.textContent);
+
+  ReactDOM.render(<App rules={rules} />, page);
+}

src/newsreader/news/collection/templates/collection/rules.html

@@ -25,5 +25,6 @@
       {% endfor %}
     ]
   </script>
-  <script src="{% static 'js/rules.js' %}"></script>
+
+  {{ block.super }}
 {% endblock %}

src/newsreader/news/core/templates/core/categories.html

@@ -30,5 +30,6 @@
       {% endfor %}
     ]
   </script>
-  <script src="{% static 'js/categories.js' %}"></script>
+
+  {{ block.super }}
 {% endblock %}

src/newsreader/news/core/templates/core/homepage.html

@@ -5,7 +5,3 @@
 {% block content %}
   <main id="homepage--page" class="main"></main>
 {% endblock %}
-
-{% block scripts %}
-  <script src="{% static 'js/homepage.js' %}"></script>
-{% endblock %}

src/newsreader/templates/base.html

@@ -4,6 +4,7 @@
 <html>
   <head>
     <title>Newreader</title>
+    <link type="image/png" href="{% static 'icons/rss.png' %}" rel="shortcut icon" />
     {% block head %}
       <link href="{% static 'css/main.css' %}" rel="stylesheet" />
     {% endblock %}
@@ -38,5 +39,7 @@
     {% block content %}{% endblock content %}
   </body>
 
-  {% block scripts %}{% endblock %}
+  {% block scripts %}
+      <script src="{% static 'js/main.bundle.js' %}"></script>
+  {% endblock %}
 </html>

webpack.common.babel.js

@@ -0,0 +1,33 @@
+import { resolve } from 'path';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+export default {
+  entry: {
+    main: ['./src/newsreader/js/index.js', './src/newsreader/scss/index.scss'],
+  },
+  output: {
+    path: resolve(__dirname, 'src', 'newsreader', 'static', 'js'),
+    filename: '[name].bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: { loader: 'babel-loader' },
+      },
+      {
+        test: /\.(sass|scss)$/,
+        use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: './src/newsreader/static/css/[name].css',
+      allChunks: true,
+    }),
+    new CleanWebpackPlugin(),
+  ],
+};

webpack.dev.babel.js

@@ -0,0 +1,7 @@
+import merge from 'webpack-merge';
+import common from './webpack.common.babel.js';
+
+export default merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+});

webpack.prod.babel.js

@@ -0,0 +1,4 @@
+import merge from 'webpack-merge';
+import common from './webpack.common.babel.js';
+
+export default merge(common, { mode: 'production' });