I am trying out npm as a build tool.
One stumbling block I have encountered is that I need to copy javascript files from one folder to another. The source folder contains typescript files, javascript files and map files, but in the target folder I am only interested in javascript files.
I do not want to make a copy-statement for each file, but would like to copy all .js files. Also, my source folder contains subfolders that also contains javascript files. These need to be copied as well, and maintain the subfolder structure.
What I have tried is using NCP with a filter, but I cannot get the filter to work. I have tested the regex used in the filter and it appears to work fine. The test was done at Regex Tester with regular expression .*\.js$ and test-strings like main.ts, main.js main.js.map etc, and only the .js strings were matched.
My package json contains the following (abbreviated):
{
"scripts": {
"copy": "ncp scripts wwwroot/scripts --filter=\".*(\\\\.js$)\""
},
"devDependencies": {
"ncp": "2.0.0.0"
}
}
Since my regex is in a string in a string I have double-escaped it. I have also tried other variations, for example:
--filter=/.*\.js$/g - compilation error
--filter=/.*\\.js$/g - no files copied
--filter=\".*\\.js$\" - no files copied
--filter=\"/.*\\.js$/g\" - no files copied
(no filter) - all files copied
I am in no way married to NCP. If something else works better then I will use that.
So: How do I, inside package.json's scripts section copy only files with a speific extension to another folder? I am pretty sure I have overlooked something blindingly obvious...
Warning! The cpx package appears to be abandoned. cpy-cli, copyfiles, and other solutions are listed in comments here or answers, below.
cpx might be a good substitution.
It has a CLI, allows you to use globs instead of regex, can preserve the directory tree, and is relatively up-to-date as I write this....
There's also npm module called copyfiles
https://github.com/calvinmetcalf/copyfiles
E.g. to copy all *.css files from the ./src folder to the ./styles folder:
copyfiles --flat src/*.css styles
Quick compatibility build script (also works on Windows):
"build": "react-scripts build && mv build docs || move build docs",
#powershell copy \"D:/Path/untitled.txt\" destionation-file.txt"
Windows users:
// Copy file
xcopy c:\workfile d:\test
// Copy folders incl. sub folders
xcopy <source> <destination> /e
// If folder name has space in name use double quotes
xcopy c:\workfile “d:\test new”
More info here
You can use gulp.js for this.
Write a gulp task to isolate only the js files (/path/to/files/*.js) and move it to destination of your choice.
It will require only a few lines of code.
Include that in the script section of package.json if necessary.
The link to gulp.js : https://gulpjs.com/
var gulp = require('gulp');
gulp.task('jscopy', function(){
return gulp.src('client/templates/*.js')
.pipe(gulp.dest('build/js'))
});
ncp copies recursively, therefore before copying files it will check whether directory matches filter or not, e.g.:
d:\path\to\app\src\server
d:\path\to\app\src\server\middleware
d:\path\to\app\src\server\middleware\cool-middleware.js
d:\path\to\app\src\server\middleware\cool-middleware.js.map
So your regex must matches all these paths and your file also
I am able to just use cp in my script command:
"build": "npx babel src --out-dir dist && cp ./src/*.css ./dist",
This will work if you have your distribution package already inside the /dist folder. You can also add another command to copy that over, then even run the publish command.
I use this in Git bash in windows which has the cp command available. The comments are correct that you will need this in your underlying shell/command prompt. It should be able to be modeled and updated for your OS.
#KostovV answer but adapted for json string and relative path
"build": "nest build && xcopy \".\\myFolder0\" \".\\myFolde1\\sub\"",
Related
while vs code extension development, there is /out folder which keep generated js files for respective typescript file but committing these files in remote repo seems not useful so adding the entry in .gitignore but now when I run the extension it say module not found
Activating extension 'xkeshav.<extension-name>' failed: Cannot find module 'd:\Developer\extension-folder\out\extension.js'
Require stack:
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .
so my question is
when not keeping /out entry in .gitignore, it works file so whether we need to commit these files in remote or not ?
Make sure you have a .vscodeignore file in your repo. VS Code only uses .gitignore if there's no .vscodeignore. The .vscodeignore file is then used to exclude files/folders from the extension bundle instead of .gitignore. A typical .vscodeignore looks like this:
.vscode/**
.vscode-test/**
out/test/**
test/**
src/**
images/**
**/*.map
.gitignore
.eslintignore
.eslintrc.json
tsconfig.json
typings/**
As you see out/ itself is not excluded, just the tests which end up there.
I am building a npm module, in which I want to include two directories : /dist and /demo.
So far, my approach was to use the 'files' attribute, in package.json :
"files": [
"dist",
"demo"
]
When running npm pack, the tgz files successfully contains the demo folder, and the built files in /dist.
However, during the build phase, I added a shell script that is copying some files (generated mylib.js and mylib.css) to the /demo directory. And my problem is that npm pack does not care about these specific files, which are not included in the tgz (despite I can see them in my explorer).
However, if the shell script make changes to the content of /demo/index.html, these changes are included in the tgz.
How could I include the missing files?
Seems that I misinterpretated the problem:
if the files were not in the tgz, it is because I add a .gitignore in /demo, ignoring js and css files.
As I really don't want this files to be commited, the solution was to add a .npmignore file, with no rule matching css/js
I´m looking into switch from gulp/grunt to only use npm scripts.
But I cant really solve how to get *.js and *.css from a given path and add it to the index.html file.
must I add it thru a "index.js" file or can I do something like...
"scripts": {
"inject": "inject src/app/*.js",
},
and then it will add it in my index.html where I have specified it like...
/* inject:js */
The suggestion by Chris Traveis worked out pretty nice.
So the answer to my problem was solved using https://www.npmjs.com/package/postbuild
There were no answers in the last 3 months on this popular topic, probably because there are wrong assumptions in the question. Distilling your question,
...how to get *.js and *.css from a given path and add it to the index.html file
To be short, do it manually. Use a good npm boilerplate such as npm-build-boilerplate and add the compiled JS and CSS files manually into your HTML.
... must I add it thru a "index.js" file, or <2nd option>
No. Add the files manually. Let me elaborate more.
With npm scripts you construct a pipeline and you know where your uglified JS files and compiled SCSS files are rendered. Yes, I have "main": "index.js", row in my package.json, but there's no "index.js" in my project at all. I get npm scripts to crunch files in various folders, to output them into other folders and I manually add end CSS and JS files into HTML templates (in my case, static Hugo website's templates).
I see one case where "dynamism" in the HTML is needed — when you want to bust cache and add the unique strings to the end-point CSS/JS file names. However, then you might want to consider scripts that count MD5 hash of the files' contents, because if you run the build multiple times and your existing CSS or JS files haven't changed, you want to keep the old file names. Visitors might have cached them (and think about CDN too). In this sense, npm postbuild script mentioned in the comments above is inferior because it just uses "version" counter. Look for alternatives to npm postbuild to bust caches.
Is it possible to uglify all the RequireJS modules without concatenating them into a single file? (I know the other way round is possible with optimize: "none").
I know uglifyjs-folder have this option, with parameters -e and -o referencing a folder (not a file).
ex:
uglifyjs-folder "%CD%" -e -o "%CD%\subfolder"
(obs: %CD% in Windows gets the current folder)
It is possible use r.js to uglify the files without concatenating them. If you do not provide any module name in the configuration options (i.e. you don't use modules nor specify name), then r.js will process each file from baseUrl individually, and thus will uglify each file without concatenation. For instance, this trivial build configuration:
{
baseUrl: "js",
dir: "build",
}
causes r.js to process each file from js individually and copy it into build after uglifying the file. No concatenation happens no matter how many files you have in js. With the configuration above, r.js will not trace any dependencies between modules because it does not need to trace dependencies to do its work.
This being said, I would not use r.js for the purpose of uglifying the files individually unless there was some additional feature of r.js I'd need to use. For instance, it may be expedient to use cjsTranslate: true to have r.js convert CommonJS modules to AMD, and perform the uglification at the same time.
While running pclint for a particular folder, its running for all the files inside that folder. If we want the pclint to omit some of the files, then how to configure it in std.lnt file?
Normally, your std.lnt file does not contain a list of source file names to be processed. You then call PC Lint with the command line
<path>/lint-nt.exe std.lnt file1 [file2...]
where file file is a C or C++ source file (not a header file).
Since Lint seems to process all the source files in you folder, take a look at your std.lnt file and see if there's a list of .c/.cpp files included. Remove them.
Then build your command line as above, and list just the files you are interested in; or "*.c" to again process all the C files in the current directory.
If you need more guidance as to how to structure and create your Lint option files, google for "How to wield PC Lint", first result, which is my whitepaper on how to setup PC Lint if the setup.exe just doesn't thrill you much.