1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/area-gulp-html-resource

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

#gulp-html-resource

前端UI开发中,我们经常遇到开发引用资源路径和打包后的路径不在同一个目录,并且css,js都会进行压缩构建。 在页面测试过程,会进常手动更改路径(既麻烦又容易出错~)。

现在 就算是静态html,我们同样可以使用模板化来构建我们的UI页面啦~~

解决的痛点

  1. html模板引用资源的可配置化
  2. 可以同时进行开发调试和生产调试
  3. 解放频繁修改路径的刚度做法~~
  4. 不用依赖其他的服务端模板(ejs,jade)等

使用方式

需要一个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"
		}
	}
}

Template

配置需要的模板: 例如: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

输出后的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 )

Вы можете оставить комментарий после Вход в систему

Введение

**Автоматизация конфигурации ресурсов HTML-шаблонов** [Текст запроса, связанный с разработкой и тестированием программного обеспечения.] Расширить Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/area-gulp-html-resource.git
git@gitlife.ru:oschina-mirror/area-gulp-html-resource.git
oschina-mirror
area-gulp-html-resource
area-gulp-html-resource
master