Getting started

# Npm commands (Scripts)

Npm scripts help with performing repetitive tasks such as minification, compilation, unit testing, linting, etc. The Cartzilla 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 `cartzilla-icons.woff2` font file and generates the corresponding `cartzilla-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.

Top