gruntjs - 使用 Grunt.js 连接 php 文件和 Javascript

标签 gruntjs grunt-contrib-concat

我在尝试让 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 网站上的文档,但要么我没有正确理解某些内容,要么我只是做错了事

最佳答案

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

要修复它,只需避免嵌套 srcdestdist js 的对象和 php目标。例如:

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

};

更多信息:
  • 查看 multiple-targets 的示例配置在 grunt-contrib-concat文档和 Task Configuration and Targets在 grunt 文档中了解更多信息。
  • 注意:如果您在使用 uglify 时遇到任何问题您连接的结果文件 5 月 需要在您的 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.

    关于gruntjs - 使用 Grunt.js 连接 php 文件和 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41365552/

    相关文章:

    ubuntu - 永远找不到其他包

    gruntjs - 如何识别页面集合中的当前页面?

    javascript - Symfony、grunt、requires.js 和 Assetic

    javascript - grunt 构建 css 编码

    javascript - 使用多级源映射调试 Javascript

    powershell - GruntJS Concat不起作用(超出了最大调用堆栈大小)

    javascript - 如何在包装函数中使用 grunt concat

    javascript - 是否有办法重复抓取 `pkg.json` 版本作为变量来替换 Grunt 中 `index.js` 文件的版本?

    javascript - Grunt 任务陷入无限循环

    xcode - 如何在 Xcode 构建阶段运行 Grunt 任务?