How to use Shell command to transfer only HTML files to the designated directory

Currently working on a build script using npm.

This build script involves compiling typescript.

During the typescript compile process, it copies the folder structure from a ts directory to a dist/js directory.

An example of the structure in the ts folder:

ts
--  one
    -- one.html
    -- one.ts

    two
    -- two.html
    -- two.ts

The resulting structure in the dist/js folder looks like this:

js
--  one
    -- one.js

    two
    -- two.js       

All ts folders contain html files that should be copied to the corresponding js folder post-compilation.

What shell command is recommended for copying the html from the ts folder into the correct folder within the outputed js folder?

Update:

A previous attempt with the following command led to an error:

"build:copy-html": "find ./app/ts -name '*.html' cp ./dist/js \\;",

The error received was:

Error: find: cp: unknown primary or operator

UPDATE:

In addition to the existing ts folder setup,

    ts
    --home
        --home.html
        --home.ts

The expected final js folder structure should look like this:

    js
    --home
        --home.html
        --home.js   

Answer №1

My usual approach is as follows:

(cd app/ts; tar -cf - `find . -name '*.html'`) | (cd app/dist/js; tar -xf -)

If you need to copy all the '*.html' files from the app/ts directory to the app/js directory while maintaining the directory structure and assuming there are no spaces in the file names.

There are various methods available, with the combination of find and cpio often found in the manual page for find, accessible here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a problem deploying AWS Step Functions: "Error: Command '.Account' is unknown."

I have been working on deploying a sequence of AWS step functions using the setup.sh file. After successfully testing the step functions in a controlled environment, no issues were found within the source code. This represents the Deployment Code ./setup.s ...

What is the best way to search for items using only a portion of a phone number or typing a name in any case (uppercase, lowercase) and still get accurate results?

let contacts = [ { name: 'John', phone: 987654 }, { name: 'Sara', phone: 654321 } ] I am developing a contact manager app with various functions to manage contacts. Add new contac ...

Guide to Setting Up "Remember Me" Login for Users in Angular

I am having trouble setting the 'Remember Me' option on my Login page. I tried using localstorage session but it seems like something is missing in the service file that's causing it not to respond properly. I attempted to follow a guide on ...

Presenting information on the user interface

Recently, I have been working on an API endpoint that retrieves comments by ID, using the endpoint get/comments/:id. When I tested this endpoint using Postman, the response I received was as follows: { "id": 401478, "page": 1, "results": [ ...

Executing the package.cmd script located in the node_modules/.bin directory of a Node.js

Just diving into the world of node js, I'm currently working on creating an npm module and feeling a bit puzzled by the presence of cmd files in the /node_modules/.bin directory corresponding to each package installed locally. Upon installing multipl ...

npm is failing to generate the ./node_modules directory when installing a local package

I am currently tackling a Hello World tutorial for creating a Nodejs extension with C++. The project is running smoothly and I can successfully execute the example. However, I would like to use require('hello') instead of require('./build/Re ...

I possess a function that can retrieve the key of an Object, but now I am faced with the task of accessing the actual Object using this value in JavaScript

This is my first time seeking advice on a technical issue. I'm currently working with the following function: export function sendRequest<T>(req: RawRequest, options) { const start = Date.now(); const reqOptions: CoreOptions = { ...

What is the best value to assign to the "start" script in my NPM package.json file?

I'm having trouble executing the command npm start because my package.json file doesn't have a "start" script. I've attempted to set values like "start": "node app.js" and "start": "node server.js", but they haven't resolved the issue. ...

Is it time to refresh the package-lock.json file?

I'm currently in the process of updating a React app from Node 14 to 16. One step I took during the upgrade was deleting the node_modules folder and package lock, then generating a new package-lock.json file. However, this resulted in numerous compila ...

The installation of Phonegap via npm is experiencing issues with ant

I am facing a challenge with installing phonegap 3.5 through npm on my Windows 8.1 operating system. I have already set up my path following the steps in this image: I have also successfully installed ANT, JDK, and Android SDK as shown in this snapshot: ...

Encountering a React npm start issue following the installation of MongoDB

I've been engaged in a simple project to get more familiar with react. I made the decision to incorporate mongoDB into my project, but since installing it, my app refuses to start. The odd thing is that I haven't even added any code for my app to ...

Exploring the Relationship Between Redux and ImmutableJS in Managing Nested State and Understanding the Computational Complexity of Immutable

Trying to grasp the concept of Immutability for my debut Redux (NGRX/Store) endeavor has been quite the challenge. Avoiding state mutation has been a struggle, especially while dealing with Object.assign({}) and state mutation errors. Thankfully, I stumble ...

Accessing an HTML file in the browser using an npm script

I have been searching for a solution that doesn't involve installing an npm package to host the file on an http server. All I need is to open a basic HTML file from my local computer in a browser using an npm script, without needing a server. Is there ...

Incorporating a JavaScript file into Angular

I'm looking to incorporate a new feature from this library on GitHub into my Angular project, which will enhance my ChartJS graph. @ViewChild('myChart') myChart: ElementRef; myChartBis: Chart; .... .... const ctx = this.myChart.nativeEleme ...

The Angular service not only stores data but also handles HTTP requests internally

Instead of returning an observable to the requesting components and managing the data, I am considering using Angular services to handle HTTP requests autonomously. The goal is to have components retrieve data directly from the service where it is stored. ...

What is the process for incorporating the QuillJS module into a component in Angular 2?

As a newcomer to Angular 2 and TypeScript, I have been utilizing AngularCLI and NPM to set up my Angular Project. Recently, I installed the Quill node module using NPM for project integration. Now, I am in the process of developing a component where I can ...

The ng-model used within an *ngFor loop is not displaying the correct value

I am working with a JSON file in my Angular2 App. The specific JSON object I am referring to is named tempPromotion and I am trying to access the data within ['results'] like this: tempPromotion['response_payload']['ruleset_list ...

Tips for running npm start in a dockerfile CMD script

Below is a snippet of code from a Dockerfile that is intended to run a simple script starting both a React and Python application: # syntax=docker/dockerfile:1 FROM nikolaik/python-nodejs WORKDIR /app COPY requirements.txt requirements.txt RUN pip3 inst ...

Utilize cypress to analyze the loading time of a webpage

My current challenge involves using cypress to carry out website tests. I am looking for a reliable method to measure the duration it takes for certain cypress commands to load or execute. As an example: //var startTime = SomeStopwatchFunction(); cy.visit( ...

Tips for obtaining the "inner type" of a particular "instance" in TypeScript's generics

Unable to find more appropriate language to elaborate beyond the title, I'm going to rely on the code itself: let var1 = someExternalLibraryMethod(); // assume var1 is implicitly Promise<string> let var2: typeof var1; // this approach enables ...