Execute Babel task individually for each file instead of running it on the entire directory, Grunt

I've set up a Grunfile to monitor .js files in the src/ directory and trigger the babel task from https://github.com/babel/grunt-babel to generate ES5 files in the dist/ directory:

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        babel: {
            options: {
                sourceMap: false
            },

            dist: {
                 files: [{
                    expand: true,
                    cwd: 'src/',
                    src: ['*.js'],
                    dest: 'dist/',
                    ext: '.js'
                }]
            }

        },

        watch: {
            ej6: {
                files: "src/*.js",
                tasks: ['babel']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['babel', 'watch']);

};

My question is, can I modify the setup to watch only the specific file that has been modified in the src/ directory instead of regenerating all 'n' files?

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

Implementing the requiredUnless validator of vuelidate for checkboxes: A step-by-step guide

When utilizing Vuelidate, the 'required' validator now accepts boolean 'false' as a valid value. To enforce required validation for checkboxes, you must use 'sameAs' such as sameAs: sameAs( () => true ). How can 'requi ...

Using the ng-repeat directive in an angular-nvd3 tooltip

Looking to dynamically repeat values in the tooltip content of an nvd3 graph? Not sure how to achieve this using ng-repeat with JSON data? Seeking guidance on alternative methods? I can help! $scope.options = { chart: { type: ...

I have to make sure not to input any letters on my digipas device

There is a slight issue I am facing. Whenever I input a new transfer of 269 euros with the bank account number BE072750044-35066, a confirmation code is required. The code to be entered is 350269. https://i.stack.imgur.com/YVkPc.png The digits 350 corres ...

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

Extract the sub-element within a parent element using Vue event handling

Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...

Ensure that the input field consistently shows numbers with exactly two decimal places

Below is an input field that I want to always display the input value with 2 decimal places. For example, if I input 1, it should show as 1.00 in the input field. How can this be achieved using formControl since ngModel is not being used? Thank you. I att ...

Using external scripts that require access to the DOM and window object within a Javascript/Node.js Azure Function: Best practices

I am attempting to integrate external JavaScript into an Azure Function that uses the JavaScript/Node.js flavor. The external JavaScript library I need to use, Kendo, relies on a DOM and a window. To achieve this, I initially experimented with JSDOM, but I ...

Retrieve the current state within a redux action

Many experts recommend consolidating the logic in action creators to streamline the reducer's logic. Picture a basic (normalized) state: const initialState = { parent: { allIds: [0], byId: { 0: { parentProperty: `I'm the ...

Unable to fetch data from Array using an identifier in Angular 4

My goal is to fetch an object from an array by its id using the getItem() method. import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; impor ...

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

The consistent failure of the 201 status node express API is causing major

I am currently working on creating an API using Express. However, when I receive a response from the server, it shows '201 created'. The issue arises when I attempt to make an HTTP request through promises and encounter a false interpretation of ...

updating the state value through an onChange event in the input field requires taking action by clicking outside the field

I've hit a roadblock trying to figure out how to update my button in real-time. Despite scouring various forums and threads for solutions (React form onChange->setState one step behind), I haven't been successful in resolving the issue within ...

Arrange by alphabetical order using a dropdown menu

I am stuck and need some help! I have a working Itemlist with Angular, but now I want to add sorting by a select-box. It should look something like this: preview Here is a Plunker example: https://embed.plnkr.co/JYF0u9jBbsfyIlraH3BJ/ <div id="ideaLis ...

Tips for choosing a specific point on a Vuetify <v-slider> using Cypress

Currently, I am exploring how my application responds when a user interacts with a specific area on a basic Vuetify <v-slider>. How can I replicate this scenario in a Cypress integration test effectively? For instance, to click on the center of the ...

Tips for effectively utilizing the Ngrx navigation function

While exploring NgRx, I stumbled upon navigation. According to the documentation, it seems like this effect should trigger when the component loads. However, I'm facing an issue where this effect is not getting triggered. Other effects that I've ...

How to customize XMLHttpRequest in Firefox's WebExtension

Recently, I've been attempting to override the XMLHttpRequest.protype.open method within Firefox's WebExtension environment. My current approach involves the following code snippet written in a content script: var oldOpen = XMLHttpRequest.protot ...

Unable to update state from within a function in react

As I delve into the realm of coding, a simple graph catches my eye. It showcases various data sets including current, all, and filtered data. Initially, the first block of code runs smoothly. However, upon attempting to setState in order to make some modif ...

Node.js Express JS is currently in the process of retrieving a file

I'm currently grappling with an issue while attempting to download a file using express js. Here is the function in question: var download = function(uri, filename, callback) { request .get(uri) .on('response', function (response) { ...

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

A variant of setTimeout designed specifically for family members

I am currently working on a program that involves creating a "health" variable which decreases by random amounts at random intervals. This means that a player may encounter scenarios like the following: 5 seconds Lose 20 health 3 more seconds Lose 25 healt ...