집 >웹 프론트엔드 >CSS 튜토리얼 >HTML 생산 속도를 높이기 위해 Jade와 Grunt를 사용합니다

HTML 생산 속도를 높이기 위해 Jade와 Grunt를 사용합니다

Christopher Nolan원래의: 2025-02-24 08:24:19241검색

로 컴파일하는 : Using Jade and Grunt to Speed Up HTML Production Jade를 사용하면 닫는 태그를 작성할 필요가 없습니다.이 태그는 닫는 태그를 잊거나 올바른 순서를 잃는 것과 같은 잠재적 실수를 피할 수 있습니다. 줄의 시작 부분에있는 텍스트는 태그로 해석됩니다. 각 태그에 적절한 압입을 사용해야합니다.

참고 : 태그 이름이 생략되면 DIV가 기본 태그로 생성됩니다. 태그에 속성을 추가하려면 태그 이름을 따라 괄호 안에 넣고 이름 = 값 형식을 따르십시오. 여러 속성을 분리하려면 쉼표를 사용하십시오. 또한 클래스와 ID를 작성할 수 있습니다. 이전 예에서와 같이 각각 # 기호 파이프 문자를 사용하여 (|) 때때로 우리는 새로운 라인에 태그의 원시 내용을 써야하지만 앞에서 언급했듯이

라인의 텍스트는 태그 로 간주됩니다. 이를 피하려면 파이프 또는 |를 사용하십시오 줄의 시작 부분에 캐릭터와 새 라인에 태그의 내부 텍스트를 씁니다.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span>
</span>    <span><span><span><img</span> src<span>="images/image.png"</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

참고 : jade 파일에서 변경 한 변경 사항을 컴파일하여 이전에 만든 Grunt 작업을 기반으로 Grunt를 실행해야합니다. grunt 가있는 강력한 제이드 기능

이전 섹션에서는 Jade의 구문에 대한 빠른 개요를 제공했습니다. 다음 섹션에서는 몇 가지 고급 기능과 함께 다른 일반적이고 강력한 Jade 기능을 살펴 보겠습니다. 간단한 "구직 페이지"샘플을 살펴보면이 작업을 수행 할 것입니다. 소스 코드 파일 또는이 GitHub 리포에서 각 케이스에 대한 전체 예제를 찾을 수 있습니다. 시작합시다! 블록 및 확장 (Jade Inheritance) layout.jade라는 파일은 페이지 레이아웃의 기본 구조가되며 각 페이지에 대해이 태그를 작성할 필요가 없기 때문에 이는 일종의 건식 개념입니다. 대신 레이아웃을 확장하고 볼 수 있듯이 블록 컨텐츠 별 코드를 작성해야합니다. 블록은 일종의 레이아웃을 분리하거나 구성하는 것입니다. 그런 다음 다른 파일로 덮어 쓸 수 있습니다 참고 : CSS 및 JavaScript 코드는 간결하고 초점을 위해 제거됩니다. repo에서 찾을 수 있습니다. 또한 앱 디렉토리에서 빌드 디렉토리로 JS와 스타일 디렉토리를 전송하기 위해 사본 Grunt 작업을 사용했습니다. 여기에 layout.jade 파일이 있습니다 :

당신은 당신의 필요에 따라 buter.jade와 head.jade를 만들 수 있습니다. 우리의 페이지에서는 기본 디자인과 기능을 설정하는 데 도움이되는 기초와 jQuery를 사용합니다. 는 여기에 partials/head.jade 파일이 있습니다 :

여기에 partials/footer.jade 파일이 있습니다 :

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span>
</span>    <span><span><span><img</span> src<span>="images/image.png"</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

다음 코드 스 니펫에서, 우리는 jobs.jade를 생성합니다. jade는 키워드를 사용하여 레이아웃을 상속 한 다음 필요한 블록을 덮어 쓰면 다른 모든 파일을 사용합니다. 이 예에서는 컨텐츠 블록을 덮어 씁니다 jobs.jade :

그러나 전체 블록을 덮어 쓸 필요가 없다면 어떻게해야합니까? 대신 콘텐츠를 추가 해야하는 경우 어떻게해야합니까? 블록 헤드를 예로 들어 봅시다. 헤더 에이 페이지에 대한 특수 스크립트를 추가해야하므로 블록 다음에 추가 키워드를 사용하거나 Prepend 키워드를 사용합니다.

