I am using webpack to combine all of my .css, .js and .html into one .html file which gets placed in a SVN directory. It then gets copied to a local server via a copy command. I have my webpack set to --watch so I don't have to consistently re-run the command to get my changes. I am using VS Code.
"wpbuild": "npx webpack --watch & npm run copyFile",
"copyFile": "copy C:\\fromLocation\\file.html C:\\toLocation /y",
Since my --watch doesn't end, the copyFile script never runs. This works if I take out the --watch but that would defeat the purpose of what I am trying to do.
Question: How can I get the file to be copied, after every time that it gets re-created? I want to do this with just one command please.
You could give the package concurrently a shot.
Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.
Concurrently would let you do something like this:
"wpbuild": "concurrently \"npx webpack --watch\" \"npm run copyFile\"",
"copyFile": "copy C:\\fromLocation\\file.html C:\\toLocation /y",
If npm run copyFile is able to watch for files, it should be able to create a file whenever one is created, however if it cannot watch for files, it may run before one is created.
Related
I am using the test-library for React , and everytime I edit my test file and save it, it will automatically running coverage on other untested files and gave me a report. there are hundreds of files in my project,and it could really waste time. I don't want this, I just want it run test on my current selected file.
the command I have used is
npm run test /myprojrct/myFile.test.js
is there a way to resolve it ?
Adding the --watch flag to your test script should make jest run tests only on changed files after each save.
More details and other available options can be found here: https://jestjs.io/docs/en/cli#--watch
You should add --coverage=false flag to prevent collecting coverage.
npm run test --coverage=false
Other useful flags:
npm run test --watch // watcher will re-run only the tests that depend on the changed files
npm run test --watchAll // watcher will re-run *ALL* tests when a file has changed
npm run test -t="rendering Button" // will run only tests with a name that matches the regex
npm run test fileName.js // this argument will be treated as a regular expression to match against files in your project
Please help with my below questions:
"npm" is the one which comes when we install Node.js. Am I correct?
"create-react-app" package installs/loads the Babel & Webpack which are required for our React project. Am I correct?
When will the React code gets compiled & Translated? Does the below points are correct?
a. After creating React project and developing some code, we are loading our application in browser by running the "npm start" command. So while running this command, will the Babel is going to compile the React code and convert it to JavaScript code which has ES5 standards? Does this conversion to ES5 happens when we run the "npm start" command?
b. Also I learned that Webpack is going to merge all various files within the React project to a single .js file. So does this merging of all the different files by Webpack will be performed when we run "npm start" command?
So if my above understanding is correct, the React code will be Compiled, Translated & Merged into a single file when we run "npm start" command. Correct?
npm start is really just a command that exists in the package.json which can be configured to do whatever you please. It is typically use to kick off all things needed to "start" the app. In the context of a react app created using create-react-app the start command will call react-scripts start and that points to a file called react-scripts which sits in your node_modules/.bin. If you want to see everything that happens you can read through that file.
In short tho, you are correct that it will use babel to transpile the code to something the browser understands, it will use webpoack to create one bundle file (or multiple if you are using code splitting). It will also start a webpack dev server which will usually listen on port 3000 and it will open your default browser to your app. These default settings can be overwritten in the package.json.
Hope this gives you some clarity.
Right now I have a package.json scripts section that looks like this:
"scripts": {
"views": "cp -r ./src/views/ ./dist/views/",
"dev": "tsc-watch --onSuccess \"./run.sh\"",
"prod": "./run.sh",
"test": "jest --coverage --verbose"
}
Inside run.sh I have:
npm run views && node ./dist/server.js
When I run npm run dev I expect it to compile .ts files within ./src/ to .js files within ./dist/ then copy everything (.html) within ./src/views/ to ./dist/views/ then wait for any changes to .ts files, once a .ts file change occurs tsc-watch would rerun the process.
However, tsc-watch somehow detects changes when cp -r ./src/views/ ./dist/views/ is run, despite it not changing any .ts files. This results in an infinite loop when running npm run dev where it compiles the .ts to .js then copies views, detects changes, and loops forever.
It appears a request for exactly what I'm trying to do was requested but shot down for some reason here.
So, with or without tsc-watch, how do I...
Watch for changes to any and all files.
When a change occurs, copy all files from src to dist, compiling any .ts to .js.
Do so with as little overhead as possible and without any infinite loops.
This is the first time I have used a frontend Build Tool. In the past I have never used any type of a framework that was more complicated to install than just adding a <script> tag to the top of my html page. Now you know my level of knowledge.
I have a vue.js/vuetify application with directory structure like this:
I think it started with the vuetify/webpack advanced template.
And I am trying to export the project into something that I can put online. I have in my head that somehow I can run some type of a command that will generate all my code into .html, .css, and .js files that I could then hook up to any sort of backend that I wanted.
If my assumption is correct, and that's how things are done, then how is routing handled? Is the entire site just in one html file?
I think webpack is supposed to do this maybe? However when I try to run webpack from the command line, I get command not found.
If my assumption is wrong, then how do I get this online?
Use the npm run build command. You can see what the command does inside the package.json file, scripts object.
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
Your entire site will be compiled into the index.html file and the build.js file located in the /dist folder. Both the /dist folder and the build.js are generated when you run the npm run build command. Make sure the script src inside of index.html is pointing to your build.js file.
Is there a way to watch my .sss files and re-run this if they change?
"css": "postcss -u autoprefixer -u postcss-easy-import -p sugarss src/index.sss -o src/index.css"
I can't find a way, I've looked on the net all over. I don't see any kind of watch available from postcss. There's a -w or --watch with the postcss-cli but I tried adding that to the end of the script above. Unless I'm just doing it wrong, my css script does not re-run itself if my .sss files change.
maybe there's some generic node watcher lib I can use?
nodemon is a very powerful tool to re-run your scripts based on any change in your files , default file extension for nodemon to watch is .js and default script to run from your package.json file is start script.
You can overwrite watched extension using -e option , then extensions separated by , for example -e sss in your case.
Also you can overwrite the script you want to run using --exec option and then pass the script you want to run , in your case it will be --exec "npm run css"
And put all together nodemon -e sss --exec "npm run css" , this will watch changes in sss files and run css script