CLI Tools for Web Development

   
   
 cli  npm  
 frontend  
Table of Content

Preface

Goal: Introducing terminal as web development tools for beginner.

Just in case you haven’t notice, a must have skill for web development is, terminal skill. CLI is a must have tools for coding.

Source Examples

You can obtain source examples here:

For Beginner

Terminal is a must have knowledge for modern web development.

There are a lot of node package that suit this situation. Most of the tools can be bundled into javascript that run in browser without the need of terminal. It is still recommended to learn basic stuff using CLI.

This article arranged as below:

  • Stylesheet

    • 1: Stylelint
    • 2: PostCSS: Autoprefixer
    • 3: PostCSS: CSSnano

  • Ecmascript

    • 4: Node itself
    • 5: Eslint
    • 6: Babel
    • 7: Terser

Of course the are other tools as well such as: task runner, bundler, CSS Preprocessor, html preprocessor or even testing tools. But this is beyond the scope of beginner.

There are also tons of Node packages, But I limit for few packages only, as introduction to terminal.

I also limit this article for: native stylesheet, and vanilla ecmascript. My intention is showing how important it is, in modern web development era, for beginner to embrace terminal.

1: Stylesheet: Stylelint

This stylelint is useful to check stylesheet rules.

Reference: Official Site

Install

$ npm i -s -D stylelint stylelint-config-standard
+ stylelint@13.8.0
+ stylelint-config-standard@20.0.0
updated 3 packages and audited 266 packages in 39.72s

Stylelint: NPM Install

Example Stylelint Configuration

Do not get intimidated by long configuration!

Suppose that you decide to use rem unit instead of px, and decide to run check whether your stylesheet is, following the new rule. You can copy-paste, this ready to use configuration below:

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["extends"]
      }
    ],
    "block-no-empty": null,
    "unit-disallowed-list": [
      "px",
      {
        "ignoreProperties": {
          "px": ["/^border/", "/^transform/"]
        },
        "ignoreMediaFeatureNames": {
          "px": ["min-width"]
        }
      }
    ]
  }
}

Stylelint: Configuration

Example Source

Consider checking this stylesheet as below:

/* Main Layout: Mobile First */

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
  }
  
  .tabs>* {
    min-height: 320px;
  }
}

Example Usage

You can check validity rules of your stylesheet as below:

$ npx stylelint basic-layout.css

basic-layout.css
 18:17  ✖  Unexpected unit "px"   unit-disallowed-list

Stylelint: Usage

2: Stylesheet: PostCSS: Autoprefixer

This is a postcss plugin. This autoprefixer is useful, to maintain compatibility with old browser.

Install

You can install postcss globally.

$ npm i -s -g postcss
+ postcss@8.2.0
updated 1 package in 1.247s

And the rest in respective local folder.

$ npm i -s -D postcss-cli autoprefixer
+ postcss-cli@8.3.0
+ autoprefixer@10.1.0
updated 2 packages and audited 106 packages in 9.555s

PostCSS: Autoprefixer: NPM Install

Example PostCSS Configuration

You can simply put the autoprefixer in postcss.config.js.

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

Example Source

Consider checking this stylesheet as below:

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

This example is taken from

Example Usage

$ postcss --verbose example.css
Processing example.css...
.example {
    display: grid;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: linear-gradient(to bottom, white, black);
}
Finished example.css in 923 ms

PostCSS: Autoprefixer: Usage

3: Stylesheet: PostCSS: CSSnano

This CSSnano is useful for CSS minification.

Install

Very similar with autoprefixer.

❯ npm i -s -D postcss-cli cssnano
+ postcss-cli@8.3.0
+ cssnano@4.1.10
added 86 packages from 62 contributors, updated 1 package and audited 281 packages in 29.188s

PostCSS: CSSnano: NPM Install

Example PostCSS Configuration

You can simply put the cssnano in postcss.config.js.

// postcss.config.js
const cssnano = require('cssnano')

module.exports = {
  plugins: {
    cssnano: { preset: 'default' }
  }
}

Example Source

Consider checking this stylesheet as below:

/* Main Layout: Mobile First */

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
  }
  
  .tabs>* {
    min-height: 20rem;
  }
}

…

Example Usage

❯ postcss --verbose basic-layout.css
Processing basic-layout.css...
.tabs{display:flex;flex-direction:column}…

PostCSS: CSSnano: Usage

4: Ecmascript: Node itself

Learning Ecmascript using DOM in inspect element, can be a daunting task. On the other hand, using terminal is far easier, if you just dare to embrace CLI.

Start using terminal instead, it is more clear with clean code, without HTML burden.

Example Ecmascript Source

