npm && not working to run two tasks - npm

I'm trying to use straight up npm as my build tool.
{
"name": "ang-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jshintConfig": {
"predef": ["angular"]
},
"scripts": {
"autoprefixer": "postcss -u autoprefixer -r src/assets/css/*",
"scss": "node-sass --output-style compressed -o src/assets/css src/assets/sass/main.scss",
"jshint": "jshint src/app/*.js",
"uglify": "uglifyjs src/app/*.js -o src/assets/js/app.min.js",
"serve": "browser-sync start --server --files 'src/assets/css/, src/assets/js/*.js, **/*.html, !node_modules/**/*.html'",
"watch:css": "onchange 'src/assets/sass/*.scss' -- npm run scss",
"watch:js": "onchange 'src/app/**/*.js' -- npm run jshint && npm run uglify",
"watch:all": "npm-run-all -p serve watch:css watch:js watch:images",
"postinstall": "npm run build:all && npm run watch:all"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.7",
"browser-sync": "^2.13.0",
"jshint": "^2.9.2",
"node-sass": "^3.8.0",
"npm-run-all": "^2.3.0",
"onchange": "^2.5.0",
"postcss-cli": "^2.5.2",
"uglify-js": "^2.6.4"
}
}
My folder set up is like.
src
app
controllers
directives
filters
services
assets
css
images
js
sass
templates
index.html
package.json
My problem is with watch:js, I can run jshint and uglify separately and they work but if I run watch:js which uses && to run jshint and then uglify then the uglify doesn't work and it stops at jshint.

Try npm run watch:js instead of npm watch:js.
I had the same issue with npm in angular2. The build-script:
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
wouldn't work - but both commands were running standalone. The run solved it for me.

Related

npm run start does not compile sass or run live-server. Going on an infinite loop with weird message

I've been trying to run a sass project with the following devDependencies and Scripts. When i try to run npm run start, it fails with an error as shown in the screenshot.
package.json file :
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"author": "name",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"live-server": "^1.2.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
And I get the below response when tried to run npm run start
Output Image
I use node v14.17.3, and npm 8.3.0.
Intentional bug from the developer of color.js https://github.com/Marak/colors.js/issues/285 that is being worked on. Pin to 1.4.0 or set a resolution as described in https://github.com/Marak/colors.js/issues/285#issuecomment-1008168237

Why cypress module is not detecting while running sorry-cypress run command?

When I try to run sorry-cypress command which is for running test cases parallel
CYPRESS_API_URL="http://localhost:1234/" cy2 run --parallel --record --key somekey --ci-build-id hello-cypress
It throws error even though cypress is installed.
Here is the sorry-cypress setup link
sorry-cypress npm module basic link :
https://docs.sorry-cypress.dev/guide/get-started
Error: Cannot detect cypress. Is cypress installed?
at getStateModulePath (/home/ashish/.nvm/versions/node/v14.17.5/lib/node_modules/cy2/lib/patch.js:90:11)
Here is my package.json file
{
"name": "test-automation",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"cucumber-html-reporter": "5.5.0",
"cypress": "^8.4.1",
"cypress-cucumber-preprocessor": "4.1.4",
"cypress-plugin-tab": "1.0.5",
"cypress-wait-until": "1.7.1",
"eslint": "7.30.0",
"eslint-plugin-cypress": "2.11.3",
"junit-report-merger": "2.2.3"
},
"engines": {
"node": "14"
},
"scripts": {
"open": "cypress open",
"api": "cypress run --headless --browser chrome --spec \"cypress/integration/API/**/*\"",
"ui": "cypress run --browser chrome --spec \"cypress/integration/UI/**/*\"",
"delete:reports": "rm cypress/results/* || true",
"combine:reports": "jrm cypress/results/combined-report.xml \"cypress/results/*.xml\"",
"prechrome": "yarn run delete:reports",
"chrome": "cypress run --browser chrome",
"postchrome": "yarn run combine:reports",
"docker:pull": "docker pull cypress/included:7.6.0",
"predocker:e2e": "yarn run delete:reports",
"docker:e2e": "docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:7.6.0 run --headless --browser chrome",
"postdocker:e2e": "yarn run combine:reports",
"generate:report": "node cypress/cucumber-html-reporter.js"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"cucumberJson": {
"generate": true,
"outputFolder": "cypress/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
},
"dependencies": {
"cy2": "^1.3.0"
}
}
Here issue was the location of cy2 module.
Running this command will help to solve this issue.
CYPRESS_API_URL="http://localhost:1234/" ./node_modules/cy2/bin/cy2 run --parallel --record --key somekey --ci-build-id hello-cypress
What I changed here is cy2 with ./node_modules/cy2/bin/cy2
Because cy2 directly not accessible.
Installing cy2 module through npm will install cy2 in node_module.
Yarn add will work for directly accessing cy2 module.

npm run scripts runs infinite amounts of time

I have scss files which I want to convert to css then run autoprefixer, then minify the whole thing.
I came to this code:
"devDependencies": {
"autoprefixer": "^9.7.2",
"cssnano": "^4.1.10",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.23",
"postcss-cli": "^6.1.3",
"watch": "^1.0.2"
},
"scripts": {
"scss": "node-sass -o www/css src/scss",
"prefix": "postcss --use autoprefixer -b 'last 2 versions' < www/css/websiteStyles.css | postcss --use cssnano > www/css/websiteStyles.min.css",
"dev": "npm-run-all scss prefix",
"watch" : "watch 'npm run dev'"
},
When I run npm run watch the script runs infinitely. I don't change anything but the script runs and runs and then runs ageain. What did I do wrong?

How to modify scripts section to exclude/skip scenarion with tag #ignore in package.json

I need to run cucumber tests using puppeteer and chai but exclude that scenario that has tag #ignore.
This should be probably set up in package.json under scripts and "test" line. But I donĀ“t know how...
Here is code
{
"name": "cucumber-puppeteer-example",
"description": "Example project on how to use cucumber with puppeteer",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "rimraf build out && tsc",
"build:watch": "rimraf build && tsc -w",
"test": "cucumber-js --require \"build/**/*.js\"",
"test:headless": "cross-env CLS_TEST_HEADLESS=false cucumber-js --require \"build/**/*.js\"",
"test:local": "rimraf out && cross-env CLS_TEST_HEADLESS=false CLS_TEST_URL=http://localhost:4200 cucumber-js --require \"build/**/*.js\"",
"e2e": "ts-node",
"chromium": "ts-node ci-chromium-install.ts linux 641577",
"lint": "tslint --project tsconfig.json -c tslint.json"
},
"devDependencies": {
"#types/chai": "4.1.7",
"#types/cucumber": "4.0.5",
"#types/puppeteer": "1.12.3",
"chai": "4.2.0",
"chromium": "^2.1.0",
"cross-env": "5.2.0",
"cucumber": "5.1.0",
"puppeteer": "1.14.0",
"ts-node": "8.0.3",
"tslint": "^5.16.0",
"tslint-no-unused-expression-chai": "^0.1.4",
"typescript": "3.3.4000",
"unzip": "0.1.11"
}
}
Anyone know how to put somthing like this ~#ingore to ignore all tagged scenarios here to package.json?
Create a separate class with the name cucumberOpts.ts/ js like below:
{
"compiler": "ts:ts-node/register",
"projectName": {
"tags": {
"ui": ["#Ui", "~#Ignore"],
"api": ["#Api", "~#Ignore"]
}
}
}
and use this class in your package.json file like as below:
"scripts": {
"e2e": "cucumber-js ./src/test/features --cucumberOpts.compiler -f node_modules/cucumber-pretty --format json:cucumber-json-report.json --cucumberOpts.projectName.tags.ui"
}
Use #Ignore tag before your scenario which you need to skip and run 'npm run e2e' command from your terminal. This will consider all scenario's which are tagged wit #Ui and will skip all the features which are tagged with #Ignore. If you include both the tags for same scenario, that scenario will be skipped
Add a before step to your hook and return 'pending'

SCSS npm is not compiling CSS when I use -w "watch:sass"

SCSS npm is not compiling CSS when I use -w "watch:sass"
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
it froze on the terminal and the update did not work. if I remove the -w than it works perfectly.
{
"name": "nikesh",
"version": "1.0.0",
"description": "Landing page for natours",
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"author": "tandel",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}
Instead of writing
"watch:sass": "node-sass sass/main.scss css/style.css -w",
try this one
"sass": "node-sass -w sass/main.scss -o css/style.css --recursive",
here,
-w : means we have to watch the sass/main.scss file
-o : means to need to save the output in the css/style.css file
What fixed my issue is that I finally noticed it was compiling everything into the wrong file when I compiled sass in my terminal. I tweaked my package.json and all the changes I made in my files finally compiled correctly and I was able to see the live-changes.