连接 php 文件和 Javascript 与 Grunt.js

Concatenating php files and Javascript with Grunt.js

我在尝试让我的 Grunt.js 文件工作时遇到问题。目前，我将其设置为只连接我所有的 php 函数文件，并决定因为我的很多工作项目都使用 Bootstrap，所以只连接我将要使用的 javascript 文件.然而，当我设置它时，希望我确实设置正确，我的 grunt 执行不会 create/edit javascript 最终目标文件，也不会 php 函数文件。我不确定我做错了什么，但这是以下代码：

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']);

};

我的 package.json 如下（我知道我的 grunt.js 中还没有使用 jshint 或 uglify，我只是一次测试一个）。

{
  "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"
  }
}

我已经尝试通读 grunt 网站上的文档，但要么我没有正确理解某些内容，要么我做的事情完全错误

您 Gruntfile.js 的配置几乎正确。

要修复它，只需避免在 js 和 php 目标的 dist 对象中嵌套 src 和 dest。例如：

已更新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']);

};

更多信息：

  1. 查看 grunt 文档中 multiple-targets in the grunt-contrib-concat documentation and Task Configuration and Targets 的示例配置以获取更多信息。

  2. 注意：如果您在 uglify 串联结果文件时遇到任何问题，您 可能 需要在您的 separator 值中包含一个分号。有关详细信息，请参阅 here。上面写着：

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.