#gulp-html-resource
前端UI开发中,我们经常遇到开发引用资源路径和打包后的路径不在同一个目录,并且css,js都会进行压缩构建。 在页面测试过程,会进常手动更改路径(既麻烦又容易出错~)。
现在 就算是静态html,我们同样可以使用模板化来构建我们的UI页面啦~~
需要一个resConfig.js配置文件
//调试模式(dev:开发模式,pro:生产模式)
var development="pro";
module.exports=function(){
if(development=="dev"){
return{
suffix:"",//css,js文件后缀
output:"html",//模板输出目录
template:"template/**/*.html",//模板目录
css:"dev/stylesheets",//开发版css目录
js:"dev/javascripts",//开发版js目录
image:"dev/images"//开发版图片目录
}
}
if(development=="pro"){
return{
suffix:".min",
output:"html",
template:"template/**/*.html",
css:"build/stylesheets",
js:"build/javascripts",
image:"build/images"
}
}
}
配置需要的模板: 例如:meta.html
<link rel="stylesheet" href="../<%=cssPath%>/main<%=suffix%>.css" >
<script src="../<%=jsPath%>/main<%=suffix%>.js"></script>
index.html
<!DOCTYPE html>
<html>
<head>
#include('./template/common/meta.html')
<link rel="stylesheet" href="../<%=cssPath%>/test<%=suffix%>.css" >
<script src="../<%=jsPath%>/test<%=suffix%>.js"></script>
</head>
<body>
<img src="../<%=imgPath%>/1.png" />
</body>
</html>
输出后的html:
开发模式:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../dev/stylesheets/main.css" >
<script src="../dev/javascripts/main.js"></script>
<link rel="stylesheet" href="../dev/stylesheets/test.css" >
<script src="../dev/javascripts/test.js"></script>
</head>
<body>
<img src="../dev/images/1.png" />
</body>
</html>
生产模式:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../build/stylesheets/main.min.css" >
<script src="../build/javascripts/main.min.js"></script>
<link rel="stylesheet" href="../build/stylesheets/test.min.css" >
<script src="../build/javascripts/test.min.js"></script>
</head>
<body>
<img src="../build/images/1.png" />
</body>
</html>
在gulpfile.js中配置:
var gulp=require("gulp"),
templateToHtml=require("./lib/index");
gulp.task("templateToHtml",function(){
var resource=new templateToHtml();
});
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )