Stripping JavaScript files of their directory paths using Gulp without affecting their parent folders

Upon reading this post, checking out this package's documentation, and learning about globs here, I am struggling to figure out how to modify the code snippet below to filter only the JavaScript files without including their parent folders:

gulp.task("distribution", function () {

    return gulp.src("distribution/**/*.js", { nodir: true })

    .pipe(gulp.dest("www/javascripts"));

});

The current file structure looks like this:

javascripts/bootstrap/dist/js/bootstrap.js

javascripts/hammerjs/hammer.js

javascripts/jquery/dist/jquery.js

javascripts/localforage/dist/localforage.js

javascripts/moment/moment.js

javascripts/vue/dist/vue.js

javascripts/vue-touch/vue-touch.js

But what I want is to achieve the following structure:

javascripts/bootstrap.js

javascripts/hammer.js

javascripts/jquery.js

javascripts/localforage.js

javascripts/moment.js

javascripts/vue.js

javascripts/vue-touch.js  

I've tried implementing the following code with no success:

gulp.task("distribution", function () {

    const filterToApply = filter("*.js", { restore: true });

    return gulp.src("distribution/**")

    .pipe(filterToApply)

    .pipe(gulp.dest("www/javascripts"));

});

And using this alternative approach resulted in the same output as the original one:

gulp.task("distribution", function () {

    const filterToApply = filter("**/*.js", { restore: true });

    return gulp.src("distribution/**")

    .pipe(filterToApply)

    .pipe(gulp.dest("www/javascripts"));

});

Answer №1

To enhance the filter, consider utilizing gulp-flatten by incorporating the following code:

.pipe(flatten()) right before executing the gulp.dest function.

For illustration purposes:

var flatten = require('gulp-flatten');

gulp.src('distribution/**/*.js')
  .pipe(flatten())
  .pipe(gulp.dest('"www/javascripts'));

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

Trigger price update in jquery based on radio or checkbox selection and specific conditions

https://i.sstatic.net/OIvgF.png In my product form, I have implemented a feature where selecting the "product type" and "product size" will update the price. However, if the user changes the product type after selecting the size, the price does not update ...

Disable Firebase Listeners

I am using Vue components to listen for Firebase events, creating the Firebase reference/listeners when they are mounted. However, I want to remove all listeners in the beforeDestroy() lifecycle hook when a user navigates away from the page. Is this the ...

The componentDidUpdate function fails to trigger in React Native after modifying the reference of its prop

In this section of my parent component, I am invoking my child component AttachmentField. configurableField.attachments.map((item, i) => { if (item.type.includes("pdf")) { const url ...

Merge functions that execute identical operations

I find myself in a situation where I have two functions that do very similar tasks, but on different elements. Initially, I only anticipated having these two functions, but now I realize I'll need to add more. This will result in a lot of repetition. ...

The text box's word limiter is malfunctioning when writing code on a child page of the master

Encountering an unexpected problem that I never thought would happen. I wrote a word limiter code for a text box on a single page and it was working perfectly fine. The word limiter worked and the remaining words were displayed by a label named "remaining6 ...

Swap out the old nested array for a fresh array

Currently, I am dealing with an array nested inside another array. The structure looks like this: Structure: First Array [ { Second Array [ { } ] } ] I am attempting to replace all instances of Second Array with a new array that I have cr ...

Issue encountered while constructing on npm

Encountering an issue while running 'npm run build' for my application. ⠋ building for production.../home/edu/Dropbox/projects/personal/for good/musixshare/node_modules/last-call-webpack-plugin/src/index.js:170 compiler.hooks.compilation.t ...

Clicking on a search result does not trigger the popup to open in the App.vue file

Whenever I click on a search item, my goal is to open the Popup. Why does this.$emit('openPopup', bookId); not work in the selectBook(bookId) method? In Results.vue component, the search results are displayed using Google Books API: <template ...

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

I keep a notebook that contains the following entries: https://i.stack.imgur.com/MLdO0.png For information on OneNote APIs, you can refer to this link (paragraph class selected already) https://learn.microsoft.com/en-us/javascript/api/onenote/onenote.p ...

The code is anticipating a declaration or statement in JavaScript/TypeScript

Currently, I am working with Typescript 1.7 and React 0.14 using the new ES6 syntax. Specifically, I am encountering an issue with destructuring assignment, which is explained in detail here. let x0, x1, y0, y1; if(this.props.viewport) { {x0, x1, y0, ...

Building a Docker image encounters an issue during the npm install process

Trying to utilize Docker with an Angular application, encountering issues during npm install within the Docker build process. When running npm install locally, no dependency errors or warnings occur. Error log from docker build: > [node 4/6] RUN npm i ...

From the hue of mossy green to the fiery shade of ruby red,

I managed to create a simple green circle using THREE.Shape. Now, I am interested in changing the color of the circle so that it transitions from green in the middle to red at the border. Although I found an example on this website, I'm struggling t ...

Running only failed tests in Protractor can be achieved by implementing a custom script that

I've encountered a problem in my JavaScript file where some of the test cases fail intermittently, and I want to rerun only those that have failed. Is there any feature or solution available that can help with this issue? It's quite frustrating a ...

The automated linting process through npm script did not meet the desired expectations

I need help setting up a script that will automatically fix all files in my Vue project like this: "lint": "eslint --fix vue/**/*.vue && eslint --fix vue/**/*.js" The goal is to automatically lint all .vue and .js files within the project. Unfor ...

In Electron, methods for detecting and resolving Error TS2304: Unable to locate the name 'unknown on(event: 'ready', listener: (launchInfo: unknown) => void): this are essential for smooth operation

Encountering an issue while running npm build. Electron version: 7.1.2 TypeScript version: ^2.5.1 Target version: ES2017 Here are the details of the error. When I performed the build under the following conditions: Electron version: 6.0.0 TypeScript ver ...

Evolution of Node package.json metadata for a specific version as time passes

NPM: version 2.2.0. Operating System: Windows 8.1. Lately, I've noticed a curious pattern where some of my node dependencies have their package.json metadata altered without any change in the version number. This phenomenon seems to be especially co ...

I've been facing some challenges trying to set up npm and Angular CLI on a Bitbucket Pipeline

In my local development environment, the commands mentioned below work perfectly: npm install -g npm install -g @angular/cli https://i.sstatic.net/MBq4e78p.png However, when I attempt to execute them in a Bitbucket pipeline, this is what happens: - step: ...

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

When using `defineModel` in Vue, the returned value can be either an object or

defineModel() is a new feature introduced in Vue 3.4+. The official documentation provides the following example: const model = defineModel() model.value = 'hello' Initially, it appears that model is an object with a value property. However, th ...

Learn how to stop the automatic scroll-to-top behavior on specific links within your React-Router application by implementing a custom ScrollToTop component

While utilizing React-Router and a custom ScrollToTop component to reset the scroll position on navigation, I encountered a specific scenario where I required the scroll position to remain unchanged when clicking on a category item. Custom ScrollToTop Com ...