정적 사이트 (예 : 기본 웹 서버에서 제공되는 HTML 파일)를 만들고 있습니다. 개발하는 동안 Javascript 코드와 CSS 파일의 로컬 (비 축소) 복사본을 사용하고 싶지만 배포 할 때 같은 파일의 축소 버전을 참조하고 싶습니다.정적 사이트를 배포 할 때 JS 및 CSS 참조를 바꾸는 방법은 무엇입니까?
현재 나의 해결책은 script과 link 태그에 data-prod-href과 data-prod-src 속성을 추가하고 참조를 빌드 스크립트의 일부로 바꾸는 것입니다. 이렇게하면 HTML 파일이 유효하게 유지되고 매번 빌드 스크립트를 실행하지 않고도 개발할 수있게되지만 약간의 NIH가 느껴집니다.
나는 꽤 많이 둘러 보았고, 이런 종류의 일에 대한 표준적인 실천을 찾지 못했습니다. 내가 뭘 놓치고 있니?
당신은 스크립트를 사용할 수 있습니다
<script>
if(location.hostname == "your_site.com"){
$.getScript("your_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
}
else
{
$.getScript("your_non_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
}
</script>
당신이 당신의 HTML 페이지를 생성하는 템플릿의 일종을 사용하는 경우 일반적으로 템플릿에 대한 조건을 쓸 수 있습니다 (심지어 정적 HTML 페이지에 대한 것이 좋습니다 것입니다). – Richard
나는 서버 측 템플릿을 완전히 사용하지 않거나 적어도 사전 처리없이 유효한 HTML 템플릿 언어를 사용하고 있는지 확인하려고합니다. – gooli
정적 파일을 출력하는 템플릿을 사용할 수 있습니다 (예 : Freemarker가이를 수행 할 수 있음). 이렇게하면 코드가 위험 해지며 서버 측 템플리트가 필요하지 않습니다. 한편 유효한 HTML 템플릿을 사용하는 템플릿 언어를 찾는 것은 어렵습니다. 나는 내 자신을 찾고 있었지만 그 중 소수만을 발견했으며 심각한 단점과 한계가있었습니다. – Richard