使用Grunt.js连接PHP文件和JavaScript文件

4

我在尝试使用Grunt.js文件时遇到了问题。目前,我已经将它设置为仅连接所有php函数文件,并决定由于我的许多工作项目都使用Bootstrap,仅连接我将使用的javascript文件。然而,当我设置它时,希望我设置正确了,我的grunt执行未创建/编辑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网站上的文档,但是要么是我没有正确理解,要么就是我做错了什么。

1个回答

4

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

要修复它,只需避免在jsphp目标的dist对象中嵌套srcdest。例如:

更新后的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-contrib-concat 文档中关于多目标示例配置以及grunt文档中有关 任务配置和目标的更多信息。

  2. 注意:如果在将合并的结果文件压缩时遇到任何问题,您可能需要在您的separator值中包含一个分号。更多信息请参见此处。它说:

连接的文件将在此字符串上连接。如果您正在使用缩小器后处理连接的JavaScript文件,则可能需要使用分号“;\n”作为分隔符。


我想感谢您。这100%有效。我确实不得不用“;”替换“rn”以获得正确的格式。感谢您抽出时间研究并纠正它! - Ishio

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接