반복 및 믹스 인 사용

이전 섹션에는 Job-Container.jade가 포함되었습니다. 이 섹션에서는 루프와 믹스의 이점과 jade에서 어떻게 사용할 수 있는지 살펴볼 것입니다.

여기 새 코드 스 니펫의 초기 버전은 다음과 같습니다.

보시다시피, 우리는 첫 번째 줄에있는 것과 같은 여러 정상 루프 문장을 사용하고 있습니다. - 문자는 출력을 직접 추가하지 않는 부패하지 않은 코드에 사용됩니다. 이전 코드 스 니펫에는 다음 코드에서와 같이 Mixins를 사용하여 건조 시설이 될 수있는 중복 코드가 있습니다.

doctype html
html(lang="en" dir="ltr")
  block head
    include partials/head.jade

  body
    block content
    block footer
      include partials/footer.jade

여기서 우리는 Mixin 기능을 사용하여 재사용 가능한 Jade 블록을 만들고 있습니다. Mixins는 이름이 있고 내부 코드에서 평가하기 위해 인수를 취하는 방법 (또는 함수)과 같습니다. 위의 예에서는 SkillsBlock ()라는 믹스 인을 만들었습니다. 이 Mixin을 사용하기 위해, 우리는 그 이름을 쓰고 적절한 매개 변수 값을 전달하여 Mixin 호출로 식별하기 위해 믹스 이름을 표시로 접두사로 전달합니다.

. 참고 : 위 코드에서와 같이 값을 =,! = 또는 #{}로 평가할 수 있습니다. 그러나 사용할 때 조심하십시오! =, 이는 탈출을하지 않으므로 사용자 입력에 안전하지 않습니다.

. grunt를 통해 JSON 데이터를 전달합니다 환경을 확립 한 후 grunt 작업을 사용하여 JSON 파일에서 Jade로 JSON 데이터를 전달하여 Grunt와 Jade의 조합으로 멋진 일을 해보자. 처음에는 JSON 파일 Data.json을 만들고 원하는 데이터로 채우십시오. 그런 다음 gruntfile.js를 열고 다음과 같이 jade 작업의 옵션에 데이터 속성을 추가하십시오.

head
  meta(name="viewport", content="width=device-width, initial-scale=1.0")
  meta(charset="UTF-8") 
  title Jobs
  link(rel = "stylesheet" href = "style/foundation.min.css")
  link(rel = "stylesheet" href = "style/app.css")

> Jobs Data/Locals (Jade 템플릿으로 전달 된 데이터) 속성은 파일 속성에서 식별 된 Jade 파일로 전달되며 Jade 코드에서 사용할 수 있습니다. 이 방식으로 웹 페이지에 텍스트 컨텐츠를 쉽게 추가 할 수 있습니다.

마지막으로 데모를 확인하면 페이지가 어떻게 보이는지 알 수 있습니다. 물론 소스는 컴파일 되므로이 경우 데모가 중요하지 않습니다. 스크린 샷은 아래에 나와 있습니다.

포장

템플릿 엔진을 사용해야하는 이유는 다를 수 있지만 더 많은 생산성, 반복성이 적고 더 쾌적한 구문을 가질 수 있습니다. 또한 너무 반복적이거나 오류가 발생하기 쉬우거나 단순히 마음에 들지 않기 때문에 코드를 모국어로 작성하고 싶지 않을 수도 있습니다. 이것은 코드를 간결하고 간단하게 유지하도록 조정 된 Jade와 같은 언어가 작용하는 곳입니다. jade는 클리너 코드를 작성하는 데 도움이되므로 작업을 수행하는 것이 덜 지루합니다. 우리는 Grunt를 사용하여 몇 가지 기본 사항과 팁 및 요령을 다루었습니다. 이 튜토리얼에서 다루지 않은 Jade에 대해 더 많이 배울 수 있으므로 공식 문서를 확인할 수 있습니다. jade와 grunt를 사용하여 HTML 생산 속도를 높이는 것에 대한 자주 묻는 질문 (FAQ) jade 란 무엇이며 HTML 생산에 사용해야하는 이유는 무엇입니까?

