지금까지 해설한 일

15380 단어 pug

완전히'오래된 기술'이 됐을 수도 있으니 이제 소개해 드리겠습니다pug(jade).
grunt/glop 이후의 새로운 습관gulp 등 제작html 프로젝트 중 html 이외의 언어로 쓴다html매혹적인 습관이 있다.
고의식계가 사용하는 과도한 기술설
왜 gulp라pug라는, 그런 복잡한 기술을 사용합니까?
고의식계(웃음) 일부러 복잡하게 한 거 아니에요?이렇게 말하는 사람도 있다.
(아니, 의식이 높은 사람은 이미 사용하지 않는다gulp.)
왜 안 써요?
사실 보기 흉해서 쓰기가 어렵다.
나는 단지 한 마디만 할 수 있을 것이라고 생각한다.html 읽기 어려워요.html 눈에 익은 사람이 보면'하? 무슨 말인지 모르겠다'고 생각할 수도 있어요.html 이전 세대를 보면 Node.js와html는 같은 처리였다.
더 이상 읽을 수 없다"고 말했다.jquery.min.js생 JS도 어려워요.Javascript 하지만 현장의 CSS는 읽기 어렵다.
한 번 하고 끝내면 그럴지도 모르지만, 요즘은
보양을 할 때는 독서를 편리하게 하는 것이 예의다.
최근에 무슨 변화가 생겼습니까?
> 변수의 처리와 중복 처리가 지원되지 않기 때문에 모든 친필이 필요합니다.
프로그램 설계적인 처리를 할 수 있는 것은 html 템플릿 엔진입니다.
HTML 템플릿 엔진은 무엇입니까?
HTML 템플릿 엔진에도 여러 가지 유형이 있습니다.
유명한건Stylesheet,EJS,PUG 등등
유행 학습 원가Handlebars가 높기 때문에 알레르기가 있는 사람들이 끊임없이 나타난다고 생각합니다.
그 결과 사용하지 않는 사람이 다수였다.
어떤 특징이 있습니까?EJS "pug"이라는 확장자 파일에 쓰여 있습니다.그다음에 자세히 설명해주세요.
이것은 "빠르게 인코딩할 수 있는 템플릿 엔진"이다
기기법을 하기 전에 반드시'보통 쓰는 것이 비교적 빠르다'고 느낄 것이다.
나도 그래.pug 많은 사람이 알아보지 못하면 먼저 "pug 됐어"라고 말한다.
아뇨, 아뇨, 아뇨, 잠시만요.pug직접 쓸 수 있는 거 알아요?
편한 줄 알고 폐지해도 늦지 않겠지?
기본형
우선 pug로 기본html을 쓰면 어떻게 되는지 봅시다.
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title>html</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body id="sample_id" class="sample_class">
  <div class="a">Hello world! This is HTML5 Boilerplate.</div>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
↓ pug로 이거 쓰기
doctype html
html.no-js(lang='')
  head
    meta(charset='utf-8')
    title html
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='css/normalize.css')
    link(rel='stylesheet', href='css/main.css')
  body#sample_id.sample_class
    .a Hello world! This is HTML5 Boilerplate.
    script(src='js/vendor/modernizr-3.11.2.min.js')
    script(src='js/plugins.js')
    script(src='js/main.js')
"...달라진 건 없겠지?"내 생각엔이 근처는 어떤 차이가 있는지 알기 어렵다.
pug의 특징
★html 이 부호가 사라졌어요.대신 라벨 뒤에 pug★ 닫힌 표시가 없다.
★ 반듯하게 들여쓰기.
★<>네()★class="sample_class"네.sample_class★id="sample_id"네#sample_id작법만 알면 상당히 짧게 쓸 수 있다는 얘기다.
약술한 예
닫힌 표지가 없어서 짧게 쓸 수 있다.
나는 div class="a"가 가장 자주 사용하는 라벨이라고 생각하지만, 쓰지 않아도 된다. 이미 상당히 빠르다.
(※ class와 id를 추가하지 않은 경우 위의 그림과 같이 p와 같이div를 써야 합니다.)

