Un grand pouvoir implique de grandes accessibilités

• 1996: HTML / CSS, éventuellement un peu de JS
  mais on va pas la pousser non-plus
• 2020: Node.js, TypeScript, C++ compilé vers WebAssembly
  HTM-quoi vous avez dit ?

Terminal vs. Shell

Pourquoi faire un outil CLI ?

L’exemple VSCode: le terminal intégré

const { src, dest, parallel } = require('gulp')
const resize = require('gulp-image-resize')
const imagemin = require('gulp-imagemin')

const backgrounds = () => src('img/backgrounds/*.{jpg,jpeg}')
  .pipe(resize({
    width: 1280,
    imageMagick: true
  }))
  .pipe(imagemin())
  .pipe(dest('dist/'))

const icons = () => { /* ... */ }

exports.default = parallel(backgrounds, icons)
exports.backgrounds = backgrounds
exports.icons = icons

• npx :

  $ npx -p imagemin-cli imagemin img/backgrounds/*.{jpg,jpeg} --out-dir=dist
  

• Script NPM:

  {
    "scripts": {
      "preimgoptim:backgrounds": "npm config set tmp $(mktemp -d)",
      "imgoptim:backgrounds:resize": "mogrify -resize 1280^> \
        img/backgrounds/*.{jpg,jpeg} \
        $(npm config get tmp)/img",
      "imgoptim:backgrounds:optim": "npx ...",
      "imgoptim:backgrounds": "npm run-s imgoptim:backgrounds:resize imgoptim:backgrounds:optim",
    }
  }
  

Philosophie Unix:

Un outil pour faire une chose, et une seule ; capable de s’inscrire dans une suite d’actions (pipe).

Node.js : Commander.js

const { program } = require('commander')

program
  .command('images:optimize [source] <destination>', 'Optimize images')
  .action((source, destination) => {
    const imagemin = require('imagemin')
    const imageminMozjpeg = require('imagemin-mozjpeg')
    (async () => await imagemin([`${source}/*.jpe?g`], {
      destination: destination,
      plugins: [imageminMozjpeg()]
    }))()
  })

$ node ./my/app images:optimize img/backgrounds dist

• Commander - NPM

Une interface unifiée permettra aux membres de votre projet de démarrer facilement

$ npx gulp --tasks
[11:44:02] Tasks for gulpfile.js
[11:44:02] ├── clean
[11:44:02] ├─┬ images
[11:44:02] │ └─┬ <parallel>
[11:44:02] │   ├── backgrounds
[11:44:02] │   └── icons
[11:44:02] └─┬ default
[11:44:02]   └─┬ <series>
[11:44:02]     ├── clean
[11:44:02]     └─┬ <parallel>
[11:44:02]       ├── backgrounds
[11:44:02]       └── icons

$ node ./my/app --help

Usage: app [options] [command]

Options:
  -V, --version                           output the version number
  -h, --help                              display help for command

Commands:
  images:optimize [source] <destination>  Optimize images
  help [command]                          display help for command

Permettre à toutes et à tous d’accéder aux mêmes outils, quelque soit le niveau d’appréhension ou la situation de handicap.

Dans le terminal : ncurses

• How to use ncurses widgets in shell scripts on Linux

React-blessed

• Yomguithereal/react-blessed - Github

Vue-cli

Laisser libre de choisir la façon d’accéder aux outils