Endless cycle encountered when executing grunt-concurrent with 'nodemon' and 'watch' operations

Currently, I'm experimenting with the grunt-concurrent task in order to utilize grunt-nodemon for watching my JS scripts. This setup allows me to concurrently use watch to continue executing concat and uglify on my files whenever they change.

Upon running grunt from the command line, an infinite loop is triggered, displaying:

Running "watch" task
Waiting...
Verifying property watch.concurrent.files exists in config...ERROR >> Unable to process task.
Warning: Required config property "watch.concurrent.files" missing.

To halt this continuous stream of messages, I am forced to exit the command line interface.

Here's a glimpse at my gruntfile:

(gruntfile content provided)

And here's a peek into my package.json file:

(package.json content provided)

UPDATE: RESOLVING THE INFINITE LOOP

While I haven't completely resolved the issue yet, progress has been made...

An oversight was discovered within my watch task:

    watch: {
scripts: {
    files: ['js/*.js'],
    tasks: ['concat','uglify'],
    options: {
        spawn: false,
    },
},

A crucial section was omitted:

watch: {
scripts: {
    files: ['js/*.js'],
    tasks: ['concat','uglify'],
    options: {
        spawn: false,
    },
},
css: {
      files: ['css/*.scss'],
      tasks: ['sass'],
      options: {
          spawn: false,
      },
    }
},

This omission was causing malfunctions within the watch task. The continuous loop issue has now been eliminated. Instead, the terminal displays:

(updated terminal logs provided)

Although it seems that nodemon is functioning properly, there is no indication of the watch task in action. Furthermore, when modifying my SCSS file, there are no observable changes. Ideally, I would like grunt-concurrent to manage both nodemon and watch simultaneously.

Should successful execution produce different output in the command line?

Appreciate any assistance!

Answer №1

Issue resolved by removing nodemon and watch from the grunt.registerTask code:

grunt.registerTask('default', ['concat','uglify','sass','watch','nodemon','concurrent:target']);

The redundant execution of nodemon and watch as default tasks while also trying to run concurrent:target was causing issues. Simply running concurrent:target already handles the concurrent execution of nodemon and watch.

The terminal output now displays:

Running "concat:dist" (concat) task

Running "uglify:build" (uglify) task
>> 1 file created 797.64 kB → 378.58 kB

Running "sass:dist" (sass) task

Running "concurrent:target" (concurrent) task
    Running "watch" task
    Waiting...
    Running "nodemon:dev" (nodemon) task
    [nodemon] 1.14.1
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching: *.*
    [nodemon] starting `node ./start.js`
    Express running → PORT 7777

Everything appears to be functioning correctly!

The updated Gruntfile now looks like this:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
    dist: {
        src: [
            'public/js/libs/*.js',
        ],
        dest: 'public/js/build/production.js',
        }
    },
    uglify: {
        build: {
            src: 'public/js/build/production.js',
            dest: 'public/js/build/production.min.js'
        }
    },
    sass: {
    dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'public/css/build/main.css': 'public/css/main.scss'
        }
      }
    },
    concurrent: {
        target: {
            tasks: ['nodemon', 'watch'],
            options: {
                logConcurrentOutput: true
            }
        }
    },
    watch: {
    scripts: {
        files: ['./public/js/*.js'],
        tasks: ['concat','uglify'],
        options: {
            spawn: false,
        },
    },
    css: {
          files: ['./public/css/*.scss'],
          tasks: ['sass'],
          options: {
              spawn: false,
          },
        }
    },
    nodemon: {
      dev: {
        script: './start.js'
      }
    },
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat','uglify','sass','concurrent:target']);

};

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

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Hey there fellow developers! I'm currently working on a simple Angular app that allows users to upload images to a gallery. However, I've encountered an issue while trying to upload the images to Firebase Storage. I keep getting an error mentioni ...

Loading JSON data from a file in an AngularJS service

Looking to retrieve JSON data from a file named driverStandings.json, which can be found in the structure from the provided image. I am utilizing a service API to fetch this information by using the code displayed below (refer to image). https://i.sstatic ...

