gruntjsgrunt-contrib-uglifygruntfile

How to use array variable properly in gruntfile.js


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


Solution

  • 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,
            }
        }
    }