updating latest

blog/ES6vsCJS.md

@@ -0,0 +1,54 @@
+# ES6 vs CommonJS
+
+The differences in using import/export between the two:
+
+![Differences](https://i.stack.imgur.com/5WgFJ.png)
+
+- Node is compatible with ES6. You can find a compatability table here: <https://node.green>.
+
+## CommonJS
+
+To export functions use `exports.name`:
+
+```javascript
+exports.run = run;
+```
+
+You can also use:
+
+````javascript
+module.exports = {
+    run: run
+}
+```
+
+for multiple exports.
+
+To import functions use `require`. You can use object destructuring as well:
+
+```javascript
+const { run } = require("./build-lunrjs-index");
+const gulp = require("gulp");
+````
+
+If using destructuring you can then run the function as if it were local:
+
+```javascript
+function buildSearch(cb) {
+  run();
+  cb();
+}
+```
+
+If you don't use destructuring (`const run = require("./build-lunrjs-index");`) then you have to pass the constant name and the export you want in:
+
+```javascript
+function buildSearch(cb) {
+  run.run();
+  cb();
+}
+```
+
+## Node and Gulp
+
+If you are using node and or gulp you should use CJS for your module import and exports. You can use any javascript that node is compatible with in your code.

blog/gulp.md

@@ -6,10 +6,89 @@ Gulp can complement webpack by adding additional workflows to your project. Webp
 
 Using node we could run our webpack command and build commands seperately in the workflow. We could use gulp to use one command to do both. We can also use gulp to build the search index of an app as part of this workflow.
 
+## ES6 in Gulp
+
+Gulp is a command-line task runner for node. This means that any javascript that is valid in node is valid in gulp (including anything you import). Node doesn't support ES6 modules (without using babel) so you have to use `require` and `exports`. You can freely use arrow functions and any other node compatible javascript.
+
+<https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles/>
+
+If you want full ES6 syntax in gulp you should create a `gulpfile.babel.js` and install the `@babel/register` module.
+
+If you just want the `import/export` syntax create a `gulpfile.esm.js` and install the `esm` module.
+
 ## Creating a gulpfile
 
 `yarn add gulp`
 
 Create a `gulpfile.js` in the root of your project next to the `package.json` file.
 
+Alternatively if you want to split your gulp tasks out into seperate modules you should create a `./gulpfile.js` directory and an `index.js` file inside. This will be treat as a normal `gulpfile.js`.
 
+### functions
+
+Create functions as normal in the gulpfile. These functions should take `cb` as a parameter and you should end the function with `cb()` to let gulp know the function has finished.
+
+### export
+
+Your gulpfile should export either a `gulp.series` or `gulp.parallel` (or just the function itself). `series` will run one after the other and parallel will run in any order.
+
+An example gulpfile that is importing a module and running it:
+
+```javascript
+const { run } = require("./build-lunrjs-index");
+const gulp = require("gulp");
+
+function buildSearch(cb) {
+  run();
+  cb();
+}
+
+module.exports = {
+  buildSearch: gulp.parallel(buildSearch),
+};
+```
+
+## package.json
+
+Your `package.json` file can create an entry under the `scripts` key:
+
+```json
+"scripts": {
+"buildSearch": "gulp buildSearch"
+}
+```
+
+The `gulp` command should be followed by the name of the export you want to run.
+
+You can then run the command using `npm` or `yarn`: `yarn buildSearch`.
+
+## webpack
+
+You can integrate gulp with webpack, allowing gulp to run your webpack build. There are a few ways to do this, one way using `webpack-stream` is here: <https://cecilphillip.com/adding-webpack-to-your-gulp-tasks/>.
+
+Alternatively, if you don't want to control webpack through gulp (pipe in a different destination or alter the workflow) and just want to run it as if you were running webpack directly you can simply import `webpack` and your `webpack.prod.js` file into gulp.
+
+The following gulpfile will run a webpack build (remember to add to package.json as a script):
+
+```javascript
+const webpack = require("webpack");
+const webpackConfig = require("./webpack.prod");
+
+function buildTheme(cb) {
+  return new Promise((resolve, reject) => {
+    webpack(webpackConfig, (err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+      if (stats.hasErrors()) {
+        return reject(new Error(stats.compilation.errors.join("\n")));
+      }
+      resolve();
+    });
+  });
+}
+
+module.exports = {
+  buildTheme: buildTheme,
+};
+```

blog/gulpfile.js

@@ -1,13 +0,0 @@
-// import run from "build-lunrjs-index";
-// import { promise } from "readdirp";
-const run = require("./build-lunrjs-index");
-const gulp = require("gulp");
-// const webpack = require("webpack");
-// const webpackConfig = require("./web")
-
-function buildSearch(cb) {
-  run.run();
-  cb();
-}
-
-exports.buildSearch = buildSearch;

blog/gulpfile.js/build-lunrjs-index.js

@@ -57,16 +57,16 @@ function makeIndex(posts) {
 async function run() {
   // The following line specifies which directory to use for indexing. See above
   // for excluded directories and filetypes.
-  const posts = await loadPostsWithFrontMatter(`${__dirname}/content/`);
+  const posts = await loadPostsWithFrontMatter(`${__dirname}/../content/`);
   const index = makeIndex(posts);
   console.log(JSON.stringify(index));
 }
 
-run()
+// run()
-  .then(() => process.exit(0))
+//   .then(() => process.exit(0))
-  .catch((error) => {
+//   .catch((error) => {
-    console.error(error.stack);
+//     console.error(error.stack);
-    process.exit(1);
+//     process.exit(1);
-  });
+//   });
 
-exports.run = run
+exports.run = run;

blog/gulpfile.js/index.js

@@ -0,0 +1,19 @@
+const { run } = require("./build-lunrjs-index");
+const gulp = require("gulp");
+const util = require("util");
+const execFile = util.promisify(require("child_process").execFile);
+// const execFile = require("child_process").execFile;
+
+async function buildSearch(cb) {
+  return run();
+}
+
+async function buildHugo(cb) {
+  await execFile("hugo", ["-D", "--minify"]);
+}
+
+module.exports = {
+  buildSearch: buildSearch,
+  buildHugo: buildHugo,
+  buildBlog: gulp.parallel([buildSearch, buildHugo]),
+};

blog/package.json

@@ -3,10 +3,12 @@
     "gulp": "^4.0.2",
     "lunr": "^2.3.8",
     "parser-front-matter": "^1.6.4",
-    "readdirp": "^3.4.0"
+    "readdirp": "^3.4.0",
+    "webpack": "^4.43.0"
   },
   "scripts": {
-    "buildSearch": "gulp buildSearch"
+    "buildSearch": "gulp buildSearch",
-  },
+    "buildHugo": "gulp buildHugo",
-  "type": "module"
+    "buildBlog": "gulp buildBlog"
+  }
 }

