How can I use 'watch' in my npm scripts? - javascript

I have the following directory structure:
And my package.json looks like this:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
So firstly, I have to run each of these scripts individually e.g. npm run node-sass or npm run html-minifier etc. What I'd ideally want is to run npm serve which will do the following:
run html-minifier
run node-sass
run run image-min
run http-server
Lastly, watch everything in my src folder and run
the respective scripts as files change e.g. node-sass etc..
How can I best tackle this problem?

You can watch your directories using nodemon.
One solution for you is to create three watch scripts, one for each task:
watch:node-sass,
watch:html-minifier, and
watch:imagemin.
Then have a central script watch starting the three:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist",
"watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
"watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
"watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
"watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
Read also: How to Use npm as a Build Tool.

I advise onchange, see this boilerplate.
For example,
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
or
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
No Grunt or Gulp needed!

The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well

Related

Local npm install from file path not working

I followed Link to install the npm package from the file path
However, when I try to use it I am getting the following error.
Cannot file moduele '<module_name>' or its corresponding type declaration
Is there any tutorial to follow in order to install typescript-based npm package locally?
Here my package.json of the package i want to install
{
"name": "sqs",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"types": "dist/index.d.ts",
"scripts": {
"build": "rm -rf build && prettier --write src/ && tsc",
"start": "ts-node ./src/index.ts",
"start:prod": "npm run build && node ./dist/src/index.js",
"start:dev": "./node_modules/nodemon/bin/nodemon.js",
"lint": "eslint '*/**/*.{js,ts,tsx}'",
"lint:fix": "eslint --fix '*/**/*.{js,ts,tsx}'",
"prettier": "prettier -c ./src/**/*.{js,ts,tsx,scss,css,md}",
"prettier:fix": "prettier -c ./src/**/*.{js,ts,tsx,scss,css,md} --write"
},
"author": "Rohit Sthapit",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.820.0",
"nodemon": "^2.0.20",
"readline-sync": "^1.4.10",
"ts-node": "^10.9.1"
},
"devDependencies": {
"#types/dotenv": "^8.2.0",
"#typescript-eslint/eslint-plugin": "^5.36.2",
"#typescript-eslint/parser": "^5.36.2",
"dotenv": "^8.2.0",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.7.1"
}
}
Usually for packages that support typescript, you would find a DT symbol when you open the package page in npm.
For installing the typescript package, you use npm i #types/{package_name}. For eg, in lodash's case you could do:
npm i #types/lodash
Hope it helps!!
use this,
npm install --save-dev #types/package-name

Deploy to Vercel error (Error: Command "npm run build" exited with 127)

I'm using parcel-bundler for sass on my projects, I've always used npm start instead of npm run build and it has always worked for me. But this time, when I try to deploy my project on vercel, it failed and it says "Error: Command "npm run build" exited with 127"?
[19:25:23.101] Cloning github.com/sn-tin/odin-etch-a-sketch (Branch: main, Commit: e5ff000)
[19:25:23.584] Cloning completed: 482.734ms
[19:25:23.676] Installing build runtime...
[19:25:25.452] Build runtime installed: 1.775s
[19:25:26.373] No Build Cache available
[19:25:26.541] Installing dependencies...
[19:25:27.829]
[19:25:27.830] added 17 packages in 1s
[19:25:27.830]
[19:25:27.830] 2 packages are looking for funding
[19:25:27.830] run `npm fund` for details
[19:25:28.030] Detected `package-lock.json` generated by npm 7...
[19:25:28.031] Running "npm run build"
[19:25:28.305]
[19:25:28.306] > odin-eas#1.0.0 build
[19:25:28.306] > parcel build src/index.html
[19:25:28.306]
[19:25:28.322] Error: Command "npm run build" exited with 127
My package.json
{
"name": "odin-eas",
"version": "1.0.0",
"description": "",
"main": "index.js",
"target": {
"main": false
},
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.5.0",
"bundler": "^0.8.0",
"parcel": "^2.5.0",
"sass": "^1.51.0"
}
}

TypeORM error when trying to create migration in CLI

I'm trying to use the TypeORM CLI to create a migration. I followed their guide but when I run yarn run typeorm migration:generate I get the error:
$ typeorm-ts-node-commonjs migration:generate
/usr/bin/env: ‘node --require ts-node/register’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
error Command failed with exit code 127.
My package.json looks like this:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js",
"start2": "ts-node src/index.ts",
"dev2": "nodemon --exec ts-node src/index.ts",
"typeorm": "typeorm-ts-node-commonjs"
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.6.7",
"class-validator": "^0.13.2",
"cors": "^2.8.5",
"express": "^4.17.3",
"express-graphql": "^0.12.0",
"graphql": "^15.3.0",
"pg": "^8.7.3",
"reflect-metadata": "^0.1.13",
"ts-node": "^10.7.0",
"type-graphql": "^1.1.1",
"typeorm": "^0.3.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^17.0.23",
"nodemon": "^2.0.15",
"typescript": "^4.6.3"
}
}
I managed to solve this by installing the cli as described here https://orkhan.gitbook.io/typeorm/docs/using-cli#installing-cli
Install ts-node globally npm install -g ts-node
add the following script to package.json: "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js" instead of "typeorm": "typeorm-ts-node-commonjs"
then create a migration with:
yarn run typeorm migration:generate -p -d src/data-source.ts src/migrations/<filename without ending>
FYI For anyone facing similar issues: It took me a while to figure out that the various documentations on typeorm are confusing and conflicting at the moment because they just moved to v0.3.0 and not everything has been updated.

Webpack doesn't pick up the latest changes in my JS files

I just started learning React and was asked to start using webpack as a JS bundler. Every time I change a JS file and save the changes, a new compilation is triggered in "npm run watch" window. But, my webpack compilation doesn't pick up the changes in my JS code. Here is my package.json file
{
"name": "tryReact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --entry ./src/index.js --output-path ./webpack",
"build": "webpack --mode production --entry ./src/index.js --output-path ./webpack",
"watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.17",
"#babel/preset-env": "^7.12.17",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.24.0",
"webpack-cli": "^4.5.0"
}
}
here is webpack.config.js file
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
I have to delete the main.js in the --output-path directory and then recompile it for the changes to take effect. If it matters, I use Atom as and editor and these JS files are constantly open in my editor. I tried switching back to Vim. But no use. I also tried "npm run dev" without any success. What am I missing?

NPM is not recognized as an internal/external command

My package.json file for the server folder I'm trying to start:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon src/app.js --exec 'npm run lint && node'",
"lint": "./node_modules/.bin/eslint **/*.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"eslint": "^4.12.0",
"nodemon": "^1.12.1"
}
}
I do not know why it doesn't notice npm from the package.json start script when npm runs perfectly when it's not being executed through package.json.
Anyone know why? I'm trying to learn Full Stack development and I am confused on this error.
Edit: I'm running Windows 10.
Use double quotes in your script as single quotes won't recognize in Windows command line.
Change your start to:
"start": "nodemon src/app.js --exec \"npm run lint && node\"",

Categories

Resources