Merge pull request #10 from wide/new-js-builder

New js builder
wide · Jun 21, 2021 · 0072c0d · 0072c0d
2 parents 689d660 + cfdef36
commit 0072c0d
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wide/forge",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Zero-based configuration builder for frontend integration projects.",
   "license": "MIT",
   "author": "Aymeric Assier (https://github.com/myeti)",
@@ -17,36 +17,40 @@
     "forge": "./lib/cli.js"
   },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=12.18.0"
   },
   "scripts": {
-    "build": "babel src/ -d lib/ --presets babel-preset-es2015 --plugins syntax-object-rest-spread",
+    "build": "babel src/ -d lib/ --presets=@babel/preset-env --plugins=@babel/plugin-syntax-object-rest-spread,@babel/plugin-transform-runtime",
     "prepare": "rimraf lib/ && npm run build"
   },
   "dependencies": {
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^10.2.6",
     "browser-sync": "^2.26.14",
-    "chalk": "^3.0.0",
-    "chokidar": "^3.5.1",
+    "chalk": "^4.1.1",
+    "chokidar": "^3.5.2",
     "columnify": "^1.5.4",
-    "cpy": "^7.3.0",
-    "dotenv": "^8.2.0",
-    "faker": "^4.1.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
-    "js-beautify": "^1.10.3",
-    "lodash": "^4.17.15",
-    "parcel-bundler": "^1.12.4",
+    "cpy": "^8.1.2",
+    "dotenv": "^10.0.0",
+    "faker": "^5.5.3",
+    "favicons": "^6.2.2",
+    "fs-extra": "^10.0.0",
+    "glob": "^7.1.7",
+    "js-beautify": "^1.14.0",
+    "lodash": "^4.17.21",
+    "parcel-bundler": "^1.12.5",
+    "postcss": "^8.3.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.32.5",
+    "sass": "^1.35.1",
     "svg-sprite": "^1.5.0",
     "twig": "^1.15.4",
-    "yargs": "^14.2.0"
+    "yargs": "^17.0.1"
   },
   "devDependencies": {
-    "babel-cli": "6.26.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.14.5",
     "rimraf": "^3.0.2"
   }
 }
diff --git a/readme.md b/readme.md
@@ -22,6 +22,8 @@ npm install @wide/forge --save-dev
 - [HTML / TWIG](#html--twig)
 - [CSS / SASS](#css--sass)
 - [JS / ESNEXT](#js--esnext)
+- [SVG Sprite](#svg-sprite)
+- [Favicons](#favicons)
 - [Other assets](#other-assets)
 - [Advanced usage](#advanced-usage)
 
@@ -310,7 +312,7 @@ module.exports = {
 ```
 
 
-## SVG SPRITE
+## SVG Sprite
 
 - source files: `/src/assets/icons/*.svg`
 - destination: `/dist/assets/sprite.svg`
@@ -365,6 +367,54 @@ Notes:
 - `mode.exemple` is `false` on `PRODUCTION` by default
 
 
+## Favicons
+
+- source files: `/src/assets/favicon.png`
+- destination: `/dist/assets/favicons`
+- compiled using [`favicons`](https://www.npmjs.com/package/favicons)
+
+### Path config
+
+To change the path config, create a `.forgerc.js` file at the root of your project with a `favicons` prop:
+```js
+module.exports = {
+  favicons: {
+
+    // in /src, files to watch, will trigger the compilation when changed
+    observe: 'assets/favicon.png',
+
+    // in src/, file to compile, must be root level only
+    entries: 'assets/favicons.png',
+
+    // in dist/, subfolder to generate the sprite file into
+    output: 'assets/favicons/',
+
+    // commands to execute around the compilation
+    hooks: {
+
+      // run before the compilation, can be a string "npm run something"
+      // or a function receiving the current target and the compiled files
+      before(target, compiled) {},
+
+      // run after the compilation, can be a string "npm run something"
+      // or a function receiving the current target and the compiled files
+      after(target, compiled) {}
+    }
+  }
+}
+```
+
+### Favicons config
+
+To edit the config of `favicons` itself, create a `.faviconsrc.js` file at the root of your project:
+```js
+module.exports = {
+  // all props described here:
+  // https://github.com/itgalaxy/favicons#usage
+}
+```
+
+
 ## Other assets
 
 For all others assets (images, documents...), **Forge** simply copy them into the `dist/` folder.

diff --git a/src/compiler/favicons.js b/src/compiler/favicons.js
@@ -0,0 +1,60 @@
+import { loadRC, write } from '../workspace'
+import path     from 'path'
+import favicons from 'favicons'
+
+
+/**
+ * Compile favicons files
+ * @param {Object} ctx
+ * @param {Array}  ctx.files favicons to compile
+ * @param {String} ctx.dest folder to write favicons
+ */
+ export default async function(ctx) {
+
+  // get .faviconsrc
+  const rc = loadRC('favicons', {
+    icons: {
+      android: true,
+      appleIcon: true,
+      appleStartup: false,
+      coast: false,
+      favicons: true,
+      firefox: false,
+      opengraph: false,
+      twitter: false,
+      windows: true,
+      yandex: false
+    }
+  })
+
+  // compile and return files
+  return compile(ctx.files, ctx.dest, rc)
+}
+
+
+/**
+ * Compile one favicon file
+ * @param {String|Array<String>} files Files to compile
+ * @param {String} dest Destination to write files
+ * @param {Object} rc Favicon moodule configuration
+ */
+async function compile(files, dest, rc) {
+  // create the favicons
+  const stats = await favicons(files, rc)
+
+  // store written images
+  const compiled = []
+
+  // loop over all images and write them
+  for (const favicon of stats.images) {
+    // create the path to the destination files
+    // will be wrote
+    const faviconPath = path.resolve(dest, favicon.name)
+
+    // add file to the list to return
+    compiled.push(await write(faviconPath, favicon.contents))
+  }
+
+  // return compiled images
+  return compiled
+}
diff --git a/src/compiler/index.js b/src/compiler/index.js
@@ -6,11 +6,12 @@ import twig       from './twig'
 import sass       from './sass'
 import svg        from './svg'
 import js         from './js'
+import favicons   from './favicons'
 
 
 const KO = 1024
 const MO = KO*1024
-const compilers = { twig, sass, svg, js, ...config.compilers }
+const compilers = { twig, sass, svg, js, favicons, ...config.compilers }
 
 
 /**

diff --git a/src/config.js b/src/config.js
@@ -2,7 +2,7 @@ export default {
 
   input: 'src/',
   output: 'dist/',
-  targets: ['twig', 'sass', 'js', 'polyfills', 'svg'],
+  targets: ['twig', 'sass', 'js', 'polyfills', 'svg', 'favicons'],
 
   twig: {
     observe: '**/*.{twig,html}',
@@ -34,6 +34,12 @@ export default {
     output: 'assets/polyfills'
   },
 
+  favicons: {
+    observe: 'assets/favicon.png',
+    entries: 'assets/favicon.png',
+    output: 'assets/favicons'
+  },
+
   svg: {
     observe: '**/*.svg',
     entries: 'assets/icons/*.svg',

diff --git a/src/tasks/serve.js b/src/tasks/serve.js
@@ -26,7 +26,7 @@ export default function(opts = {}) {
     ignore: '**/*.map',
     server: {
       baseDir: config.output,
-      directory: false
+      directory: true
     },
     port: opts.port || 1234,
     https: opts.https,