Mengoptimumkan pembangunan WordPress dengan Grunt-tutorial js-php.cn

使用 Grunt 优化 WordPress 开发

Dalam tutorial ini, kami akan mempelajari cara menggunakan Grunt secara khusus untuk membantu dan mempercepatkan aliran kerja pembangunan WordPress anda.

Grunt ialah pelari tugas JavaScript yang dipasang melalui NPM dan berjalan pada pelayan anda. Untuk menggunakan maklumat dalam tutorial ini, anda memerlukan akses baris arahan ke pelayan. Demi ringkasnya, saya mengesyorkan anda merujuk kepada tutorial ini untuk mendapatkan Grunt, berjalan dan sedia untuk digunakan.

Grunt ialah pelari tugas yang terbukti yang boleh digunakan dalam pelbagai cara pada pelbagai platform yang berbeza. Di sini, kita akan melihat untuk menentukan asas kukuh pembangunan WordPress.

Tugas biasa

Komuniti Grunt sangat kuat, yang telah membawa kepada pembangunan katalog besar pemalam. Sangat mudah untuk tersesat dan menghabiskan banyak masa mencari dan menyemak yang mana untuk digunakan.

Jadi apakah beberapa tugas biasa yang perlu dicapai atau disediakan oleh tema atau pemalam WordPress?

Setempatkan rentetan bahasa menggunakan ciri terjemahan WordPress
Pengurusan fail aset. Iaitu, menggunakan versi fail JavaScript dan CSS yang dibangunkan dan diperkecil.

Penyetempatan

Grunt mempunyai pakej penyetempatan khusus WordPress yang sangat berjaya dipanggil grunt-wp-i18n. Pakej Grunt ini tidak ternilai kerana ia akan mengimbas folder tema/plugin anda untuk semua rentetan terjemahan dan menyusun fail .pot di lokasi yang ditentukan. Fail .pot ini kemudiannya boleh digunakan untuk menukar .po dan .mo fail , supaya pengguna lain boleh menterjemah tema/pemalam anda.

.pot 文件。然后可以使用此 .pot 文件转换 .po 和 .mo 文件，以便其他用户翻译您的主题/插件。

要配置包，请将以下内容添加到 Gruntfile.js initConfig 选项中：

makepot: {
    target: {
        options: {
            include: [
                'path/to/some/file.php'
            ],
            type: 'wp-plugin' // or `wp-theme`
        }
    }
}

Salin selepas log masuk

然后像这样调用 Grunt 任务（在 Gruntfile.js 文件夹中）：

grunt makepot

Salin selepas log masuk

正在扫描您的整个文件夹，并且所有字符串都符合 pot 文件。

资产文件

所有主题和插件都定期使用 JavaScript 和 CSS 文件。不幸的是，很多时候对文件的开发和生产版本的需求被忽视。

根据 WordPress 本身的提示，我的目标是确保我已完全评论并缩小了文件：

文件名.js
文件名.min.js
文件名.css
文件名.min.css

为什么？我想知道这些文件中发生了什么，但我也想知道我的访问者正在获得这些文件的优化版本。

要在没有某种形式的任务运行程序的情况下执行此操作，意味着在开发过程中切换在 WordPress 中注册的资产 URL 以查看更改后的未缩小版本，在发布更新之前使用某种形式的 JavaScript 和 CSS 压缩器，然后切换返回已注册的 URL。这一点也不好玩。

借助 Grunt，您可以使用 Uglify 包动态缩小和优化 JavaScript 文件，为了进一步使用 CSS，我们还可以使用 Sass 任务将 Sass 文件动态编译为 CSS。就其价值而言，我使用 Sass，因为 WordPress 在底层使用的是 Sass，但 Grunt 也有一个 LESS 编译器。

uglify: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            report: 'gzip'
        },
        files: {
            'assets/js/filename.min.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            beautify: true,
            compress: false,
            mangle: false
        },
        files: {
            'assets/js/filename.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    }
}

Salin selepas log masuk