현재 PUG로 알려진 고성능 템플릿 엔진은 HAML에 의해 크게 영향을 받고 Node.js의 JavaScript로 구현되었습니다. 유지 관리가 쉬운 깨끗하고 읽기 쉬운 코드를 작성할 수 있도록 HTML을 작성하는 프로세스를 단순화합니다. 또한 동적 코드, 재사용 가능한 블록 및 포함하여 HTML 생산 속도를 크게 높일 수 있습니다.

Grunt는 HTML 생산 속도를 높이는 데 어떻게 Jade를 보완합니까?

Grunt는 JavaScript 작업 러너입니다. 미수, 편집, 단위 테스트 및 라인과 같은 반복적 인 작업을 자동화합니다. Jade와 함께 사용될 때 Grunt는 Jade 템플릿을 HTML로 컴파일하는 프로세스를 자동화하여 장기적으로 많은 시간과 노력을 절약 할 수 있습니다.

Jade and Grunt를 어떻게 설치합니까?

Jade와 Grunt는 NPM (Node Package Manager)을 통해 설치할 수 있습니다. 'npm install jade -g'를 실행하여 Jade를 설치하고 'npm'npm install ingrunt -cli -g '를 터미널 또는 명령 프롬프트에서 실행하여 grunt를 설치할 수 있습니다.

html을 Jade로 어떻게 변환합니까?

html2jade.org 및 codebeautify.org와 같은 html을 Jade로 변환 할 수있는 몇 가지 온라인 도구가 있습니다. 그러나 HTML을 프로그래밍 방식으로 JADE로 변환하려면 'HTML2Jade'NPM 패키지를 사용할 수 있습니다.

HTML에서 Jade 전환에 온라인 도구를 사용하면 어떤 이점이 있습니까? HTML에서 Jade 변환은 사용하기 쉽고 설치가 필요하지 않습니다. HTML 코드를 신속하게 Jade 구문으로 변환 할 수 있습니다. Jade를 처음 접하거나 변환 해야하는 많은 양의 HTML 코드가있는 경우 매우 유용 할 수 있습니다. html2jade 'npm html to jade conversion for html2jade 패키지를 설치 한 후 NPM을 통해 사용할 수 있습니다. 터미널 또는 명령 프롬프트에서 'html2jade yourfile.html'을 실행하여 html을 Jade로 변환합니다. 이것은 HTML 코드와 동등한 Jade를 출력합니다.

. gulp와 같은 다른 작업 러너와 함께 Jade를 사용할 수 있습니까?

예, Jade는 Gulp와 같은 다른 작업 러너와 함께 사용할 수 있습니다. gulp에 사용할 수있는 플러그인이 grunt와 비슷한 jade 템플릿을 HTML로 컴파일 할 수있는 플러그인이 있습니다.

내 옥 템플릿에 외부 파일을 어떻게 포함 시키는가?

Jade 템플릿에 외부 파일을 포함시킬 수 있습니다. '포함'키워드와 파일의 경로를 사용합니다. 이것은 여러 템플릿에 헤더 및 바닥 글과 같은 공통 요소를 포함시키는 데 매우 유용 할 수 있습니다.

Jade Templates에서 JavaScript를 사용할 수 있습니까?

예, Jade는 인라인 JavaScript를 지원합니다. '-'문자를 사용하여 Jade Templates에서 JavaScript 코드 줄을 시작할 수 있습니다.

제이드 템플릿에서 오류를 디버그하는 방법은 무엇입니까?

Jade는 도움이 될 수있는 상세한 오류 메시지를 제공합니다. 템플릿의 오류를 디버깅합니다. Grunt를 사용하는 경우 jade 템플릿 디버깅을위한 'Jade : Debug'작업을 제공하는 'Grunt-Contrib-Jade'플러그인을 사용할 수도 있습니다.

위 내용은 HTML 생산 속도를 높이기 위해 Jade와 Grunt를 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json jquery css less gulp html npm if for format include require Directory Error using Attribute Property append copy JS default this input github kind prompt Foundation Prompt Other

성명：

이전 기사：순수한 CSS로 스타일 스위처 구축 : 확인다음 기사：순수한 CSS로 스타일 스위처 구축 : 확인