Grunt를 사용하여 WordPress 개발 최적화

이 튜토리얼에서는 특히 Grunt를 사용하여 WordPress 개발 작업 흐름을 돕고 속도를 높이는 방법을 배웁니다.

Grunt는 NPM을 통해 설치되고 서버에서 실행되는 JavaScript 작업 실행기입니다. 이 튜토리얼의 정보를 사용하려면 서버에 대한 명령줄 액세스가 필요합니다. 간결함을 위해 이 튜토리얼을 참조하여 Grunt를 시작하고 실행하고 사용할 수 있도록 준비하는 것이 좋습니다.

Grunt는 다양한 플랫폼에서 다양한 방식으로 사용될 수 있는 검증된 작업 실행기입니다. 여기에서는 WordPress 개발의 탄탄한 기반을 정의하는 방법을 살펴보겠습니다.

일반적인 작업

Grunt의 커뮤니티는 매우 강력하여 거대한 플러그인 카탈로그가 개발되었습니다. 길을 잃기 쉽고 어떤 것을 사용할지 검색하고 검토하는 데 많은 시간을 소비합니다.

그렇다면 WordPress 테마 또는 플러그인이 달성하거나 제공해야 하는 몇 가지 일반적인 작업은 무엇일까요?

1. WordPress 번역 기능을 사용하여 언어 문자열 현지화
2. 자산 파일 관리. 즉, 개발되고 축소된 버전의 JavaScript 및 CSS 파일을 사용하는 것입니다.

현지화

Grunt에는 grunt-wp-i18n이라는 매우 성공적인 WordPress 전용 현지화 패키지가 있습니다. 이 Grunt 패키지는 테마/플러그인 폴더에서 모든 번역 문자열을 검색하고 다른 사용자가 테마/플러그인을 번역할 수 있도록 지정된 위치에 있는 .pot 文件。然后可以使用此 .pot 文件转换 .po 和 .mo 파일을 컴파일하므로 매우 중요합니다.

패키지를 구성하려면 Gruntfile.js initConfig 옵션에 다음을 추가하세요.

으아아아

그런 다음 Grunt 작업(Gruntfile.js 폴더에 있음)을 다음과 같이 호출하세요.

으아아아

전체 폴더가 검사되고 있으며 모든 문자열이 pot 파일과 일치합니다.

자산 파일

모든 테마와 플러그인은 정기적으로 JavaScript 및 CSS 파일을 사용합니다. 불행하게도 파일의 개발 및 프로덕션 버전에 대한 필요성이 무시되는 경우가 많습니다.

WordPress 자체의 팁에 따라 내 목표는 파일을 완전히 주석 처리하고 축소했는지 확인하는 것입니다.

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

왜? 나는 이 파일에서 무슨 일이 벌어지고 있는지 알고 싶지만 방문자가 이 파일의 최적화된 버전을 받고 있는지도 알고 싶습니다.

어떤 형태의 작업 실행기 없이 이 작업을 수행하려면 개발 중에 WordPress에 등록된 자산 URL을 전환하여 변경된 축소되지 않은 버전을 확인한 후 어떤 형태의 JavaScript 및 CSS 압축기를 사용하여 업데이트를 게시한 다음 등록된 URL로 다시 전환하는 것을 의미합니다. 이것은 전혀 재미가 없습니다.

Grunt를 사용하면 Uglify 패키지를 사용하여 JavaScript 파일을 동적으로 축소하고 최적화할 수 있습니다. CSS를 추가로 사용하려면 Sass 작업을 사용하여 Sass 파일을 CSS로 동적으로 컴파일할 수도 있습니다. 그만한 가치가 있기 때문에 WordPress는 내부적으로 Sass를 사용하지만 Grunt에는 LESS 컴파일러도 있으므로 Sass를 사용합니다.

으아아아 으아아아

팁: Sass 작업을 사용하는 경우 <code class="inline"><i>.sass-cache</i> 添加到 <i>.gitignore</i>.sass-cache를

<h2>.gitignore</h2>에 추가하세요.

컴파일러 캐시가 저장소에 추가되는 것을 방지합니다.

고급 작업

grunt ***Grunt가 WordPress 개발에 도움을 줄 수 있는 두 가지 핵심 영역을 이미 다루었지만, 한 단계 더 나아가 작업 실행기를 사용하는 추가 기능을 살펴보겠습니다.

파일 보기

우리는 이미 파일 처리 작업을 제공하고 있는데, 최적화해 보는 것은 어떨까요? 위 작업을 수행하면 변경 사항이 있을 때마다

를 실행해야 합니다. grunt-contrib-watch 패키지를 설치하면 어떨까요? 일단 구성되면 Grunt는 파일 변경이 감지될 때마다 이러한 작업을 실행하도록 지시합니다.

으아아아

긴급! 더 이상 파일이 변경될 때마다 Grunt를 실행할 필요가 없습니다. 관찰자를 시작하고 파일을 편집하기만 하면 됩니다.

자바스크립트 품질

JavaScript 파일에서 JSHint를 실행하여 오류나 누락된 세미콜론을 추적하는 것이 좋지 않을까요? 파일을 컴파일하기 전에 grunt-contrib-jshint 작업을 설치하고 관찰자 작업에 설치하기만 하면 됩니다. 이제 Grunt는 오류에 대해 경고하고 추가 작업 실행을 중지합니다.

으아아아

자산 병합

Fluent 프레임워크를 개발할 때 특히 유용합니다. Fluent Framework는 옵션 페이지 및 메타 상자 생성을 포함하는 클래스 세트입니다. 🎜 🎜개별 필드를 더 쉽게 개발할 수 있도록 다음과 같은 파일 구조를 사용합니다. 🎜 으아아아 🎜이렇게 하면 내가 작업 중인 영역을 매우 쉽게 찾고 해당 영역에 필요한 JavaScript만 변경할 수 있습니다. 🎜

从用户的角度来看，我只想提供一个 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'
            ]
        }
    }
}

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

复制文件

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

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

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

下载数据

另一个有用的 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'
    }
}

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

文档

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

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

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

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

把它们放在一起

这是用于执行上述任务的 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"
    }
}

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

};

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

结论

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

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

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

资源

• 咕噜声
• Node.js
• Grunt 入门

使用的 Grunt 任务

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

위 내용은 Grunt를 사용하여 WordPress 개발 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!