使用gulp搭建基于avalon的移动端项目

此项目是根据本人公司项目的要求搭建的,也许适用于很多其他的大部分项目。

准备好gulp环境

首先可以使用gulp创建项目,配置一下gulpfile.js文件,我把gulpfile.js放于根目录下

具体配置以及安装命令方法参见这里

我的项目目录

我的项目目录是这样:

==build        //项目构建目录
 | html        //html文件目录
 | images      //图片文件目录
 | javascripts //javascript文件目录
	| libs     //js库文件
 | stylesheets //样式文件目录

==gulpfile.js

  

在程序中使用的avalonjs可以在这里看到,同时s使用了mmRouter主要的文件如下

当你看到下面的时候会发现有个slideout.js文件,这是我们移动端用的侧边栏,我是拿别人的代码改来自己用,参见这里

main.html

build 目录下

<!DOCTYPE html>
<html ms-controller="main">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telephone=no, email=no"/>
  <meta name="fragment" content="!"/>
  <link rel="stylesheet" href="stylesheets/normalize.css"/>
  <link rel="stylesheet" href="stylesheets/sildeout.css"/>
  <script src="avalon.mobile.min.js" data-main="javascripts/main"></script><!-- 这里引入最重要的js -->
  <title>柏小生</title>
</head>
<body>
<nav id="BXS_menu"><!-- 这里是我们的菜单 -->
  <a href="#!/" ms-click="slideoutClose">home</a>
  <a href="#!//test" ms-click="slideoutClose">test</a>
</nav>
<div id="BXS_main" ms-click="slideoutClose">
  <div ms-view></div><!-- 所有的页面都会在这里显示(当然除了菜单栏) -->
</div>

<script src="javascripts/libs/slideout.js"></script><!-- 引入的侧边栏插件 -->
<script>
  var slideout = new Slideout({
    ‘panel‘: document.getElementById(‘BXS_main‘),
    ‘menu‘: document.getElementById(‘BXS_menu‘),
    ‘padding‘: 220,
    ‘tolerance‘: 85
  });
</script>
</body>
</html>

  

avalon.mobile.min.js在build目录下

主要的main.js

build/javascripts 目录下

require.config({//配置avalonjs
baseUrl: ‘javascripts‘,//基础路径
paths: {
avalon: ‘../avalon.mobile.min.js‘
},
shim: {
avalon: {
exports: ‘avalon‘
}
},
debug: false
});
require([‘avalon‘, ‘ready!‘, ‘libs/mmState‘], function (avalon) {
console.log(avalon);
//定义顶层的VM
avalon.define({
$id: ‘main‘,
slideoutClose: function() {
slideout.close();
}
});
//定义各种状态,内部会转换为一个路由表,交由mmRouter去处理
avalon.state(‘index‘, {
controller: ‘main‘,
url: ‘/‘,
views: {
‘‘: {
templateUrl: ‘templates/index.html‘ //templates下的index.html片段
}
},
onBeforeEnter: function() {
require([‘index‘], function(index) {
index.init();
});
},
onError: function(err) {
avalon.log(err);
}
});
avalon.state(‘test‘, {
controller: ‘main‘,
url: ‘/test‘,
views: {
‘‘: {
templateUrl: ‘templates/test.html‘//templates下的test.html片段
}
},
onBeforeEnter: function() {
require([‘test‘], function(test) {
test.init();
});
},
onError: function(err) {
avalon.log(err);
}
});
//启动历史管理器
avalon.history.start({
basepath: ‘/app‘
});
//开始扫描
avalon.scan();
});

  

路径build/templates以下两段为html片段

index.html片段

<div ms-controller="index" id="index">
    <p ms-text="testName"></p>
</div>

test.html片段

<div ms-controller="test">
  <p ms-text="testName"></p>
</div>

  

libs文件

在libs下放了需要的js文件,包括mmState、mmHistory、mmRouter等

最后使用gulp命令生成assets目录
参考资料

https://github.com/gulpjs/gulp
https://github.com/baixiaosh/avalon
https://github.com/RubyLouvre/mmRouter
https://github.com/baixiaosh/slideout

如果本文有什么不对的地方,希望大神们指出,以免误导其他撸码哥,谢谢

本文地址:http://www.cnblogs.com/baixiaosheng/p/4390253.html

时间: 2024-11-07 22:33:57

