I am following this tutorial:
https://css-tricks.com/why-npm-scripts/
Really found it useful. But I added in the script for browser-sync and it never calls to my index.html file that is inside src and dist folders. From my root I have the following package.json script portion:
"scripts": {
"scss": "node-sass --output-style compressed -o dist/css src",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"lint": "eslint src/js",
"uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js",
"imagemin": "imagemin src/images dist/images -p",
"serve": "browser-sync start --files 'dist/styles/*.css, dist/js/*.js'",
"build:css": "npm run scss && npm run autoprefixer",
"build:js": "npm run lint && npm run uglify",
"build:all": "npm run build:css && npm run build:js && npm run build:imagemin",
"watch:css": "onchange 'src/*.scss' -- npm run build:css",
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
"watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
},
Can someone explain to me how it knows to run the index file? I know it builds a server out of the root folder, but my package.json is not inside the dist folder?
I found it in the documentation.
"serve": "browser-sync start --server --files 'dist/*' --startPath 'dist'"
startPath allowed me to tell it what folder to use as the root.
Related
I would like to conditionally run a script based on if a flag is passed to the script yes or no. Consider the following:
"scripts": {
"clean": "rm -rf ./dist",
"build": "npm run clean && npm run build:esm && npm run build:cjs && if(--css) npm run build:css",
"build:css": "sass $INIT_CWD/src/scss/:dist/css && postcss dist/css/*.css --use autoprefixer -d dist/css",
"build:esm": "tsc -p ./config/tsconfig.esm.json && mv dist/js/esm/index.js dist/js/esm/index.mjs",
"build:cjs": "tsc -p ./config/tsconfig.cjs.json",
"prepack": "npm run build"
},
After the build command, at the very end, if the flag --css was given I want to run build:css as well. Currently, I've put an example placeholder that obviously does not work. But how would I achieve this? Is it even possible?
I am trying to change the {variable} part in my custom-defined npm run deploy script
"scripts":{
"deploy": "npm run build && scp -r ./public example#192.200.0.11:/home/{DIRECTORY}/index.js",
}
I want to run it like npm run deploy --DIRECTORY:project99
You can pass arguments to npm run as Environment variable. See Npm Docs
"scripts": {
"deploy": "npm run build && scp -r ./public example#192.200.0.11:/home/${NPM_CONFIG_DIRECTORY}/index.js"
},
This should work
npm run deploy --DIRECTORY=project99
I have made an npm package called awesome-react-gamepads and updated the version several times (currently 0.1.2). This is fine and if you use npm you get the latest version however cdn's like jsdelvr do not have even close to the latest version as seen here https://www.jsdelivr.com/package/npm/awesome-react-gamepads. Is there something I have to specify in my config to force this? I can provide more code upon request I just don't know where the issue is. In my package.json I have the following scripts:
"scripts": {
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
"lint": "tslint -p tsconfig.json",
"test": "jest --config jestconfig.json",
"compile": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-umd.json",
"prepublish": "npm run compile"
},
I am trying to reuse husky for other projects (not just config file), building a lib of sorts that will be used by all other projects.
I cannot understand how and when devinstall and devuninstall scripts are executed. Cannot find any documentation either on npmjs.com.
Can someone help understand when this are getting executed please?
I've been trying to understand that too.
Turns out they do something at publication time that renames the _install script into install.
Here's the script field of the package.json found in the husky folder when installed through npm.
"scripts": {
"build": "del-cli lib && tsc",
"devinstall": "npm run build && npm run _install -- node_modules/husky && node scripts/dev-fix-path",
"devuninstall": "npm run build && npm run preuninstall -- node_modules/husky",
"fix": "npm run lint -- --fix",
"install": "node husky install",
"lint": "tslint 'src/**/*.ts'",
"postpublish": "pinst --disable",
"postversion": "git push && git push --tags",
"prepublishOnly": "npm run test && npm run build && pinst --enable && pkg-ok",
"preuninstall": "node husky uninstall",
"test": "npm run lint && jest",
"version": "jest -u && git add -A src/installer/__tests__/__snapshots__"
}
Although I can't figure where that is done
I am new to npm build tools. I want to bundle the compiled typescript files as soon as there is a change in typescript files and run lite-server concurrently. To achieve that I have written following npm build script -
"build": "tsc",
"bundle": "browserify -s main app/goc-common/common.module.js > dist/bundle.js",
"build_dev": "npm run build && npm run bundle && concurrently \"tsc -w && npm run bundle\" \"lite-server\"",
However this doesn't seems to work, it just compiles the files and refresh the browser, donot bundle the files again.
You should use watchify to continue watching tsc's output files for changes:
"build": "tsc",
"bundle": "watchify -s main app/goc-common/common.module.js -o dist/bundle.js",
"build_dev": "npm run build && npm run bundle && concurrently \"tsc -w && npm run bundle\" \"lite-server\""
As you've noticed, browserify doesn't watch; it just runs once and then it's done. watchify's usage is identical to browserify's, except that the -o option is mandatory.