javascript - 如何更改使用 Grunt 处理 JS 文件的 WordPress 主题？

Question

我正在尝试更改我正在使用的 WordPress 主题中的 JS 文件。主题使用Grunt打包所有CSS和JS文件。我以前从未使用过 Grunt，所以我想知道如何更新一些 JS 文件。

有没有简单的方法可以做到这一点？

根据我的在线研究，我似乎需要在我的服务器上安装一个软件包 - 这是正确的吗？非常感谢任何指示或帮助。我已将主题使用的 Grunt.js 文件粘贴到下面。

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            dist: {
                files: {
                    'js/vendor-min.js': [
                        'js/jquery.mixitup.js',
                        'js/jquery.stapel.js',
                        'js/owl.carousel.js',
                        'js/jquery.magnific-popup.js',
                        'js/modals.js',
                        'js/auth.js',
                        'js/jquery.mousewheel.js',
                        'js/jquery.mCustomScrollbar.js',
                        'js/placeholder.js',
                        'extensions/mail_subscription/js/mail_subscription.js',
                        'js/plugins.js',
                        'js/theme.js'

                    ],
                    'js/widgets/min/jflickrfeed.min.js': [
                        'js/widgets/jquery.jflickrfeed.js'
                    ]
                }
            }
        },
        watch: {
            scripts: {
                files: [
                    'js/*.js',
                    'extensions/mail_subscription/js/*.js'
                ],
                tasks: ['uglify']
            },
            styles: {
                files: [
                    '**/*.scss'
                ],
                tasks: ['compass']
            }
        },
        jshint: {
            files: [
                'js/theme.js'
            ],
            options: {
                globals: {
                    jQuery: true
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default', ['watch']);

};

Answer 1

我建议您需要先安装项目的依赖项，然后您可以使用Grunt任务来编译 Assets 。您将需要NodeJS和 Grunt-cli (npm install -g grunt-cli)已安装。

1. cd 进入主题目录
2. 运行npm install(这将安装主题的所有依赖项)
3. 运行grunt watch(这将开始 grunt 监视文件的更改)
4. 在 grunt watch 任务运行时编辑 JS/CSS 文件，保存后您应该会看到重新编译的 JS/CSS

如果您不希望 grunt watch 一直运行，您可以手动运行 grunt uglify、grunt jshint 和grunt compass 单独执行任务。