기존 워드프레스 인스턴스에 그룬트 사용

기존 워드프레스 인스턴스에 그룬트 사용

저는 이런 상황을 감안할 때 js/css 코드를 어떻게 최소화하고 조합할 것인지 알아내려고 합니다.

• 테마를 구매했는데 개발하지 못했습니다.
• 여러 개의 플러그인을 사용하고 있습니다.그것들은 유용하지만 매우 추한 코드를 출력합니다. (많은 인라인 CSS & js, 대부분 완전한 코멘트가 있는 개발 코드)

나는 그르렁거리는 것을 꽤 처음 접합니다. 나는 과거에 맞춤형 웹 앱에서 그것을 사용했지만 워드프레스에서는 결코 사용하지 않았습니다. 당신이 PHP 스크립트를 많이 가지고 있을 때 / 그것들의 추한 코드를 주입하는 플러그를 사용할 때 그것이 도움이 될지 궁금합니다.

그래서 제 질문은 위의 케이스에서 생산 코드가 제공되도록 워드프레스로 그룬트를 작동시킬 수 있는 방법이 있을까요?만약 그렇다면, 어떻게?

유감스럽게도 플러그인을 수정하지 않고는 원하는 것을 달성할 수 없습니다.

Grunt는 단지 자바스크립트 작업 실행자일 뿐이며, WordPress 등 웹 애플리케이션에 대한 감각이 없습니다.그룬트에게 입력을 주면 그 입력을 어떻게 할 것인지 알려주면 그렇게 됩니다.따라서 Grunt를 사용하여 사이트의 모든 자바스크립트와 CSS를 최소화하고 연결하기 위해서는 플러그인에서 추출하여 적절한 파일 구조로 배치해야 합니다.

일반적으로, 플러그인이 많은 자바스크립트 및/또는 CSS를 인라인화할 것을 고집할 때, 그것은 그다지 좋은 플러그인이 아닙니다.예를 들어, 저희 팀은 많은 WordPress 프론트엔드 개발(연접, 미니화, 지문채취, 자동 접두사 등)에 gulp.js(Grunt와 유사)를 사용합니다. 우리는 어떤 플러그인을 사용하는지(있는 경우)에 대해 매우 까다롭습니다. 그 이유 중 하나는 바로 질문에 대한 것입니다.

당신의 계획이 좀 엉망진창인 것 같습니다.최상의 시나리오에서는 워드프레스 인스턴스가 사용하는 모든 CSS와 JS를 최소화하기 위해 간단한 Grunt 작업을 구성하고 사용했다고 가정합니다.

즉, 코드를 파고 플러그인 각각이 스타일이나 스크립트를 가져오는 위치를 찾아서 잘라내고 Grunt를 사용하여 최소화해야 한다는 뜻입니다.그런 다음 최종적으로 최소화된 파일을 가져와 워드프레스 인스턴스에 다시 주입해야 합니다.

사용자 지정 코딩을 많이 해야 한다는 사실 외에도 플러그인을 업데이트하는 것은 많은 고통을 줄 것입니다.

확장 가능하고 쉽게 따라 할 수 있는 계획을 고수하기 위해 당신의 스타일과 스크립트를 관리해 줄 BWP 미니 플러그인을 사용하는 것을 제안합니다. CDN 지원을 제공합니다.

그런 다음 Grunt를 코드 품질 검사 메커니즘으로 사용할 수 있습니다.Unss는 사용하지 않는 스타일을 찾을 수 있도록 도와주는 훌륭한 도구입니다.그룬트 사용민도 훌륭한 해결책입니다.

마지막으로 명령줄 도구로 전환할 의사가 있는 것을 확인했으므로 WP-CLI를 살펴보시기 바랍니다. Wordpress를 위한 훌륭한 명령줄 인터페이스입니다.

플러그인을 사용하여 자산의 대기열을 해제하거나 수동으로 대기열을 해제한 다음 grunt에게 연결하고 최소화하도록 지시할 수 있습니다.

이 기사는 http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/ 에서 찾고 있는 내용을 제공할 수 있습니다.

JS를 모듈로 분리하는 데 필요한 시간을 사용할 의사가 있다면 장기적으로 grunt-browserify가 효과적일 수 있습니다.그러나 이미 언급한 대로 플러그인 파일에서 관련 코드를 추출해야 합니다.

CSS 최소화를 위해, grunt-contrib-cssmin은 볼 가치가 있을 것입니다.테스트나 배포 전에 CSS에서 상대 경로를 변경하기 위한 grunt-text-replace도 좋아합니다(직접 워드프레스를 개발하지 않으면 악화될 수 있음).

Foundation Press-child 테마를 확인해 보십시오. 이 테마는 그르렁거리는 소리와 몇 개의 멋진 도구와 라이브러리를 사용합니다.고객을 위해 만든 WP 사이트의 거점으로 활용하고 있습니다.VCCW와 함께 좋은 출발점입니다.

https://github.com/thetrickster/FoundationPress-child

https://github.com/vccw-team/vccw

언급URL : https://stackoverflow.com/questions/28101121/use-grunt-with-an-existing-wordpress-instance