sass: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            style: 'compressed'
        },
        files: [{
            expand: true,
            cwd: 'assets/scss',
            src: [
                '*.scss'
            ],
            dest: 'assets/css',
            ext: '.min.css'
        }]
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'assets/scss',
            src: [
                '*.scss'
            ],
            dest: 'assets/css',
            ext: '.css'
        }]
    }
}

Salin selepas log masuk

提示：如果使用 sass 任务，请将 .sass-cache 添加到 .gitignore 以防止将编译器缓存添加到您的存储库中。

高级任务

我们已经介绍了 Grunt 可以帮助 WordPress 开发的两个关键领域，但让我们更进一步，看看使用任务运行程序的额外功能。

查看文件

我们已经提供了处理文件的任务，为什么不对其进行优化呢？通过上面的任务，我们每次进行更改时都需要运行 grunt ***Untuk mengkonfigurasi pakej, tambahkan yang berikut pada pilihan Gruntfile.js initConfig:

grunt watch

Salin selepas log masuk

Kemudian panggil tugas Grunt (dalam folder Gruntfile.js) seperti ini:

jshint: {
    files: [
        'assets/js/filename.js',
        'assets/dynamic/paths/**/*.js'
    ],
    options: {
        expr: true,
        globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
    }
}

Salin selepas log masuk

Seluruh folder anda sedang diimbas dan semua rentetan sepadan dengan fail periuk.

Fail Aset

Semua tema dan pemalam kerap menggunakan fail JavaScript dan CSS. Malangnya, banyak kali keperluan untuk pembangunan dan versi pengeluaran fail diabaikan.

Mengikuti petua dari WordPress sendiri, matlamat saya adalah untuk memastikan saya telah mengulas sepenuhnya dan mengecilkan fail:

Nama fail.js

Nama fail.min.js

Nama fail.css

Nama fail.min.css

kenapa? Saya ingin tahu perkara yang berlaku dalam fail ini, tetapi saya juga ingin tahu bahawa pelawat saya mendapat versi yang dioptimumkan bagi fail ini. 🎜 🎜Untuk melakukan ini tanpa beberapa bentuk pelari tugas bermakna menukar URL aset yang didaftarkan dalam WordPress semasa pembangunan untuk melihat versi yang tidak dikecilkan yang telah diubah, sebelum menerbitkan kemas kini menggunakan beberapa bentuk pemampat JavaScript dan CSS, dan kemudian beralih kembali ke URL berdaftar. Ini tidak menyeronokkan sama sekali. 🎜 🎜Dengan Grunt, anda boleh menggunakan pakej Uglify untuk mengecilkan dan mengoptimumkan fail JavaScript secara dinamik Untuk menggunakan CSS lagi, kami juga boleh menggunakan tugas Sass untuk menyusun fail Sass ke dalam CSS secara dinamik. Untuk apa yang patut, saya menggunakan Sass kerana WordPress menggunakan Sass di bawah hud, tetapi Grunt juga mempunyai pengkompil yang KURANG. 🎜

assets/
├── js/
|   ├── filename.js
├── fields/
    ├── text/
    |   ├── js/
    |       ├── text.js
    ├── select/
        ├── js/
            ├── select.js

Salin selepas log masuk

uglify: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            report: 'gzip'
        },
        files: {
            'assets/js/filename.min.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            beautify: true,
            compress: false,
            mangle: false
        },
        files: {
            'assets/js/filename.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    }
}

Salin selepas log masuk

🎜Petua: Jika menggunakan tugasan sass, tambahkan .sass-cache pada < kelas kod =" inline">.gitignore untuk menghalang cache pengkompil daripada ditambahkan pada repositori anda. 🎜 🎜Tugas lanjutan🎜 🎜Kami telah merangkumi dua bidang utama di mana Grunt boleh membantu dengan pembangunan WordPress, tetapi mari kita melangkah lebih jauh dan melihat keupayaan tambahan menggunakan pelari tugas. 🎜 🎜Lihat fail🎜 🎜Kami sudah menyediakan tugas untuk memproses fail, mengapa tidak mengoptimumkannya? Dengan tugasan di atas, kita perlu menjalankan grunt *** setiap kali kami membuat perubahan, mengapa tidak memasang pakej grunt-contrib-watch? Setelah dikonfigurasikan, ini akan mengarahkan Grunt untuk menjalankan tugas ini setiap kali perubahan fail dikesan. 🎜

