Search code examples
javascriptgruntjsgrunt-contrib-watchgrunt-contrib-uglifygruntfile

Grunt task generates a loop in my console


I use the task uglify, cssmin and others grunt tasks.

For example, if I make just a change in my javascript or css files... the console shows me a loop about ten times: enter image description here

... ETC

All changes and tasks works perfectly, but this curious loop is very strange.

This is my Gruntfile.js:

    //Gruntfile.js
    module.exports = function (grunt) {
    grunt.initConfig({

    // Watch task config
    watch: {
      sass: {
        files: "scss/*.scss",
        tasks: ['sass']
      },
      cssmin: {
        files: "css/*.css",
        tasks: ['cssmin']
      },
      uglify: {
        files: "js/*.js",
        tasks: ['uglify']
      }
    },

    // Sass task config
    sass: {
        dev: {
            files: {
                // fichero destino  // fichero .scss
                "css/custom.css" : "scss/custom.scss"
            }
        }
    },

    // BrowserSync task config
    browserSync: {
      default_options: {
        bsFiles: {
          src: [
            "css/*.css",
            "js/*.js",
            "*.html"
          ]
        },
        options: {
          watchTask: true,
          proxy: "tutorialmaterialize.dev"
          }
        }
      },

    // UnCSS task config  
    uncss: {
        dist: {
            options: {
               //Estilos que queremos limpiar
               stylesheets : ['css/materialize.min.css'],

               //Estilos que no queremos limpiar
               ignoreSheets: [/custom.css/], 
            },
            files: {
                    //Archivo css de salida    //Scanea las clases, ids, etc de este html
                    'css/materialize.min.css': ['index.html']
            }
        }
    },

    // Cssmin task config
    cssmin: {
      options: {
        shorthandCompacting: false,
        roundingPrecision: -1
      },
      target: {
        files: {//Fichero combinado   //Ficheros que vamos a combinar, 2 .css
                'css/allcss.min.css': ['css/custom.css', 'css/materialize.min.css']
        }
      }
    },

    //Uglify task config  
    uglify: {
      build: {
        src: 'js/custom.js',//Ruta de fichero de entrada
        dest: 'js/custom.min.js'//Ruta del fichero minificado
      }
    }

  });

  //Cargamos los grunt plugins
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-uncss');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');

 //Default task
 grunt.registerTask('default', ['browserSync', 'watch']);
};

How can i fix this? Thanks you.


Solution

  • Seems like the file output by uglify is being watched for changes, triggering uglify again, and so on...

    Note that watch is configured to watch every file in the directory js, and uglify is configured to output the results into js/custom.min.js.

    Change one of these, and the loop will stop.

    For example (depending on what watch plugin you're using), you can probably change the configuration of watch to watch the directory, excluding this single file, using the array and ! syntax, like this:

    watch: {
      uglify: {
        files: ["js/*.js", "!js/custom.min.js"],
        tasks: ['uglify']
      }
    },