Rama Rama -4 years ago 208
Linux Question

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

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 Source

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/\""
},
...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download