Concatenating php files and Javascript with Grunt.js

Question

I am having an issue trying to get my Grunt.js file to work. Currently I have it set up to just concatenate all my php function files, and decided since a lot of my work projects use Bootstrap, to concatenate only the javascript files I'll be using. However, when I set it up, hoping I did set it up correctly, my grunt execution does not create/edit the javascript final destination file, nor the php functions file. I am not sure what I have done incorrectly but here is the following code:

module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            js: {
                options: {
                    separator: 'rn'
                },
                dist: {
                    src: [
                        // Comment or uncomment any Bootstrap JS files
                        // you will not be using
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/alert.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/button.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/carousel.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/collapse.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/dropdown.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/modal.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/phantom.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/popover.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/qunit.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/scrollspy.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tether.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tab.js',
                        'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/tooltip.js'
                    ],
                    dest: 'wp-content/themes/base_theme/assets/js/required/bootstrap/bootstrap.min.js'
                }
            },
            php: {
                options: {
                    stripBanners: true,
                    separator: '\n?>\n',
                },
                dist: {
                    src: [
                        // To create a new location, follow pattern below
                        // Comment out what you don't need a re-concat
                        'wp-content/themes/base_theme/assets/functions/basic.php',
                        'wp-content/themes/base_theme/inc/custom-header.php',
                        'wp-content/themes/base_theme/inc/customizer.php',
                        'wp-content/themes/base_theme/inc/extras.php',
                        'wp-content/themes/base_theme/inc/jetpack.php',
                        'wp-content/themes/base_theme/inc/template-tags.php',
                        'wp-content/themes/base_theme/inc/wpcom.php',
                        'wp-content/themes/base_theme/assets/functions/bootstrap-nav.php',
                        'wp-content/themes/base_theme/assets/functions/enqueue.php'
                        'wp-content/themes/base_themey/assets/functions/custom-post-type.php',
                        'wp-content/themes/base_theme/assets/functions/internal-template.php',
                        'wp-content/themes/base_theme/assets/functions/custom-taxonomy.php',
                        'wp-content/themes/base_theme/assets/functions/acf.php',
                        'wp-content/themes/base_theme/assets/functions/custom.php'
                        'wp-content/themes/base_theme/assets/functions/custom-sidebar.php'
                        ],
                    dest: 'wp-content/themes/base_theme/functions-mod.php'
                }
            }
        }
});

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-concat');

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

};

My package.json is the following (I know I'm not using jshint or uglify as of yet in my grunt.js, I am just testing one at a time).

{
  "name": "base_theme",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "~1.0.0",
    "grunt-contrib-jshint":  "~0.8.0",
    "grunt-contrib-uglify":  "~0.2.7"
  }
}

I've tried reading through the documentation on grunt's website, but either I"m not understanding something correctly, or I am just doing something completely wrong

score 4 · Accepted Answer · answered Dec 28 '16 at 22:38

Your config for Gruntfile.js is almost correct.

To fix it, simply avoid nesting src and dest in a dist object for both the js and php targets. For example:

Updated Gruntfile.js:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            js: {
                options: {
                    separator: 'rn'
                },
                //dist: { <-- REMOVE the 'dist' object.
                src: [
                    // Comment or uncomment any Bootstrap JS files
                    // you will not be using
                    'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/alert.js',
                    'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/button.js',
                    'wp-content/themes/base_theme/assets/js/required/bootstrap/plugins/carousel.js'
                    // ...
                ],
                dest: 'wp-content/themes/base_theme/assets/js/required/bootstrap/bootstrap.min.js'
            },
            php: {
                options: {
                    stripBanners: true,
                    separator: '\n?>\n',
                },
                //dist: { <-- REMOVE the 'dist' object here too.
                src: [
                    // To create a new location, follow pattern below
                    // Comment out what you don't need a re-concat
                    'wp-content/themes/base_theme/assets/functions/basic.php',
                    'wp-content/themes/base_theme/inc/custom-header.php',
                    'wp-content/themes/base_theme/inc/customizer.php'
                    // ...
                ],
                dest: 'wp-content/themes/base_theme/functions-mod.php'
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-concat');

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

};

Further info:

Take a look at the example config for multiple-targets in the grunt-contrib-concat documentation and Task Configuration and Targets in the grunt documentation for further info.
Note: If you encounter any issues when you uglify the concatenated resultant files you may need to include a semicolon in your separator values. See here for more info. It reads:

Concatenated files will be joined on this string. If you're post-processing concatenated JavaScript files with a minifier, you may need to use a semicolon ';\n' as the separator.

I want to thank you. This worked 100% I did have to replace `rn` with `;` to get the format correct. Thank you for taking the time out to look at this and correct it! — Ishio, Dec 29 '16 at 14:43

Concatenating php files and Javascript with Grunt.js

1 Answers1

Updated Gruntfile.js:

Further info: