HTML을 사용하여 프런트엔드 에셋의 디자인 관리
우선 자원 컴파일
최근 전방 자원을 개발하는 데 있어서 각종 컴파일러를 사용하는 경우가 증가한 것 같다.
구체적으로 말하면
JS・JSX
Browserify 및 babel을 사용한 모듈 관리·ES6·JSX
CSS
sass,postcss,autooprefixer로 변환
HTML
템플릿 엔진으로 변환
이를 임무로 삼아 파일 감시를 하고 임무 주자를 실행시키며 BrowserSync
이 문제들(내가 느낀 곳들)
HTML로 관리
어쨌든 먼저 그림을 만들었다
위의 그림에서'컴파일 처리'라고 쓰여 있는 것은 브라우저 리프와 바벨 등의 처리를 통해 기본적으로 흐름으로 읽고 토해낸 공동 처리만 실시하면 된다.
(명령줄의 표준 입력과 출력도 OK)
Mime 유형 등을 통해 판정 및 컴파일된 처리를 웹 서버에 포함합니다.
릴리즈할 때 재생되는 프로세스와 달리, 링크 태그와script 태그를 바탕으로한 다음 컴파일한 다음 Bundle을 읽도록 합니다.
HTML은 다음과 같습니다.
전환 전.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://hostname//framework-1.2.3.css" rel="stylesheet">
<link href="css/1.css" rel="stylesheet">
<link href="css/2.css" rel="stylesheet">
<link href="css/3.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://hostname/framework-1.2.3.js"></script>
<script src="js/1.js"></script>
<script src="js/2.js"></script>
<script src="js/3.js"></script>
</body>
</html>
전환 후.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bundle.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
그러면 위에서 링크 탭과script 탭을 순서대로 읽고 컴파일 처리를 하면 버블만 같은 행동으로 바뀌어야 한다.(cheeerio 같은 걸 사용하면 쉬울 것 같아)
cdn 등 원격 파일도 직접 읽고 한데 모을 수 있다.
개발할 때 파일이 분산되고 컴파일 처리가 되어 개발용 웹 서버가 부담스럽지만 발매할 때 해제하면 좋겠다는 생각입니다.
장점
결점
하면, 만약, 만약...
cheerio를 가까스로 사용하면
(설치가 용이해 보임)
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/1.css" rel="stylesheet" async>
<link href="css/1.css" rel="stylesheet" defer>
<link href="https://hostname//framework-1.2.3.css" rel="stylesheet">
<link href="css/2.css" rel="stylesheet">
<link href="css/3.css" rel="stylesheet">
</head>
<body>
<part src="part/header.html">
<div id="app"></div>
<part src="part/footer.html">
<script src="https://hostname/framework-1.2.3.js"></script>
<script src="js/1.js"></script>
<script src="js/2.js"></script>
<script src="js/3.js"></script>
</body>
</html>
compile.js
const compile = require('compile-tool')
let config = {
// Expressのstaticとかの為に
prefix: "static/base",
// コンパイル前のテンプレートエンジンがあれば指定
templateEngine: function(file, cb) {
// パスとバッファを格納
let buffer = file.buffer
let path = file.path
this.push(//コンパイル後のBuffer)
// 最後は、コールバックを呼び出し
cb()
},
// 拡張子ごとのコンパイラを指定（インターフェイスは、templateEngineに渡す関数と同じ）
compilers: {
"js": jsCompiler, // browserify babelify
"jsx": jsCompiler, // browserify babelify
"css": cssCompiler // postcss autoprefixer
}
}
// HTMLのパスをglobで指定・configで初期化・outのパスは、config.prefixを指定しない場合のみ有効
compile("./dev/*.html", config).out("./out/")
Reference
이 문제에 관하여(HTML을 사용하여 프런트엔드 에셋의 디자인 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/oedkty/items/5f6513df32b4780ce9e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