使用gulp搭建基于avalon的移动端项目的相关文章

如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用这段时间来写下如何在ASP.NET 5下搭建基于TypeScript的Angualr2的项目,下面我们就进入正题. 二.环境配置 如果读者直接按照Angular.io上的方式搭建是无法通过的,所以下面我们的教程基本跟Angular.io上的类似,只是其中的配置会有所不同,并且也会多出一些步骤. 1.

基于gulp搭建的前端自动化构建框架

Gulp-cli 基于gulp搭建的前端自动化构建.适用于中小型项目,快速构建前端项目框架. 项目启动 // 常用命令 项目编译: npm run build 项目编译并启动: npm run start 项目地址 如对你有帮助,希望给个Star !哈哈哈!! git clone [email protected].com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |-- bin # (在gulpfile文件中使用到)解析lay

用FreeBSD10搭建基于ZFS的iSCSI服务

概述 对于ZFS我是一直在强烈推荐的,因为实在太好用了.但是直到现在,它还是只能运行于Oracle的Solaris和FreeBSD两个系统上,为了将它分享给别的系统只能通过NAS或SAN的方式. NAS的方式很简单,我一直在用Samba实现,当然NFS也是可以的,SAN的话之前还没试过.使用上当然是SAN更好一些,而且现在网速也够快.虽然对于存储来说,NAS和SAN都是外部存储,但对于客户机来说,它知道NAS是网络设备,而SAN则会被视同本地设备,这是二者的主要区别.之所以会这样,是因为NAS走

Redhat 5 搭建基于 ftp 的 yum 服务器

YUM是Yellow dog Updater, Modified的缩写,是由Duke University所发起的计划,目的就是为了解决RPM的依赖关系的问题,方便使用者进行软件的安装.升级等等工作.在此在特别说明的是,YUM只是为了解决RPM的依赖关系的问题,而不是一种其它的软件安装模式.而在redhat系统中未经授权是无法使用yum的,这里就介绍一种利用redhat光盘搭建本地yum服务器的方法. 系统环境:  Red Hat 5.9 Server IP: 192.168.100.211 C

PHP搭建基于CodeIgniter框架的服务

最近两年,MySpace.Google.Yahoo.Facebook.淘宝和人人网这些互联网企业,都构建了自己的开放平台,打破了“我的地盘我做主”一类的网站建设常规思维,以开放的姿态,构建网络交互的生态圈.而这些开放平台几乎都采用了REST的服务架构. 什么是REST架构? REST(Representational State Transfer)是一种轻量级的WebService架构风格,其实现和操作明显比SOAP和XML-RPC更为简洁,可以完全通过HTTP协议实现,还可以利用缓存Cache

搭建基于 STM32 和 rt-thread 的开发平台

我们需要平台 如果说,SharePoint 的价值之一在于提供了几乎开箱即用的 innovation 环境,那么,智能设备的开发平台也一样.不必每次都从头开始,所以需要固定的工作室和开发平台作为创新的起点,这样就会每次比从零开始"高一点点". 当然,这里不是没有纠结的.平台毕竟不是最终的产品,平台太弱固然难以支撑创新,但平台太强则臃肿和僵化同样也会限制创新:面对成百上千的类型.接口的时候,即使做一个小玩意儿也要学上一年半载,任何人都会畏惧的.有那个时间,不如自己写一个出来了.所以成功的

架构搭建----基于DDD领域驱动设计的WCF+EF+WPF分层框架(2)

写在最前面:转载请注明出处 目录置顶: 关于项目--------------------基于DDD领域驱动设计的WCF+EF+WPF分层框架(1) 架构搭建--------------------基于DDD领域驱动设计的WCF+EF+WPF分层框架(2) WCF服务端具体实现---------基于DDD领域驱动设计的WCF+EF+WPF分层框架(3) WCF客户端配置以及代理-----基于DDD领域驱动设计的WCF+EF+WPF分层框架(4) Domain具体实现------------基于DD

Mac 上搭建基于 Hexo + GitHub 个人博客

环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode),若没有,可以参考 Hexo官网上的安装方法. 安装 Hexo 当 Node.js 和 Git 都安装好后,就可以正式安装 Hexo 了,终端执行如下命令: $ sudo npm install -g hexo 输入管理员密码(Mac 登陆密码)即可开始安装. 注: sudo:linux系统管理指

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS