Here are my package.json scripts...
"scripts": {
"build:sass": "sass --no-source-map src/assets/scss:dist/assets/css",
"build:js": "uglifyjs-folder ./src/assets/js -o ./dist/assets/js/main.js",
"copy:assets": "copyfiles -e .src/assets/scss/**/* -e .src/assets/js/**/* -u 1 ./src/assets/**/* dist",
"copy:html": "copyfiles -u 1 ./src/*.html dist",
"copy": "npm-run-all --parallel copy:*",
"watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:assets",
"watch:html": "onchange \"src/*.html\" -- npm run copy:html",
"watch:sass": "sass --no-source-map --watch src/assets/scss:dist/assets/css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server dist --files dist",
"start": "npm-run-all copy --parallel watch serve",
"build": "npm-run-all copy:html build:*",
"postbuild": "postcss dist/assets/css/*.css -u autoprefixer cssnano -r --no-map"
}
For this line, I want to exclude the sass and js directories since they are handled by other scripts, but the exclusion isn't working, its still copying all the files in those directories.
"copy:assets": "copyfiles -e .src/assets/scss/**/* -e .src/assets/js/**/* -u 1 ./src/assets/**/* dist",
And for this line, the css file is updated but it is not minified
"watch:sass": "sass --no-source-map --watch src/assets/scss:dist/assets/css",
The build script works. The issues above happen with the start script.
Any help would be greatly appreciated.
Well I was able to find a work around, sort of. Here is what I did.
I installed the recursive-copy npm package.
npm i recursive-copy --save-dev
I created a copyfolder.js file in my utils folder with the following contents.
import copy from 'recursive-copy';
import { argv } from 'node:process';
const args = process.argv;
const src = args[2];
const dest = args[3];
var options = {overwrite: true,};
try {
const results = await copy(src, dest, options);
console.info('Copied ' + results.length + ' files');
} catch (error) {
console.error('Copy failed: ' + error);
}
then i put the following script in my package.json file. Notice it has the arguments that are passed to the copyfolder.js script which are the source and destination directories. Instead of trying to copy all folders with exclusions as I stated in the op, I created a script for each folder I wanted copied. For example I would use it for a Vendors or local bootstrap folder perhaps. My scss/css, images, and js folders are handled by the minifyers/compilers. The copyfolder is used for any other content I want to put in my dist or public builds.
"copyfolder:utils": "node utils/copyfolder.js ./src/assets/test ./dist/assets/test"
I also put a script in the package.json file that uses the npm onchange package to run the above copyfolder:utils script when anything in the source folder changes.
"watch:utils": "onchange \"src/assets/test/**/*\" -- npm run copyfolder:utils"
Related
When I run yarn start or any other following scripts:
"scripts": {
"start": "webpack-dev-server --config scripts/webpack.dev.js",
"clean": "rimraf build",
"build": "yarn run clean && yarn run compile",
"compile": "webpack --config scripts/webpack.prod.js",
"compile-for-test": "webpack --config scripts/webpack.test.prod.js",
"build-for-test": "yarn run clean && yarn run compile-for-test",
"test": "jest -c scripts/jest.config.js --testPathIgnorePatterns=\"services/contract-tests\"",
"test-ci": "node scripts/test-shell-commands.js unitTestCI",
"test-contract": "node scripts/test-shell-commands.js testLocal",
"test-contract-ci": "node scripts/test-shell-commands.js testCI",
"coverage": "node scripts/test-shell-commands.js unitTestCoverage",
"lint": "./node_modules/.bin/eslint --max-warnings=0 \"src/**\"",
"start-backend": "bash -l ./scripts/start-backend-container.sh",
"stop-backend": "bash -l ./scripts/stop-backend-container.sh",
"start-stub": "bash -l ./scripts/start-backend-stub-container.sh",
"stop-stub": "bash -l ./scripts/stop-backend-stub-container.sh",
"prettier": "prettier --write **/*{ts,tsx}"
},
I get the following error:
# yarn start
$ webpack-dev-server --config scripts/webpack.dev.js
error Couldn't find the binary webpack-dev-server --config scripts/webpack.dev.js
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
# yarn test
$ jest -c scripts/jest.config.js --testPathIgnorePatterns="services/contract-tests"
error Couldn't find the binary jest -c scripts/jest.config.js --testPathIgnorePatterns="services/contract-tests"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This applies to all scripts (its not spesific to webpack etc). However, when I use it npm run start, it works. yarn add or yarn commands alone also work. Just I can't run any script with yarn.
Does anyone encountered this before?
My yarn version is: 1.22.10
I have uninstalled and installed a few times but the problem continues. OS: Windows
This might be an issue with node trying to spawn a command on windows when specifying bash as the shell since Yarn uses node's child_process.spawn.
The shell-script specified in .yarnrc, passes that shell as the shell option to spawn, and when a shell is specified and process.platform evaluates to win32, ['/d', '/s', '/c' will be tacked in the arguments (see below source of spawn()).
if (options.shell) {
const command = [file].concat(args).join(' ');
if (process.platform === 'win32') {
if (typeof options.shell === 'string')
file = options.shell;
else
file = process.env.comspec || 'cmd.exe';
args = ['/d', '/s', '/c', `"${command}"`];
options.windowsVerbatimArguments = true;
Please check your yarn configuration via yarn config get script-shell in order to verify the settings of the bash-path.
See child_process.spawn for more info..
"scripts": {
...
...
"puppeteer": "cd test/UI-tests/src && set BROWSER=chrome && mocha test.js"
}
I want to wrap all the commands in "puppeteer", so once I type npm run puppeteer, it can set the browser and run the test.js file.
The way I write it does not work.
I have 6 projects in an Angular workspace and I have to build each. Instead of write six lines in my package.json for each projet, for example :
"build_a":" npm run build a"
"buiild_b": "npm run build b"
I would like to create only one line like this :
"build_app": "npm run build name="aaa""
How I can do it ?
you could rely on environment variables in order to discover such names.
however it depends on which operating system you're using on how to define env variables.
"scripts":{
"build:a":"cross-env NAME=a npm run build",
"build:b":"cross-env NAME=b npm run build",
"build:c":"cross-env NAME=c npm run build",
"build":"browserify src/main.js -o build.js"
}
You would end up with a script section more or less like this.
Finally I found the solution using a node.js script: build-subproject.js.
const { exec } = require('child_process');
const args = process.argv.slice(2).join(' ');
console.log(`RUNNING build with args: ${args}`);
exec(
`ng build ${args} && cd dist/${args} && npm pack `,
(error, stdout) => {
if (error) {
console.error(`exec error: ${error}`);
return;
}
console.info(`stdout: ${stdout}`);
}
);
In package.json,
"build-subproject": "node ./build-subproject.js",
Then run , npm run build-subproject my-project-name
It took me a while to get the debugger to work within Visual Studio Code. Now the program breaks on set breakpoints inside of .vue files/components. But none of the watches seem to work. They are either undefined or unavailable, even when the variables have been created.
The settings I use in launch.json :
{
"name": "chrome debug",
"type": "chrome",
"request": "launch",
"port": 3000,
"url": "http://localhost:3000/admin",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
I build my app through npm run build or npm run devbuild which, by my knowlegde, 'compiles' the .vue components into Javascript files. And then start the app with either npm start or nodemon index.js.
Package.json
"scripts": {
<...>
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"devbuild": "cross-env NODE_ENV=development webpack --progress --hide-modules",
<...>
},
Have you ever tried add a new script with nodemon? Something like this:
"newScript": "nodemon -L -e ts,json --watch . --exec \"npm run build
|| npm run devbuild\""
-L = Though this should be a last resort as it will poll every file it can find.
-e = By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: nodemon -e js,jade
--watch . = To watch all the changes on the path, in this case all the code on the current path.
(I got all of this information from the documentation.
then, run the command:
npm run newScript
I'm using npm run to build a javascript file through browserify. Before building, I would like it to create a directory in my build folder, named after the version listed in the package.json. Here is a trimmed example of my package.json:
{
"name": "My App",
"version": "0.0.0-pre-alpha",
"description": "App desc",
"main": "index.js",
"dependencies": {
"browserify" : "*",
}
"scripts": {
"prebuild": "mkdir -p build/$npm_package_version",
"browserify" : "browserify ./src/index.js ./build/$npm_package_version/js/myapp-$npm_package_version.js",
"build" : "npm run prebuild && npm run browserify"
}
}
The code executed in prebuild is:
mkdir -p build/$npm_package_version
But I want it to execute
mkdir -p build/0.0.0-pre-alpha
What am I doing wrong?
Update:
Turns out you can't use arguments with mkdir in a script. So i ended up using the mkdirp npm module.
Old post:
For others looking for an answer: Turns out when you are working in windows the correct way to use the variables is
%npm_package_version%
So the final code should look like:
"prebuild": "mkdir -p build/%npm_package_version%"