Can the name of the Grunt task target be utilized within attributes?

I have implemented the grunt-replace task to make some content changes in the index.html file. However, I am looking for a way to avoid repeating code unnecessarily. The code snippet below is just an example of what I am trying to accomplish:

replace: {
    options: {
        patterns: [
            {
                match: /<(script.*?src=)"(?![\w/]+environment)/g,
                replacement: '<$1"//<%= config.cdn[target] %>/'
            }
        ]
    },
    a: {
        files: [
            {
                src: '<%= config.path.dist.output %>/index.html',
                dest: '<%= config.path.dist.output %>/index-a.html'
            }
        ]
    },
    b: {
        files: [
            {
                src: '<%= config.path.dist.output %>/index.html',
                dest: '<%= config.path.dist.output %>/index-b.html'
            }
        ]
    }
}

When I trigger replace:a, I expect the replacement pattern to be sourced from config.cdn['a']. Similarly, when I execute replace:b, I want the replacement pattern to come from config.cdn['b'].

Do you think this approach is feasible?

Answer №1

While it may not be the prettiest solution, this code snippet could potentially serve its purpose or provide some assistance:

executeTransformation: (function () {

    var transformations = {},
        targets = ['alpha', 'beta'],
        selectedTarget,
        index,
        count;

    for (index = 0, count = targets.length; index < count; index++) {
        selectedTarget = targets[index];

        transformations[selectedTarget] = {
            options: {
                directives: [
                    {
                        find: /<(style.*?src=)"(?![\w/]+settings)/g,
                        change: '<$1"//' + config.assets[selectedTarget] + '/'
                    }
                ]
            },
            locations: [
                {
                    source: config.paths.outputDirectory + '/home.html',
                    destination: config.paths.outputDirectory + '/home-' + selectedTarget + '.html'
                }
            ]
        }
    }

    return transformations;

}())

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

Using React to Dynamically Display JSON Data as HTML

Struggling to incorporate HTML rendering from JSON data into my React component without relying on dangerouslySetInnerHTML. I want to include other React components within the rendered HTML, but facing challenges when trying to render multiple elements or ...

Vue.js - Displaying validation errors when a user interacts outside of a component

The ExamEditor Vue component I am working on is quite complex, consisting of sub-components like QuestionEditor and ExerciseEditor. These components are all tied to an exam object that contains nested arrays with questions and more. The layout inside the e ...

Having trouble grasping the inner workings of code while iterating through a JSON array in ReactJS

Currently, I am immersed in a school project that requires me to develop a simple CRUD web application. After weighing my options, I decided to utilize Spring Boot + ReactJS for this endeavor. The progress has been smooth so far, but I must admit that part ...

Deleting uploaded images in Cloudinary for Next.js is not allowed

After successfully implementing image uploads in cloudinary for Next.js, I encountered an issue with image deletion. Despite creating the necessary routes and components, the deletion functionality is not working as expected. I am unsure of what could be ...

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

Show a selection of assorted files stored in the database

router.get("/alw", function(req, res){ Product.find({"category": "alw"}, function(err, allProduct){ if (err){ console.log(err) } else { res.render("products/alw", {products ...

What is the best way to swap out an observable array with an array retrieved from an API response

I have a custom material autocomplete input that allows users to select items in a dynamic form component. Since the fields of the form are dynamic, I need to filter the list of items every time a user types something into the input. filteredOptions: { [k ...

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

Exploring the power of V-for with checkboxes in VueJS

One issue I am facing is related to triggering my save method only when a checkbox is selected or true in Vue JS. I have no problem listing values and saving them to the database using axios, Vue JS, and Spring Boot. However, every time I click the checkbo ...

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

retrieving form data from a submit button using objects in PHP

I am using objects to fetch a form (including a submit button) from another page. However, I am struggling to extract the POSTED information from that submit button and believe that AJAX might be necessary. Here is an example: Page 1 initiates a call to ...

Using more than one variable for filtering in Vue.js

I've been busy working on implementing table filtering in Vue.js. So far, I have successfully filtered the table by name and date. However, I'm now facing a challenge with adding another filter along with them. If you want to check out my curren ...

Exploring the capabilities of multiple nested controllers in AngularJS

I am facing a challenge that I haven't been able to find a solution for online. My search form includes multiple instances of a common controller used for typeahead/autocomplete searches. Each controller is set up with different parameters for search ...

Controlled Material-UI v5 DateTimePicker triggers input focus upon closure

Is there a way to have 2 DateTimePicker components as siblings, and when I click on the second one while the first one is still open, it should open a new DateTimePicker with focus on it? Can someone help me achieve this? Link to code example I want the ...

Utilizing Javascript Conditional for Substitution

Currently, I have a JavaScript function that replaces all links with registration messages: <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { ...

Drop items next to the specified keys. Vanilla JavaScript

I am trying to create a new array of objects without the gender field. Can you identify any mistakes in my code? let dataSets = [ { name: "Tim", gender: "male", age: 20 }, { name: "Sue", gender: "female", age: 25 }, { name: "Sam", gender: "m ...

Step-by-step guide on generating a downloadable file in Vue

As a beginner in Vue, I am tasked with downloading a file but unsure of how to proceed. My attempt at the code resulted in the image opening on a new page instead. <a class = "btn btn-success btn-xs" href = "https://78.media.tumblr.com/tumb ...

Assign the ngClick event handler to the capturing phase

Can the ngClick event handler be configured to work in the capturing phase, as discussed in this informative article? I am interested in stopping events from propagating down to child elements and then back up again when a specific condition is met for t ...

DailyCodingChallenge: Discover two elements in an array that add up to a specified value

As someone who is relatively new to coding, I recently signed up for the daily coding problem mailing list and received the following question: If given a list of numbers and a specific number k, can you determine whether any two numbers from the list a ...

Tips for arranging div elements in a grid-like matrix layout

I am facing a challenge in arranging multiple rectangular divs into a grid structure with 10 columns and 10 rows. The CSS styles for the top, bottom, left, or right positions must be in percentages to accommodate zoom in and out functionality without overl ...