I setup a basic web app in VS Code. I want to copy the html file to the out dir whenever it changes. My folder structure looks like this:
src
css
_Index.scss
global.scss
html
index.html
scripts
index.ts
In my package.json I included the following scripts to automatically compile TypeScript and SASS files:
"watch:tsc": "tsc --watch",
"watch:sass": "sass --watch --sourcemap=none src:out",
"watch": "concurrently --kill-others \"npm run watch:sass\" \"npm run watch:tsc\""
A tsconfig.json handles the TypeScript compilation. This is all working fine.
What do I need to setup to also copy the html file to the out dir? Simply including a copy statement feels wrong. Maybe at some point I'd like to include images as well, I wouldn't want to adjust the copy statement for every new file type would I?
I feel like I'm missing some super basic stuff here.
Related
I want to run lint check all the file *.js without node_modules
Here my command: "lint": "eslint **/*.js",, My folder structure look like: app > module_name > module.js but in the app folder still having some files common like helpers.js server.js and I also want to check them.
In .eslint config I added "ignorePatterns": "node_modules" and tried added a file .eslintignore and add node_modules but it's not working.
When I run npm run lint it always throw error:
Oops! Something went wrong! :(
ESLint: 7.32.0
You are linting "node_modules/bignumber.js", but all of the files matching the glob pattern "node_modules/bignumber.js" are ignored.
If you don't want to lint these files, remove the pattern "node_modules/bignumber.js" from the list of arguments passed to ESLint.
If you do want to lint these files, try the following solutions:
* Check your .eslintignore file, or the eslintIgnore property in package.json, to ensure that the files are not configured to be ignored.
* Explicitly list the files from this glob that you'd like to lint on the command-line, rather than providing a glob as an argument.
You could add node_modules/ in your .eslintignore file, and update the package.json file with script: "lint": "eslint --ext .js app/", before running npm run lint.
You could add node_modules/ in your .eslintignore file, and update the package.json file with script:
if u r using ubuntu/linux
"lint": "eslint '**/*.js'"
if project structure like these folder/file.js
if u r using windows
"lint": "eslint **/*.js"
if project structure like these folder/file.js
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.
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.
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.
I've decided to rewrite my generator from ES5 syntax to ES6. But I faced the issue with transpiling generator on pre-publish.
Issue: As we know Yeoman generators have templates folder where different files is located. When Babel is traspiling all the generators sources via babel src --out-dir generators it skips the templates files or breaks the traspiling with error.
My Attepmts: I was trying to make something like babel src --out-dir generators && cp -rn src/ generators/ but I don't like this solution.
Question: How can I make old structure generators/sub-generators but in ES6 syntax, not in ES5.
Thanks.
UPD: I'm hoping that Yeoman has something like Mocha has --require babelhook.js.
I've found the solution for this case.
First of all, I've created src folder where generator sources in ES6 syntax is located. Structure of this folder is the same as in usual ES5 generator.
When I want to compile these sources I just need to copy them and compile in generators folders.
So I've written the following scripts in package.json;
"scripts": {
"clean": "rm -rf ./generators",
"compile": "npm run clean && cp -r src/ generators/ && babel src --out-dir generators",
"prepublish": "npm run compile",
"test": "istanbul cover _mocha"
}
And last thing that I've done is add ignore field in .babelrc file. So I'm sure that templates will be just copied but not traspiled.
{
"stage": 0,
"ignore": [
"app/templates",
]
}