copy: {
    dist: {
        src: 'readme.txt',
        dest: 'README.md'
    }
}

Salin selepas log masuk

🎜Urgent! Tiada lagi menjalankan Grunt setiap kali fail berubah, cuma mulakan pemerhati dan edit fail. 🎜 🎜Kualiti JavaScript🎜 🎜Bukankah bagus untuk menjalankan JSHint pada fail JavaScript kami untuk menjejaki ralat tersebut atau koma bertitik yang hilang? Hanya pasang tugas grunt-contrib-jshint dan pasangkannya pada tugas pemerhati sebelum menyusun fail. Grunt kini akan memberi amaran kepada anda tentang sebarang ralat dan berhenti menjalankan tugas selanjutnya. 🎜

curl: {
    'google-fonts-source': {
        src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******',
        dest: 'assets/vendor/google-fonts-source.json'
    }
}

Salin selepas log masuk

🎜Gabungkan aset🎜 🎜Ini amat berguna untuk saya apabila membangunkan rangka kerja Fluent. Rangka Kerja Fasih ialah satu set kelas yang termasuk mencipta halaman pilihan dan kotak meta. 🎜 🎜Untuk memudahkan pembangunan medan individu, saya mempunyai struktur fail seperti ini: 🎜

phpdocumentor: {
    dist: {
        options: {
            ignore: 'node_modules'
        }
    }
}

Salin selepas log masuk

🎜Ini menjadikannya sangat mudah untuk mencari kawasan yang saya sedang usahakan dan menukar hanya JavaScript yang diperlukan untuk kawasan itu. 🎜

从用户的角度来看，我只想提供一个 JavaScript 文件，其中包含所有常见的和基于字段的 JavaScript。让我们使用 grunt-contrib-uglify 任务来完成此任务。

uglify: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            report: 'gzip'
        },
        files: {
            'assets/js/filename.min.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            beautify: true,
            compress: false,
            mangle: false
        },
        files: {
            'assets/js/filename.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    }
}

Salin selepas log masuk

通过此配置，通过 JSHint 后，会将所有 JavaScript 文件合并为开发文件和生产文件。

复制文件

WordPress.org 需要 Readme.txt 文件来详细说明主题/插件信息，但 GitHub 和 BitBucket 等版本控制系统更喜欢 Readme.md 文件。我们不需要手动复制或保持这些文件同步。让 Grunt 帮我们做这件事吧！

安装 grunt-contrib-copy 任务并按如下方式配置：

copy: {
    dist: {
        src: 'readme.txt',
        dest: 'README.md'
    }
}

Salin selepas log masuk

下载数据

另一个有用的 Grunt 任务是 Grunt cURL 包。 Fluent 框架字段之一需要访问 Google Fonts API 数据。按照 Google 的建议加载此内容将是每次加载页面时的 HTTP 请求。或者，如果您手动复制文件内容，则可能会面临过时的风险。两全其美的方法是使用 Grunt Curl 来保存请求并获取更新。

为了保持最新状态，我们只需加载 cURL 任务，为其提供从中获取字体数据的 URL 以及保存响应的位置。

curl: {
    'google-fonts-source': {
        src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******',
        dest: 'assets/vendor/google-fonts-source.json'
    }
}

Salin selepas log masuk

现在，每次我们运行任务时，都会下载最新的字体列表，并将其保存到框架文件中。

文档

此任务最适合用于许多开发人员都会窥探的主题、插件和框架。对于那些探索代码库的人来说，上下文从来都不是坏事。

PHP Documentor 是一个用于自动生成该数据的出色工具。它还可以帮助您专注于在代码中提供有意义的 DocBlock。

phpdocumentor: {
    dist: {
        options: {
            ignore: 'node_modules'
        }
    }
}

Salin selepas log masuk

