| #!/bin/bash | |
| VERSION=0.2 | |
| NAME=$1 | |
| JQ=$(which jq) | |
| WGET=$(which wget) | |
| NPM=$(npm --version) | |
| NPM=${NPM::1} | |
| if [ -z "$JQ" ]; then | |
| echo "jq not detected. Install with sudo apt-get install jq" | |
| exit | |
| fi | |
| if [ -z "$WGET" ]; then | |
| echo "wget not detected. Install with sudo apt-get install wget" | |
| exit | |
| fi | |
| if [[ "$NPM" == "6" ]]; then | |
| echo "npm7 is required. Install with npm install -g npm" | |
| exit | |
| fi | |
| if [ $# -eq 0 ]; then | |
| echo "Sintaxis:" | |
| echo -e " $(basename $0) <nombre-carpeta>\n" | |
| echo "Recuerda que necesitas tener instalado jq, wget y npm7+." | |
| exit | |
| fi | |
| npm init vite@latest $NAME -y -- --template vanilla >/dev/null | |
| cd "$NAME" | |
| # Inicializamos git | |
| git init | |
| cat >apackage.json << EOF | |
| { | |
| "scripts": { | |
| "build": "rm -rf dist && vite build", | |
| "deploy": "gh-pages -d dist" | |
| }, | |
| "keywords": [], | |
| "license": "ISC" | |
| } | |
| EOF | |
| jq -s '.[0] * .[1]' package.json apackage.json >package2.json | |
| rm apackage.json package.json index.html | |
| mv package2.json package.json | |
| rm main.js style.css favicon.svg | |
| mkdir public | |
| mkdir -p src/{components,assets} | |
| touch src/index.{css,js} | |
| cat >.gitignore << EOF | |
| node_modules/ | |
| dist/ | |
| EOF | |
| cat >postcss.config.js << EOF | |
| module.exports = { | |
| plugins: { | |
| "postcss-nesting": true | |
| } | |
| }; | |
| EOF | |
| cat >src/index.html << EOF | |
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="./index.css"> | |
| <script type="module" src="./index.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> | |
| EOF | |
| cat >vite.config.js << EOF | |
| const path = require("path"); | |
| const mode = process.env.NODE_ENV === "production" ? "production" : "development"; | |
| const base = mode === "production" ? "/" + path.basename(process.cwd()) + "/" : "/"; | |
| module.exports = { | |
| root: "src", | |
| base, | |
| mode, | |
| publicDir: "../public", | |
| build: { | |
| outDir: "../dist", | |
| assetsDir: "./" | |
| } | |
| }; | |
| EOF | |
| cat >.eslintrc.js << EOF | |
| module.exports = { | |
| "env": { | |
| "browser": true, | |
| "es2021": true | |
| }, | |
| "extends": [ | |
| "standard" | |
| ], | |
| "parserOptions": { | |
| "ecmaVersion": 12, | |
| "sourceType": "module" | |
| }, | |
| "rules": { | |
| "quotes": ["error", "double"], | |
| "semi": ["error", "always"], | |
| "comma-dangle": ["error", "only-multiline"], | |
| "space-before-function-paren": ["error", "never"] | |
| } | |
| }; | |
| EOF | |
| cat >.stylelintrc << EOF | |
| { | |
| "extends": "stylelint-config-standard", | |
| "rules": { | |
| "declaration-colon-newline-after": "always-multi-line", | |
| "selector-type-no-unknown": null, | |
| "property-no-unknown": [true, { | |
| "ignoreProperties": ["content-visibility"] | |
| }] | |
| } | |
| } | |
| EOF | |
| npm install --save --package-lock-only --no-package-lock -D \ | |
| stylelint stylelint-config-standard \ | |
| eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise \ | |
| postcss-nesting \ | |
| gh-pages | |
| cat << EOF | |
| ¡Listo! Para empezar, escribe: | |
| cd $NAME | |
| git remote add origin <repo> | |
| npm install | |
| npm run dev | |
| EOF |