The project building tool with declarative YAML configuration based on Gulp and Webpack. Specializing on Pug, Stylus and TypeScript as source code languages; also works with images, fonts, videos and audios.

📖 Documentation

npm i @yamato-daiwa/automation -D -E

@vue/compiler-sfc, vue-loader

Used to provide the support of Vue Single File Components for ECMAScript logic processing

@webdiscus/pug-loader

Used to provide the bundling of the Pug code to output JavaScript code by Webpack. The better alternative of **pug-html-loader** because last one has multiple high and critical vulnerabilities (at least it was so for the February 2023).

@yamato-daiwa/es-extensions, @yamato-daiwa/es-extensions-nodejs

Used to reduce the routine code

@yamato-daiwa/style_guides

The code style guides to which this project obeying and also suggested for the consuming project

autoprefixer

Used for adding of the vendor prefixes to CSS properties in processed stylesheets the better cross-browser adaptations

browser-sync

Used to provide the automation of browser opening and reloading when project incrementally rebuilt

css-loader

Used to provide the imports of stylesheets to ECMAScript bundles

cssnano

Used to provide optimization and minification of compiled CSS code

fork-ts-checker-webpack-plugin

Used to improve the performance of TypeScript transpiling functionality

gulp

Used as main task manager, the tool for providing of arranging of the tasks to sequences and series and running them

gulp-data

Used to provide the global variables defined by user in appropriate configuration inside the Pug templates

gulp-html-prettify

Used to provide the formatting of output HTML code better than suggested by Pug pre-processor

gulp-if

Used for providing of conditional processing according to various settings

gulp-imagemin

Used to provide the automation of images files optimization

gulp-plumber

Used for errors handing inside Gulp pipelines

gulp-postcss

Used to provide the post-processing of CSS code with PostCSS plugins

gulp-pug

Used to provide the basic Pug-to-HTML transpiling

gulp-stylus

Used to provide the basic Stylus-to-CSS transpiling

imagemin-pngquant

Used to provides the optimization of PNG files

json5-loader

Used to provide the imports of JSON5 as ECMAScript native object to JavaScript bundle

node-html-parser

Used for the accessibility inspection of the HTML code

node-notifier

Used for accessing to native toast message functionality

pa11y

Used for manipulation with compiled HTML code like resolving of paths aliases

probe-image-size

Used for retrieving of the images with and height.

pug-lint

Used to providing linting of Pug source code

pug-plain-loader

Used to providing of the Pug source code language for Vue templates in Single File Components

puppeteer

Used for the accessibility inspection of the HTML code. The pa11y works only with URIs and does not support the raw HTML code; to check the accessibility of the raw HTML code, the puppeteer is required.

rev-hash

Used for generating of file content dependent postfixes to prevent the outdated stylesheets, scripts etc. because of browser caching (thus actual for the Browser runtime only).

stlint

Used for linting of styles written by Stylus. The formatted output to terminal has been implemented by YDA development side.

stream-combiner2

Used for creating of Gulp tasks with complicated conditionals and parallels.

style-loader

Used to provide the dynamic injection of CSS functionality which has been imported to JavaScript bundle built by Webpack

stylus-loader

Used to provide the dynamic loading of CSS witten by Stylus pre-processor which has been imported to JavaScript bundle built by Webpack

ts-loader

Used to provide the integration of TypeScript and Webpack

vinyl

Used to create new Gulp plugins. Although this package is being installed indirectly, the importing of this package without manual installing will cause "node/no-extraneous-import" ESLint issue and there is no reason to mute it.

vue-style-loader

Used to provide the dynamical loading of CSS written in Vue Single File Components to HTML document

vue-tcs

Used to provide the optimized type checking of Vue and also TypeScript files.

w3c-html-validator

Used to get the HTML validation data from W3C service. The formatted output to terminal has been implemented by YDA development side.

webpack

Used as basic tool for the ECMAScript logic processing

webpack-node-externals

Used to prevent the bundling of NodeJS modules by Webpack because this bundling brings a lot of warning and/or errors while not required for console and server applications

webpack-stream

Used only for the generating of Pug files with integrated JavaScript compiled from TypeScript. For this subtask, webpack-stream is perfect, but it has many limitations so it is not being used for the main processing of ECMAScript logic.

webpack-node-externals

Used to prevent the bundling of NodeJS modules by Webpack because this bundling brings a lot of warning and/or errors while not required for console and server applications

yaml-loader

Used to provide the import of content of YAML files converted to JavaScript native object

All @types are the TypeScript types definitions that required for normal transpiling of the TypeScript to JavaScript (Node.js).

eslint-webpack-plugin

Required for the outputting of ESLint error only on building of YDA application. YDA itself uses own ESLint wrapper for better performance.

ts-node

Used to support the Webpack configuration written by TypeScript

typescript

Used to provide the TypeScript as source code language

webpack-cli

Used for the project building