The parental context is not bound to the isolated scope of the custom directive

Below is the custom directive implemented: (function() { angular.module('commentsDirective', []) .directive('mngComments', mngComments) function mngComments() { return { restrict: 'AE', ...

Adjusting canvas/webgl dimensions to match screen width and height

Hey, I'm currently working on resizing my canvas/webgl to fit the window's height and width at 100%. It works initially, but when I resize the window from small to large, it doesn't scale/fit properly anymore and remains small. Any suggestio ...

React - Trouble rendering JSON file

I am working on a row of react-icons. Once clicked, the icons should display content from a static .JSON file. I am trying to achieve the following functionalities: Change color when clicked Switch between the static .JSON content when clicked. I at ...

Assign a JavaScript variable upon clicking a polygon on Mapbox

I have a MapBox map that consists of approximately 800 polygons representing census tracts, created using TileMill. The map has been integrated into an HTML page alongside a D3.js chart. A drop-down menu on the page allows users to select one of the 800 ce ...

Issue with function execution within useEffect() not being triggered

I am facing an issue where two functions in my component are not being called every time it renders, despite my efforts. Placing these functions in the dependency array causes an infinite loop. Can anyone identify why they are not executing? function Por ...

What's the most effective method for isolating elements in HTML to prevent one element from impacting another?

I recently created a password form in HTML with some nice functions. However, after making a small adjustment, the CSS is causing the elements to shift when clicking on different input boxes. This results in the labels on the form moving slightly up and do ...

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Is there a way to convert this scenario? I am working on a project where the userID needs to be displayed in a specific format. The first 3 characters/numbers and last 3 characters/numbers should be visible, while the middle part should be replaced with ...

Building a Meteor query in MongoDB using $in operator while handling duplicate values

I have a collection of songs that I want to present to a user. Each song is associated with a specific id. The issue I am encountering is that some songs should be displayed multiple times. Currently, I am using the $in operator in my MongoDB query, but it ...

How to ensure NodeJS waits for a response before returning a value

I've come across a seemingly simple problem that I just can't seem to solve. My current project involves working with an asynchronous messaging bot. In this particular scenario, the bot is supposed to react to an event by calling a Restful API a ...

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...

Make real-time edits to JavaScript code on a webpage

Is there a method aside from using Firebug in the DOM view to edit live JavaScript embedded within an HTML page? For example, code like this within a .html file: <script type="text/javascript> // code here </script> Thank you. ...

What could be causing this error I'm receiving: instance versus prototype difference?

Can someone help me understand the difference between .prototype and regular instances in JavaScript? I am confused about why this code is not working and getting a type error: "undefined is not a function". I am experimenting with the Ninja() class and ...

Utilize data from a dynamically loaded component within a parent component in Vue.js

In my Vuejs application, I've implemented a wizard-type flow with dynamically loaded components. The parent component contains the Save button, while the child components have all the text fields. Upon clicking the Save button, I need to achieve two m ...

The ion-col with col-3 is causing a template parse error

Currently, I am facing an issue while trying to print data from a constructor. Everything is working fine until I added col-3 to ion-col. It seems like I missed including some module, but I am not sure which one. This is my home.ts file: import { Compone ...

What is the best way to handle variables in javascript?

After making an AJAX request, I expected the results to display when I select from the drop down menu. However, I encountered a problem where only a table is being displayed. I am confused as to why the data is not coming from the variables $grade (calcula ...

Every third item is selected using a JQuery selector

Currently, I am tackling the task of working with PHP loops to generate multiple li elements within a single ul. The issue arises when I attempt to display every fourth li upon clicking one of the preceding three li. My current implementation only toggles ...

Looking to enhance code readability using regular expressions

While I am not a programmer, I enjoy exploring and learning new things. Here is what I have: 1) My URL is structured like this: http://site.com/#!/show/me/stuff/1-12/ 2) I have a jQuery pagination script that displays the number of available pages. Each ...

"Unlocking the hidden powers within a directive: A guide to accessing inner

I have two directives called container and item. directive('container', function(){ return { replace: true, template: "<div>contains <p>...</p> </div>' } }); directive('item', fun ...