Cocos-template NPM

cocos 模版插件

处理web-mobile平台下index.html模板，扩展更简单的插件管理，和自动打包静态文件public目录

安装和使用

使用npm i cocos-template或者直接下载压缩包

在cocos creator编辑器的扩展->扩展管理器->导入扩展文件夹然后选择cocos-template的主目录即可成功使用，在build的web-mobile平台时生效

自动打包静态文件public目录

在项目目录创建public目录，所有静态文件放置，打包会放入打包目录

模板使用

在build-templates/web-mobile中存在index.ejs模版文件添加内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title><%= projectName %></title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/>

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <!--#scriptStart-->

  <link rel="stylesheet" type="text/css" href="<%= cssUrl %>"/>

</head>
<body>
  <div id="GameDiv" cc_exact_fit_screen="true">
      <div id="Cocos3dGameContainer">
        <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
      </div>
    </div>

  <%- include(cocosTemplate, {}) %>
  
</body>
</html>

在build-templates/web-mobile中创建scriptStart.html

<script type="text/javascript">
    console.log('我被先执行0-0')
</script>

扩展自定义插件

在项目主目录创建cocos-template.js文件例子：

const onBeforeBuild = async function (options, result,{ file,http }) {
    //编译前处理一些逻辑
}

const onAfterBuild = async function (options, result,{ file,http }) {
    //编译后处理一些逻辑
}

module.exports = {
    onBeforeBuild,
    onAfterBuild
}

cocos creator plugin template

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago