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?
Related
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 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'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video
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.
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.