blog/todo-webpack.todo

@@ -20,5 +20,12 @@ Search:
   ☐ Have search auto run whenever a button is pressed
 
 Gulp:
-  ☐ Document yarn automatically resolving modules locally for commands you give it (running gulp it will automaitcally find it).
+  ☐ Using <https://stackoverflow.com/questions/23247642/modify-file-in-place-same-dest-using-gulp-js-and-a-globbing-pattern> and <https://www.npmjs.com/package/gulp-replace> to handle hashed images.
-  ☐ Document javascript exports using ES6.
+  Notes:
+    ☐ If you are not using Hugo, you could use the above to dynamically reference images in your html, and use gulp to replace them with the images bundled with webpack. Name the images the same as they're referenced, then replace any `<img src="">` with the bundled image in the html. You can get the mapping from the output from webpack, using the unique image name as the key.. You can then use gulp to minimise or resize the images.
+    ☐ Hugo will bundle your images into their own folders. You can use gulp to find images in your `./posts` (or even the whole project), and resize/minimise them.
+  ✔ Document yarn automatically resolving modules locally for commands you give it (running gulp it will automaitcally find it). @done (6/3/2020, 1:21:46 AM)
+  ✔ Document javascript exports using ES6. @done (6/3/2020, 1:21:47 AM)
+  ✔ Using the cjs extension for gulpfile.or using type: module in package.json. @done (6/3/2020, 1:21:48 AM)
+  Notes:
+    ✔ When can we use require vs import? @done (6/3/2020, 1:21:49 AM)

tasks.todo

@@ -63,6 +63,7 @@ Tasks:
         Needs it's own page listing all series
         Each series needs its own page with image and intro + TOC (https://simpleisbetterthancomplex.com/series/beginners-guide/1.11/)
         Could have a banner or side content saying this is part N in a series?
+        Use this shortcode on pages in a series: <https://www.robinwieruch.de/webpack-eslint> - showing what part of N it is and of what series. Should dynamically show depending on whether it is a series or not.
     ☐ Have a categories taxonomy (https://www.integralist.co.uk/posts/static-search-with-lunr/ at the bottom)
       Notes:
         Categories are high level: code, guides/tutorials, deployment etc