Hi, In this Repo you can use npm package codes

For Suggestions ➡️ jasurhaydarovcode@gmail.com

---

You must have NodeJs installed for these commands to work

Node.js Download

---

PUG

PUG Install NPM

npm i pug

or

npm install -g pug-cli

Watch PUG File, Converts PUG to HTML

pug -w ./ -o ./html -P

This code is hard to remember, so I recommend adding the "pug": "pug -w ./ -o ./html -P" command between the script tag in the package.json file.

Script command to shorten, in such a way

 "scripts": {
    "pug": "pug -w ./ -o ./html -P"
  },

and then

npm run pug

attack ctrl+c

---

SASS

SASS, SCSS Install NPM

npm i sass

Folders Create

mkdir scss
mkdir css

Watch SASS File, Converts SASS to CSS

sass --watch scss:css

This code is hard to remember, so I recommend adding the "sass -w sass/" command between the script tag in the package.json file.

Script command to shorten, in such a way

 "scripts": {
    "sass": "sass --watch scss:css"
  },

and then

npm run sass

attack ctrl+c

---

BOOTSTRAP

Bootstrap Install NPM

If you simply type npm i bootstrap you will download the latest version of bootstrap

npm i bootstrap

If you want to download the version of bootstrap you want, you can see in the example below, here is the code for bootstrap version 5.3.3

npm install bootstrap@5.3.3

Bootstrap Icons via npm

Using bootstrap icons using npm

npm i bootstrap-icons

Binding bootstrap icons to html

<link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.css">

---

PERCEL

Parcel Install NPM

Parcel recall

npm install --save-dev parcel

run

npx parcel ./index.html

Watch

http://localhost:1234/

This code is hard to remember, so I recommend adding the "prc": "npx parcel ./index.html" command between the script tag in the package.json file.

Script command to shorten, in such a way

 "scripts": {
    "prc": "npx parcel ./index.html"
  },

and then

npm run prc

attack ctrl+c

---

MINIFY CSS

MINIFY Install NPM

install

npm install --save-dev parcel

npm install css-minify -g

next watch

Be sure that filename must be ended with ".css"

css-minify -f filename

or

css-minify --file filename

||

css-minify -d sourcedir -o distdir

or

css-minify --dir sourcedir --output distdir

This code is hard to remember, so I recommend adding the "min": "css-minify -f ./css/style.css" command between the script tag in the package.json file.

Script command to shorten, in such a way

 "scripts": {
    "min": "css-minify -f ./css/style.css"
  },

end then

npm run min

---

TAILWIND ~

TAILWIND Install NPM

npm install tailwindcss

init

npx tailwindcss init

|| or

init full config

npx tailwindcss init --full

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS, Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

add this code ./src/input.css👇👇👇

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process

Watch Tailwind, Converts TAILWIND to CSS

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

This code is hard to remember, so I recommend adding the "twind": "npx tailwindcss ... --watch" command between the script tag in the package.json file.

Script command to shorten, in such a way

 "scripts": {
    "twind": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
  },

Start using Tailwind in your HTML

<link href="./src/output.css" rel="stylesheet">

and then

npm run twind

attack ctrl+c

---

GO LIVE

GO LIVE via NPM Install

npm install -g live-server

run

live-server

live-server you can add this code to the command, it is more convenient for you

Script command to shorten, in such a way

 "scripts": {
    "go": "live-server"
  },

and then

npm run live

attack ctrl+c

---

Author of this Repo