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://stackoverflow.com/a/28600474/1087660) 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

What's the output if you run the task with the `--verbose` flag? Also, the `nonull` option can be helpful when debugging. — steveax, Jun 01 '15 at 00:17
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... — nemesv, Jun 01 '15 at 05:43
Are files being copied to the output when this runs? +1 on the `--verbose` suggestion. — James, Jun 01 '15 at 16:22
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? — Xavier Priour, Jun 01 '15 at 23:21
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. — Steve Taylor, Jun 05 '15 at 19:21

score 2 · Accepted Answer · answered Jun 07 '15 at 13:33

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.

original-content replaced-content

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

cli

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;
    };

score 0 · Answer 2 · answered Jun 05 '15 at 14:32

0

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).

answered Jun 05 '15 at 14:32

wjohnsto

4,323
2
14
20

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. – Steve Taylor Jun 05 '15 at 23:23

grunt-contrib-copy syntax for process option confusion

2 Answers2