提示：将 docs 添加到您的 .gitignore 如果您不想提交文档及其所有缓存文件。

把它们放在一起

这是用于执行上述任务的 package.json 和 Gruntfile.js。

package.json

{
    "name": "package-name",
    "version": "1.0.0",
    "description": "...",
    "main": "filename.php",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "http://repo-url.com"
    },
    "keywords": [
        "wordpress"
    ],
    "author": "Your Name",
    "license": "GPL",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-jshint": "~0.8.0",
        "grunt-contrib-sass": "^0.7.3",
        "grunt-contrib-uglify": "~0.3.3",
        "grunt-curl": "*",
        "grunt-phpdocumentor": "~0.4.1",
        "grunt-wp-i18n": "~0.4.0"
    }
}

Salin selepas log masuk

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        copy: {
            dist: {
                src: 'readme.txt',
                dest: 'README.md'
            }
        },
        curl: {
            'google-fonts-source': {
                src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******',
                dest: 'assets/vendor/google-fonts-source.json'
            }
        },
        makepot: {
            target: {
                options: {
                    include: [
                        'path/to/some/file.php'
                    ],
                    type: 'wp-plugin' // or `wp-theme`
                }
            }
        },
        jshint: {
            files: [
                'assets/js/filename.js',
                'assets/dynamic/paths/**/*.js'
            ],
            options: {
                expr: true,
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            }
        },
        phpdocumentor: {
            dist: {
                options: {
                    ignore: 'node_modules'
                }
            }
        },
        sass: {
            dist: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    style: 'compressed'
                },
                files: [{
                    expand: true,
                    cwd: 'assets/scss',
                    src: [
                        '*.scss'
                    ],
                    dest: 'assets/css',
                    ext: '.min.css'
                }]
            },
            dev: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    style: 'expanded'
                },
                files: [{
                    expand: true,
                    cwd: 'assets/scss',
                    src: [
                        '*.scss'
                    ],
                    dest: 'assets/css',
                    ext: '.css'
                }]
            }
        },
        uglify: {
            dist: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    report: 'gzip'
                },
                files: {
                    'assets/js/filename.min.js' : [
                        'assets/path/to/file.js',
                        'assets/path/to/another/file.js',
                        'assets/dynamic/paths/**/*.js'
                    ]
                }
            },
            dev: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    beautify: true,
                    compress: false,
                    mangle: false
                },
                files: {
                    'assets/js/filename.js' : [
                        'assets/path/to/file.js',
                        'assets/path/to/another/file.js',
                        'assets/dynamic/paths/**/*.js'
                    ]
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-curl');
    grunt.loadNpmTasks('grunt-phpdocumentor');
    grunt.loadNpmTasks('grunt-wp-i18n');

    grunt.registerTask('default', [
        'jshint',
        'uglify:dev',
        'uglify:dist',
        'sass:dev',
        'sass:dist',
        'makepot',
        'copy'
    ]);

    grunt.registerTask('docs', [
        'phpdocumentor:dist'
    ]);

    grunt.registerTask('googlefonts', [
        'curl:google-fonts-source'
    ]);

};

Salin selepas log masuk

提示：添加 node_modules 和 npm-debug .log 到您的 class="inline">.gitignore 以防止任务作为关联文件添加到您的存储库中。

结论

正如您从上面的任务中看到的，Grunt 可用于帮助自动化 WordPress 开发，让您有更多时间专注于编写代码，而不是管理代码。

我们只详细介绍了 WordPress 的一些任务，但还有许多其他软件包可以满足项目特定需求，例如图像优化任务等等，所以去探索吧！

Grunt 现在是一个完善的任务运行器，并且文档与 WordPress 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？

资源

咕噜声
Node.js
Grunt 入门

使用的 Grunt 任务

JSHint 咕噜
咕噜丑化
咕噜萨斯
咕噜WPi18n
咕噜手表
咕噜复制
Grunt PHP 文档编写器
咕噜卷曲

Atas ialah kandungan terperinci Mengoptimumkan pembangunan WordPress dengan Grunt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!