const songs  = [
  { title: "Cantaloupe Island",          tags: ["60s", "jazz"] },
  { title: "Let it Be",                  tags: ["60s", "rock"] },
  { title: "Knockin' on Heaven's Door",  tags: ["70s", "rock"] },
  { title: "Emotion",                    tags: ["70s", "pop"] },
  { title: "The River" }
];

let tagSet = new Set();

// using set feature to collect tag names
songs.forEach(function(song) {
  if( "tags" in song ) {   
    let tags = song.tags;
    console.log(tags);

    for (const tag of tags) {
      tagSet.add(tag);
    }
  }
});

console.log(tagSet);

// normalize to array
let alltags = [...tagSet];

console.log(alltags);

Example Usage

Yes, you can run ecmascript, directly from terminal using node.

❯ node songs.js
[ '60s', 'jazz' ]
[ '60s', 'rock' ]
[ '70s', 'rock' ]
[ '70s', 'pop' ]
Set(5) { '60s', 'jazz', 'rock', '70s', 'pop' }
[ '60s', 'jazz', 'rock', '70s', 'pop' ]

NodeJS: Run Ecmascript Directly Using Terminal

5: Ecmascript: Eslint

This eslint is useful to check potential issue in ecmascript.

Install

❯ npm i -s -D eslint
+ eslint@7.15.0
updated 1 package and audited 109 packages in 13.089s

Eslint: NPM Install

Example Eslint Configuration

You can copy-paste, this ready to use configuration below:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
}

Example Usage: Case 1

Suppose that you have this code below:

const song  = { title: "Cantaloupe Island", tags: ["60s", "jazz"] };

You can check the code using eslint in terminal.

$ npx eslint song-01.js

/home/epsi/Documents/dev-tools/eslint/song-01.js
  1:7  error  'song' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Eslint: Usage: Case 1

Example Usage: Case 2

Suppose that you want to, disable checking for one line as this code below:

/* eslint-disable no-undef */
song  = { title: "Cantaloupe Island", tags: ["60s", "jazz"] };

console.log(song);

You can check the code using eslint in terminal.

$ npx eslint song-02.js
  • There will nothing happened, because the code has no issue.

Eslint: Usage: Case 2

6: Ecmascript: Babel

This babel is useful, to maintain compatibility, with browser with old javascript support.

Install

❯ npm i -s -D @babel/core @babel/cli @babel/preset-env @babel/polyfill
+ @babel/core@7.12.9
+ @babel/cli@7.12.8
+ @babel/preset-env@7.12.7
+ @babel/polyfill@7.12.1
added 160 packages from 74 contributors, updated 2 packages and audited 383 packages in 19.084s

Babel: NPM Install

Example Configuration

By using presets, there is no need for configuration. for example @babel/preset-env will convert the ecmascript to ES5.

Flexibility, you can have multiple configuration. For example if you do not want to disable aading use strict, as shown in code as below:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["remove-use-strict"]
}

Babel: Configuration

Example Source

Consider using previous javasscript:

Babel: Example Ecmascript Source

Example Usage

You can either use presets:

$ babel songs.js --presets @babel/preset-env

Or use configuration

$ babel songs.js --config-file ./babel.es5.config.json

And finally write directly to file

$ babel songs.js --presets @babel/preset-env > songs.es5.js

Example Result

The result will contain two parts:

  1. A bunch of newly functions to maintain compatibility in above.
  2. Altered code, based on the original code.

Both in the same file.

  • Functions:
function _toConsumableArray(arr) { … }

function _nonIterableSpread() { … }

function _iterableToArray(iter) { … }

function _arrayWithoutHoles(arr) { … }

…

_

Babel: Example Ecmascript Result: Function

  • Code:
…
songs.forEach(function (song) {
  if ("tags" in song) {
    var tags = song.tags;
    console.log(tags);

    var _iterator = _createForOfIteratorHelper(tags),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var tag = _step.value;
        tagSet.add(tag);
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
  }
});
…

_

Babel: Example Ecmascript Result: Code Content

Running The Result

You can run the result with node.

❯ node songs.es5.js

Tracking Error

If the code does not works, you should check the original code with eslint. For example if you forget to add the const keyword, before the songs name, the babel will successfully translate to ES5. But the code cannot be run under the use strict, in newly created ecmascript.

songs  = [
  …
];

7: Ecmascript: Terser

This terser is uglify-js for es6+.

Install

You can install terser globally.

❯ npm i -s -g terser
/home/epsi/.npm-global/bin/terser -> /home/epsi/.npm-global/lib/node_modules/terser/bin/terser
+ terser@5.5.1
added 6 packages from 38 contributors in 2.941s

Example Usage

$ terser --compress --mangle -- songs.js

The result is a minified ecmascript.

Terser: Example Result: Compressed Ecmascript

Finally

I think that is all.

Have fun with terminal.