使用gulp搭建基于avalon的移动端项目
浏览数：62 /
时间：2015年06月11日
此项目是根据本人公司项目的要求搭建的，也许适用于很多其他的大部分项目。
准备好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
如果本文有什么不对的地方，希望大神们指出，以免误导其他撸码哥，谢谢
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
