Is it possible to leverage gulp in order to merge files by their respective parent directories?

Currently, I am in the process of creating a standardized framework that can be utilized across multiple projects. My main objective is to gain familiarity with gulp/npm and project building techniques.

I aim to maintain a clear separation of distinct components and use gulp tasks to compile files from each component folder efficiently.

More specifically...

My preference is to employ the following globs:

app/components/**/scripts/**/*.js
app/components/**/*.css

Here are some sample files:

app/components/about/file1.css
app/components/about/file2.css
app/components/about/scripts/file1.js
app/components/about/scripts/file1.js
app/components/home/file1.css
app/components/home/file2.css
app/components/home/scripts/file1.js
app/components/home/scripts/file1.js

In order to merge these files into the following outputs:

app/components/about/scripts.js
app/components/home/scripts.js
app/assets/css/components/about_styles.css
app/assets/css/components/home_styles.css

I came across this recipe which seems to achieve what I have in mind, but it appears quite cumbersome.

Does anyone know if this can be accomplished using gulp? If not, are there any modules available that could assist in achieving this functionality?

javascriptnpmgulp

Answer №1

It appears that you are interested in utilizing gulp-concat

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

gulp.task('aboutScripts', function() {
  return gulp.src('./app/components/about/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./app/components/about/'));
});

gulp.task('homeScripts', function() {
  return gulp.src('./app/components/home/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./app/components/home/'));
});

and potentially also gulp-concat-css

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

React component dynamically adjusts based on changes in nested props

I am currently working on a component that takes a matrix as an input and generates a table based on it. The cells of the table are text inputs that should update the matrix when their values change. I want to achieve this without resorting to using a forc ...

javascriptreactjs

The npm plugin "onchange" is unable to detect any modifications made to scss files

New to npm and looking for a simple build process using only npm (no grunt, gulp, etc). All the scripts in my package.json work fine except for the one that should watch SCSS files and run compilers upon file changes. Here's my Package.json file for ...

node.jsnpmonchangebuild-tools

The files being requested by jQuery Slimbox are not being retrieved properly

I am currently utilizing jQuery slimbox along with its Application Programming Interface (API). Below is the JavaScript code snippet that retrieves image paths through JSON and then triggers the slimbox using its API. $('#main-container').appen ...

javascriptjqueryajaxjsonslimbox

Should identifiers be avoided when using if/else conditions?

I'm questioning the use of a region id 5657 in my database for implementing if/else conditions. 1- Is it considered a bad practice to use an id for this purpose? 2- What would be the correct way to implement if/else conditions in this scenario? ctr ...

javascriptangularjsif-statement

Issues with File Upload using Vue.js and the Flask framework

I am encountering difficulties when trying to upload an image using FormData from Vue.js to my Python Flask backend. In my setup, I have a Node.js server that is responsible for handling Vue.js (Nuxt) in order to enable server-side rendering. The basic sta ...

javascriptvue.jsexpressnuxt.js

Refining search outcomes using multiple Multiselect boxes in VueJS

In my Vue component, I have successfully displayed results from a data object and created multiple multiselect boxes. However, I am facing challenges with filtering. I understand how to set and compare a single value from the multiselect for displaying sp ...

javascriptvue.jsvue-multiselect

What is the quickest way to find and add together the two smallest numbers from a given array of numbers using JavaScript?

const getSumOfTwoSmallestNumbers = (numbers) => { const sortedNumbers = numbers.sort((a, b) => a - b); return sortedNumbers[0] + sortedNumbers[1]; } I encountered this challenge on Code Wars. My function to find the sum of the two smallest num ...

javascriptarrayssorting

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

javascriptcssreactjsmaterial-ui

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive

Refreshing a table row in AngularJS after adding an attribute to a directive

Referencing : Dynamically add directive in AngularJS I am attempting to dynamically add a directive to an element after it has been created and the page has loaded. When using $(nRow), which refers to a specific element, nothing happens with the current ...

javascriptjqueryangularjs

Tips for leveraging _.union function from lodash to eliminate duplicate elements from several arrays in a TypeScript project

I attempted to use import _ from 'lodash-es' and _.union(user.users.map(user => user.city)). However, the result was not as expected, such as: ["city_id1", "city_id2", "city_id3", "city_id4"] What is th ...

javascriptangulartypescriptlodash

Encountering issues with npm installation on a cross-domain git repository

We recently initiated a new project and decided to host it on our internal Gitlab server. After successfully cloning the project from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d4dac7f3d4dac79ddecad2d0ded69dd0dcde">[e ...

node.jsgitgithubnpmgitlab

Encountering issues when trying to incorporate buttons with React.js

When attempting to add two extra buttons to the list using React.js, I encountered the following error: Error: ./src/TodoItems.js Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (10:46) 8 | 9 | createTasks(item) { > ...

javascriptreactjs

Using jQuery to locate the href attribute within a TD element with a specific

Update URL <td class="posts column-posts"><a href="edit.php?tshowcase-categories=ops&amp;post_type=tshowcase">2</a></td> Current URL: <span class="view"><a href="https://blog.company.com/team/tshowcase-categories/ops ...

javascriptjquery

Issue: The module '@nx/nx-linux-x64-gnu' is not found and cannot be located

I'm encountering issues when trying to run the build of my Angular project with NX in GitHub Actions CI. The process fails and displays errors like: npm ERR! code 1 npm ERR! path /runner/_work/myapp/node_modules/nx npm ERR! command failed npm ERR! c ...

typescriptnpmgithub-actionsnpm-installnrwl-nx

The installation process has encountered an obstacle in locating the specified module

# cat /etc/redhat-release CentOS release 6.7 (Final) Whenever I execute the command npm prune && npm install && bower install && gulp build An error is thrown > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

node.jscentosnpmphantomjs

The function button.click() is not compatible with Internet Explorer 11 and will not

I have implemented a jqx menu using the code snippet below: <ul style='width: 200px;'> <li onclick="logOffButton.click();">Sign off</li> </ul> My goal is to automatically trigger a click event on the "logOffButton" o ...

javascriptjqueryhtmlinternet-explorer

Is there a way to delete both the item and its corresponding key from localStorage?

I have developed a basic application that utilizes localStorage for saving and deleting data. However, I encountered an issue where deleting an item only removes the value but not the key. As a result, when loading all items, the deleted ones appear as nul ...

javascripthtmllocal-storage

What is the method to deactivate all events in React components using refs?

Currently, I am utilizing TreeView from Material-ui along with a text field for searching other items on the screen. Although TreeView and TextField are unrelated components. However, I have encountered an issue where if I click on a TreeView node and the ...

javascriptreactjsmaterial-uitreeview

VueJS - V-for not updating after data changes, requires page refresh to display modifications

I'm experiencing an issue with this code - it doesn't seem to update or re-render the changes when I add or delete an entry. I have to refresh the page every time to see the modifications made. Note: I am using ME(Vue)N stack. Here is the code ...

javascriptexpressvue.jsasynchronousv-for