Grunt - sharing multiple JS files and viewing changes

A bit more new to Grunt, so please keep that in mind with your answers. I am trying to set up a task in Grunt that will concatenate any JS files in a directory called "custom" into one file named custom-concat.js

, however after running grunt watch

(which works fine without errors) nothing happens when I try to make changes to any of the files in my "custom" directory (ie the Console just sits in "wait ...." even after making changes to any JS files in the "custom" directory). Obviously there is something wrong with my task concat

, but I don't see that this is a problem. Can anyone see where the problem is? The complete grunt file is below:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    //pkg: grunt.file.readJSON('package.json'),

    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['scripts/custom/**/*.js'],
        dest: 'scripts/custom-concat.js',
      },
    },

    uglify: {
      build: {
        src: 'scripts/custom-concat.js',
        dest: 'scripts/custom.min.js'
      }
    },

    less: {
      options: {
        paths: ["css"]
      },
      files: {
        "styles.css": "less/styles.less"
      }
    },

    watch: {
      scripts: {
          files: 'scripts/**/*.js',
          task: ['concat', 'uglify:build']
      },

      styles: {
          files: 'css/less/**.less',
          task: 'less'
      }
    }

  });

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

  // Default task(s).
  grunt.registerTask('default', ['concat', 'uglify']);

};

      

+3


source to share


1 answer


As far as I can see, there are three small problems with your watch work:

  • The correct attribute for a watch is taskS not a task
  • If you want to run watch tasks right at the beginning, use the parameters {atBegin: true}
  • The view function keeps track of the script folder. However, this folder will also contain your jumbo and jumbo files. Thus, this task will run in an endless loop. You should probably only be looking at scripts / custom folder

So your clock task should look something like this:



watch: {
  scripts: {
      files: 'scripts/custom/**/*.js',
      tasks: ['concat', 'uglify:build'],
      options: {
          atBegin: true
      }
  },

  styles: ...
}

      

Github grunt-contrib-watch

+4


source







All Articles