Npm commands (Scripts)
Npm scripts help with performing repetitive tasks such as minification, compilation, unit testing, linting, etc. The Finder build system utilizes a collection of JavaScript files, each dedicated to specific tasks. These tasks are orchestrated by corresponding npm scripts that efficiently execute the files as required.
List of available Npm commands (Scripts)
| Command | Description |
|---|---|
| npm install | This command installs all the Node.js packages and their dependencies specified in the project's package.json file, located in the root directory. It includes packages listed under both dependencies and devDependencies objects. |
| npm run dev | This command builds and minifies CSS and JavaScript, generates an icon font from SVG icons, copies vendor files from the node_modules directory to the assets/vendor folder, initiates a watch process to monitor file changes, and starts a local development server with hot reloading. It is the primary command used when customizing the template. |
| npm run build | This command conducts a series of operations to prepare the project for production: it builds and minifies CSS and JavaScript; generates an icon font from SVG icons; copies vendor files from the node_modules directory to the assets/vendor folder. The command also validates HTML files against W3C standards and creates a distribution folder (dist). It then copies all necessary assets into this folder, including HTML files, and updates links to vendor files within the copied HTML files. |
| npm run styles | This command executes the following two style-related commands sequentially: styles:compile and styles:minify |
| npm run styles:compile | This command first lints SCSS files to ensure they adhere to Bootstrap coding standards. It then compiles the SCSS file located at src/scss/theme.scss into a CSS file at assets/css/theme.css, and generates a corresponding source map file. The source map facilitates easier debugging by mapping the CSS styles back to their original SCSS sources. |
| npm run styles:minify | This command minifies the compiled CSS files, reducing their file size for better performance in production environments. It targets CSS files located in the assets/css folder, optimizing them for faster loading times. |
| npm run styles-rtl | This command runs three tasks sequentially to handle Right-to-Left (RTL) styles: styles:compile, styles:rtl, and styles:minify-rtl. This facilitates support for languages read from right to left by adjusting the styling accordingly. |
| npm run styles:rtl | This command converts the compiled theme.css file into RTL format, producing an output file named theme.rtl.css along with an associated map file. |
| npm run styles:minify-rtl | This command minifies the RTL-converted CSS files, reducing their file size for better performance in production environments. |
| npm run scripts | This command executes the following two scripts-related commands sequentially: scripts:compile and scripts:minify |
| npm run scripts:compile | This command first lints the source JavaScript files from src/js directory to ensure code quality. It then bundles them into a single file assets/theme.js and generates a corresponding source map file. The source map aids in debugging by mapping the bundled JavaScript back to its original source files. |
| npm run scripts:minify | This command minifies and uglifies the assets/js/theme.js file, generating assets/js/theme.min.js, reducing its size and obfuscating the code for improved performance and security. It also generates an associated source map file to assist in debugging the minified JavaScript. |
| npm run icon-font | This command executes a script that creates the finder-icons.woff2 font file and generates the corresponding finder-icons.min.css file from a collection of .svg icons located in the src/icons directory. |
| npm run vendor | This command copies vendor files listed under the dependencies object in the package.json file from the node_modules directory to the assets/vendor folder. |
| npm run validate | This command executes validation checks on all .html files, ensuring compliance with W3C markup validity rules. |
| npm run watch | This command initiates a watch process to monitor changes in .css, .js, and .html files, simultaneously launching a local development server equipped with hot reloading. |
| npm run dist | The command creates a distribution folder (dist) and proceeds to copy all essential assets into this folder, including HTML files, and updates links to vendor files within the copied HTML files. |