grunt-contrib-copy syntax for process option confusion

Question

I'm trying to replace some placeholders in different files as I copy. My gruntfile works fine, but adding in the process option to do the replacements, it's just not working. Below is the relevant section of my gruntfile:

grunt.initConfig({

    copy: {
        js: {
            files: [{
                expand: true,
                cwd: 'src/wp-content/themes/pilau-starter/',
                src: ['**/*.js'],
                dest: 'public/wp-content/themes/pilau-starter/'
            }],
            options: {
                process: function ( content ) {
                    console.log( content );
                    content = content.replace( /pilauBreakpointLarge/g, breakpoints.large );
                    content = content.replace( /pilauBreakpointMedium/g, breakpoints.medium );
                    return content;
                }
            }
        },
    }

});

The paths can be understood in the context of the code on GitHub: https://github.com/pilau/starter (the public directory isn't committed to the repo because it's a starter theme). Those paths are variables in my original Gruntfile, and are working fine in all other tasks.

All the vars are set up OK. I've included the console.log( content ) to check if the process function's actually running - it doesn't seem to be, so I guess it's basic syntax.

There's an answer (https://mcmap.net/q/1916744/-using-regex-in-grunt-contrib-copy-39-s-quot-process-quot-option-not-working) which seems to address this, but as far as I can tell, that way of doing it is simply bad JS syntax - not sure how it got marked as right.

--verbose output for running the copy task:

Running "copy:js" (copy) task
Verifying property copy.js exists in config...OK
Files: src/wp-content/themes/pilau-starter/js/admin.js -> public/wp-content/themes/pilau-starter/js/admin.js
Files: src/wp-content/themes/pilau-starter/js/flickity.js -> public/wp-content/themes/pilau-starter/js/flickity.js
Files: src/wp-content/themes/pilau-starter/js/global.js -> public/wp-content/themes/pilau-starter/js/global.js
Files: src/wp-content/themes/pilau-starter/js/modernizr.js -> public/wp-content/themes/pilau-starter/js/modernizr.js
Files: src/wp-content/themes/pilau-starter/js/picturefill.js -> public/wp-content/themes/pilau-starter/js/picturefill.js
Files: src/wp-content/themes/pilau-starter/js/respond.js -> public/wp-content/themes/pilau-starter/js/respond.js
Options: processContent=false, processContentExclude=[], process=undefined
Options: processContent=false, processContentExclude=[], process=undefined
Copying src/wp-content/themes/pilau-starter/js/admin.js -> public/wp-content/themes/pilau-starter/js/admin.js
Reading src/wp-content/themes/pilau-starter/js/admin.js...OK
Writing public/wp-content/themes/pilau-starter/js/admin.js...OK

Canfield

What's the output if you run the task with the --verbose flag? Also, the nonull option can be helpful when debugging. – Adsorbate

Which version of the grunt-contrib-copy are you using? You can try to use processContent instead of process because it was used in v0.4.1 and earlier. You can also try to console log your breakpoints.large and breakpoints.medium maybe they are not correctly set in your config... – Trappings

Are files being copied to the output when this runs? +1 on the --verbose suggestion. – Biquarterly

I tested your Gruntfile extract (with hard-coded variables) and it works perfectly as intended (copies while replacing, logs content). So I would suspect an incorrect variable, most probably srcThemeDir as if copy finds no file, process is not executed and you get no log, as you described. Where do you define the variables? – Bounty

Apologies for having undeclared vars in there, I've edited and replaced them with the actual paths. Those paths work for everything else. I've also added --verbose output - I'm guessing process=undefined is the issue? Everything else is working - my edits are copied from src/ to /public fine. breakpoints is logging fine. – Canfield

Answer 1

Your version of grunt-contrib-copy is 0.4.0. As correctly point out by @nemesv above the property name to use in this version would be processContent not process.

I cloned your repo and switched to json-breakpoints branch. And ran grunt copy:js and it replaced the content.

Now,when you run grunt copy:js --verbose it will still show this

processContent is logged undefined because grunt uses JSON.stringify to log a value. And JSON.stringify returns undefined when you pass it a function definition.

---

If you are interested, here's the method reponsible for logging all the option

    Log.prototype.writeflags = function(obj, prefix) {
        var wordlist;
        if (Array.isArray(obj)) {
            wordlist = this.wordlist(obj);
        } else if (typeof obj === 'object' && obj) {
            wordlist = this.wordlist(Object.keys(obj).map(function(key) {
                var val = obj[key];
                return key + (val === true ? '' : '=' + JSON.stringify(val));
            }));
        }
        this._writeln((prefix || 'Flags') + ': ' + (wordlist || '(none)'.cyan));
        return this;
    };

Jaconet

Answer 2

This doesn't appear to be an issue with the process option at all, but more an issue with srcThemeDir. I would log it to make sure you know exactly what it is, as it appears that it is causing the copy task to not find any files (and therefore not call the process function).

Urbina

Sorry, forgot to switch that out. I've replaced it with the value it's set to. The var works fine for everything else. Also see --verbose output in edit above, too - files are being found OK it seems. Any edits I make are copied - just the replacement isn't happening. – Canfield