How to use package.json scripts to copy files with specific file extension

Npmpackage.jsonBuild Tools

Npm Problem Overview


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...

Npm Solutions


Solution 1 - Npm

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....

Solution 2 - Npm

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

Solution 3 - Npm

Quick compatibility build script (also works on Windows):

"build": "react-scripts build && mv build docs || move build docs",

Solution 4 - Npm

@powershell copy \"D:/Path/untitled.txt\"  destionation-file.txt"

Solution 5 - Npm

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

Solution 6 - Npm

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'))
});

Solution 7 - Npm

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

Solution 8 - Npm

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThomas J&#248;rgensenView Question on Stackoverflow
Solution 1 - NpmMatthew BakaitisView Answer on Stackoverflow
Solution 2 - NpmcatamphetamineView Answer on Stackoverflow
Solution 3 - NpmSagar GhimireView Answer on Stackoverflow
Solution 4 - NpmSorin VeștemeanView Answer on Stackoverflow
Solution 5 - NpmKostovVView Answer on Stackoverflow
Solution 6 - NpmZer0View Answer on Stackoverflow
Solution 7 - NpmAliaksandr PyrkhView Answer on Stackoverflow
Solution 8 - NpmrhigdonView Answer on Stackoverflow