텍스트 쓰기
텍스트는 탭 뒤에 반쪽 공백을 비울 수 있습니다
다른 줄을 만들 때 비교적 깊게 축소된 기초 위에서'.a'을 넣는다.

속성 쓰기
태그처럼 > 여러 속성이 있으면 이렇게 됩니다.이것은 짧지 않다.

엄밀히 들여놓다
닫힌 태그는 없지만 항상 올바르게 들여쓰십시오.
VS코드면 <div></div> 정렬이 가능합니다.
image.png
extends 사용 가능| 사용 가능Alt+Shift+F.바디 바깥쪽을 걷는다는 인상을 준다.
매번 같은 원 라벨과 js를 쓰지만, 솔직히 매번 복사하는 것은 매우 번거롭다.
똑같으면 생략하고 싶죠.그렇습니다.

이 색을 칠한 부분을 extend로 생략하면 이렇게 됩니다(아래 그림)
_layout_프레임에 바디의 바깥쪽을 써주세요.
바디에 미리 pug를 쓰면 번거로운extends 등의 기술을 생략할 수 있다.

매번 반복적으로 사용하는 바디의 바깥쪽을 extends에 쓰면 매번 쓰지 않아도 좋아진다.
말은 그렇지만 "제목이랑 메타태그랑 페이지마다 달라지지 않나요?"그렇게 생각해.
이때, 변수를 extends의 파일 측면block content(변수)로 읽으면 됩니다.↓

포함 사용 가능
include는 눈썹과 꼬리 같은 중복된 요소를 삽입하는 데 사용됩니다.

이것도 매번 특별히 긴 제목의 내용을 쓸 필요가 없다.
만약include라면 같은 눈썹을 반복해서 사용할 수 있습니다.

script<head>의 내용은 텍스트가 아니기 때문에 이렇게 점으로 연결해서 쓴다.
<script>
   alert("test");
</script>
　↓
script.
   alert("test");
style
스타일도 마찬가지다.
<style>
  .hoge {font-size: 100%;}
</style>
↓
style.
  .hoge {font-size: 100%;}
줄을 바꾸는 곳에 엔화 표지를 더하면, 반사봉에서 없앨 수 있다
Javascript와 같기 때문에 줄을 바꾸는 것이 줄 바꾸는 문자로 간주되는 것을 피해야 한다
텍스트 끝에\(Windows 는 ¥ 플래그) 를 추가하면 줄 바꿈이 무효화될 수 있습니다.
p
  |これは\
改行を\
打ち消すサンプル\
です。
다른 기능도 있지만.
이외에도 variables문과 <script>문도 사용할 수 있다.
- var name = 'fuga'
  if name=='hoge'
    p ほげです。
  else if name=='fuga'
    p ふがです。
  else
    p ぴよです。

- for (var x = 0; x < 3; x++)
  li item#{x}
iffor를 통해서도 텍스트와 코드를 분리할 수 있다.
var text  ='エスケープ処理する'
var text2 ='エスケープ処理しない'

p #{text}
p !{text2}
기능은 있지만 너무 많이 하면 직관적이지 않고 복잡해질 가능성도 있다.
그거 하면 json 싫어질 수도 있으니까.
우선 생략 기법만 사용하세요.익숙해지면 사용해 보세요.
컴파일러가 없습니까?
처음 사용include이나 pug을 하는 사람은 반드시 다음과 같이 말한다.
"어디에요?"이런 대사.gulp만 편집할 수 없습니다pug.
구축(전환 작업)이 필요합니다.
터미널을 사용하다.역의 부적을 알려줄게.
$ cd project （現在のプロジェクトの直下フォルダ）
$ npm install （必要なライブラリを揃える）
$ npm run dev　（ローカルで実行し、ブラウザに映す）
$ npm run build （変換されたファイルを書き出す）
leetcode 40 조합수 총계 2
JDK 용기 와 병발 - Map - LinkedHashMap

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage