copy html and css files to dist while maintaining the folder structure

Question

I'm trying to npm publish my angular2 app which has the following structure.

search-app
  config
  node_modules
  src
    api
      --index.ts
      --ping.ts
      --search.ts  
    model
      --index.ts
      --model.ts
    web
      app
        ping
          --index.ts
          --ping.css
          --ping.html
          --ping.ts
        search
          --index.ts
          --search.css
          --search.html
          --search.ts
        --app.css
        --app.html
        --app.module.ts
        --app.ts
      --index.html
      --index.ts
package.json
tsconfig.json

Now, my "npm run dist" command is

"dist": "npm run rimraf -- dist && tsc src/index.ts src/web/index.ts src/model/index.ts -m commonjs --outDir dist --sourcemap --target es6 -d --pretty --noImplicitAny --experimentalDecorators --skipLibCheck"

Running npm run dist will produce the following dist directory.

search-app
  dist
    api
      --*.d.ts
      --*.js 
    model
      --*.d.ts
      --*.js
    web
      app
        ping
          --*.d.ts
          --*.js
        search
          --*.d.ts
          --*.js
        --*.d.ts
        --*.js
      --index.d.ts
      --index.js

Any advice on how to copy html and css files from src/web and its sub directories to dist/web while maintaining the structure of sub directories?

I am basically looking for a command that I can append to my dist command to copy the html and css files. I use OSX, but the ideal command would be something that works on both OSX and windows.

Answer 1

To achieve this cross-platform firstly install the copyfiles package:

$ npm i -D copyfiles

Then in package.json add the following copy script:

...
"scripts": {
  ...
  "copy": "copyfiles -u 2 \"./src/web/**/*.{css,html}\" \"./dist/web/\""
},
...

Call the copy script by chaining && npm run copy to the end of your existing dist script, as shown in the following example:

...
"scripts": {
  "dist": "npm run rimraf -- dist && tsc src/index.ts src/web/index.ts src/model/index.ts -m commonjs --outDir dist --sourcemap --target es6 -d --pretty --noImplicitAny --experimentalDecorators --skipLibCheck && npm run copy",
  "copy": "copyfiles -u 2 \"./src/web/**/*.{css,html}\" \"./dist/web/\""
},
...