Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js:

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt);

  grunt.initConfig({

    uglify: {
      start: {
        files: {
          'js/script.min.js': ['js/script.js'],
        }
      }
    },

    imagemin: {
      build: {
        options: {
          optimizationLevel: 3
        },
        files: [{
          expand: true,
          src: ['img/sprite_svg/*.svg'],
        }]
      }
    },

    svgstore: {
      options: {
        includeTitleElement: false,
        svg: {
          style: 'display:none',
        },
        cleanup: [
          'fill',
        ],
      },
      default : {
        files: {
          'img/sprite.svg': ['img/sprite_svg/*.svg'],
        },
      },
    },

    watch: {
      livereload: {
        options: { livereload: true },
        files: ['build/**/*'],
      },
      scripts: {
        files: ['js/script.js'],
        tasks: ['js'],
        options: {
          spawn: false
        },
      },
      images: {
        files: [
          'img/sprite_svg/*.svg'
        ],
        tasks: ['img'],
        options: {
          spawn: false
        },
      },
      html: {
        files: ['./index.html'],
        // tasks: ['html'],
        options: {
          spawn: false
        },
      },
    },

    browserSync: {
      dev: {
        bsFiles: {
          src : [
            'img/sprite.svg',
            './index.html',
          ]
        },
        options: {
          watchTask: true,
          server: {
            baseDir: "./",
          },
          startPath: "index.html",
          ghostMode: {
            clicks: true,
            forms: true,
            scroll: false
          }
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');

  grunt.registerTask('default', [
    'js',
    'img',
    'browserSync',
    'watch'
  ]);

  grunt.registerTask('js', [
    'uglify'
  ]);

  grunt.registerTask('img', [
    'imagemin',
    'svgstore'
  ]);

};

I have installed both the uglify and imagemin npm packages, but I am encountering an error: Warning: Task "uglify" not found.

This issue arose after adding svgstore to the configuration, and I suspect it may be a syntax error. As a beginner in using Grunt, I'm unsure about what is causing this problem. Any assistance or guidance would be highly appreciated.

Answer №1

Can you tell me what the package.json file contains?

"load-grunt-tasks" automatically retrieves packages from both "dependencies" and "devDependencies" in the package.json, eliminating the need to manually use "grunt.loadNpmTasks".

Additionally, it is recommended to install "grunt-contrib-uglify" instead of just "uglify".

Answer №2

There are extra commas present after the last item in two arrays

grunt.registerTask('js', [
  'uglify' // <-- please remove this comma 
]);

grunt.registerTask('img', [
  'imagemin',
  'svgstore' // <-- it's best to remove this comma as well
]);

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

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

Retrieve the text input from the text field and display it as

Is there a way to display what users enter in a textfield when their accounts are not "Activated"? Here's an example: if(active == NULL);{ //I've attempted the following methods. //In this scenario, 'username' is the name of ...

Troubleshooting CSS Carousel Navigation Problems

{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; ...

Pause until various events from separate modules occur, and only then initiate the server

Currently, I am working on an application that consists of 2 distinct modules. One module deals with connecting to MongoDB while the other is responsible for connecting to Redis for session management. Each module has 2 events - error and connect. var ses ...

Even with the text field populated and clearly existing, Firefox is still throwing a null error when trying to retrieve it using

Hey there! I'm currently working on a sample HTML page and I'm facing an issue with retrieving data from a text field. No matter what I try, I keep encountering the following error: TypeError: document.getElementById(...) is null Let me share t ...

Using Node.js with PostgreSQL for EXISTS and SELECT 1 queries

Is there a more efficient way to check if a user already exists in my database? I usually run the following SQL query: SELECT * FROM users WHERE email = $1 and then check if the number of rows returned is greater than 0. However, I've heard that usin ...

Is it feasible to install a Node on Node-Red without an internet connection by simply copying the Node folder?

Can I transfer a node folder from the node_modules directory on one device to install it offline in a new device running node-red? ...

I am in search of a container that has full height, along with unique footer and content characteristics

I have set up a jsfiddle to demonstrate the scenario I am facing: There is a basic header, content, footer layout. Within the content-container is a messenger that should expand to a maximum of 100% height. Beyond 100% height, it should become scrollable. ...

Using jQuery to store the name of a Div in a variable and subsequently invoking it in a function

Recently, I've been grappling with a task involving storing a div name in a variable for easier editing and incorporating it into standard actions like show/hide. My code functions perfectly without the variables, but introducing them causes the div ...

creating a countdown timer for the carousel

While experimenting, I decided to create a basic carousel from scratch. Initially, I used onclick="function()" to cycle through the images. Later on, I attempted to replace it with onload="setInterval(function, 4000)", but it seems like something went wron ...

Juggling PHP scripts within javascript

Can you help me with a question I have? I am working on multiple JS scripts, such as this one: <script> $('#mapveto1').click(function() { $('#mapveto1').addClass('banned'); $('#map1').text('cobble ...

Why is the user's name showing as undefined? If I were to change the ID from "nam" to "name"?

I developed a basic messaging web application using node express socket.io. However, when I try to retrieve the user's name, it shows up as undefined. (Interestingly, if I modify the user id, then it works fine - but why is that?) app.js const app ...

Discover the best methods for accessing all pages on a Facebook account

I attempted to retrieve a list of all Facebook pages, but encountered an error. The error message states: 'request is not defined.' Here is the code snippet: var url = 'https://graph.facebook.com/me/accounts'; var accessToken = req.u ...

When using jQuery to focus on an input element, the cursor fails to show up

Looking to enhance user experience by focusing on an input element upon clicking a specific div. The HTML structure being used is as follows: <div class="placeholder_input"> <input type="text" id="username" maxlength="100" /> <div ...

Issues with Bootstrap offsetting columns within a fluid row

I am currently working on a fluid design layout, where I need to place form group elements inside the row-fluid with one specific condition - they must be aligned to the right side. <div class="row-fluid" style="background-color: #332619; color: #fff ! ...

Encountering a 404 error when running npm build for Shopify app development

I've recently developed a new application using the PHP Shopify App Template (https://github.com/Shopify/shopify-app-template-php). Running npm run dev works perfectly fine in my local development environment. However, when I attempt to deploy the a ...

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

The :not() exclusion in CSS property fails to exclude the class

I'm attempting to style all the links on my webpage in a particular way, except for those in the navigation bar. Despite trying to exclude the navbar links using a:not(.navbar), it seems that the styling still applies to all links, including Link 1 in ...

Pass data from the client side to be utilized in a NodeJS GET method

My current challenge involves sending data to my Node.js backend so that it can be used in a get request to an API. Here's the snippet from my Server.js file: Server.js const PORT = 8000 const axios = require('axios').default const express ...

Data transmission to the response was impossible following the failure of the pipeline

My current project involves querying data from a MySQL database, converting it to CSV format, and then downloading it as a CSV file. I am aiming to accomplish this using streams. res.set('Content-Type', 'text/csv') res.set(&apos ...