How to use array variable properly in gruntfile.js

Question

Trying to use a predefined array inside of a grunt file, thought using this.js_paths would work, but doesn't seem to work as I'm getting the error, "Cannot read property IndexOf of undefined" when it comes to trying to uglify the scripts. How can I link the js_paths variable to the files src property properly instead of copying the array into the files. Would like to define it separately at the top. Is this possible?

module.exports = function(grunt) {

    // loadNpmTasks from package.json file for all devDependencies that start with grunt-
    require("matchdep").filterDev("grunt-*", './package.json').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        js_paths: [
            'inc/header1/js/*.js', 
            '!inc/header1/js/*.min.js', 
            'inc/header2/js/*.js', 
            'inc/header2/js/*.js', 
            '!inc/header2/js/*.min.js',
            'js/*.js', 
            '!js/*.min.js'
        ],

        uglify: {
            options: {
                mangle: true
            },
            build: {
                files: [{
                  expand: true,
                  src: this.js_paths,
                  rename: function(dst, src) {
                    return src.replace('.js', '.min.js');
                  }
                }]
            }
        },
        watch: {
            scripts: {
                files: ['inc/header1/js/*.js', 'inc/header2/js/*.js', 'js/*.js'],
                tasks: ['uglify'],
                options: {
                    spawn: false,
                }
            }
        }
    });

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

Preferrably would like to use the same array js_paths in the watch files (since it's required there), if that makes sense? Still kinda new to using gruntfile.js

Answer 1

Utilize the Templates syntax. It's described in the docs as following:

Templates

Templates specified using <% %> delimiters will be automatically expanded when tasks read them from the config. Templates are expanded recursively until no more remain.

Essentially, change this.js_paths to '<%= js_paths %>' in your uglify task.

For instance:

// ...
uglify: {
  options: {
    mangle: true
  },
  build: {
    files: [{
      expand: true,
      src: '<%= js_paths %>',              // <-----
      rename: function(dst, src) {
        return src.replace('.js', '.min.js');
      }
    }]
  }
},
// ...

Likewise for your watch task too.

For instance:

watch: {
    scripts: {
        files: '<%= js_paths %>',          // <-----
        tasks: ['uglify'],
        options: {
            spawn: false,
        }
    }
}