ionic-项目目录结构介绍

截图

运行ionic start myIonic blank 后,的到的空项目.

运行ionic start myIonic tabs 后,的到的tabs项目.

文字介绍

//编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
hooks           
    --after_prepare

//安装cordova的各种插件
plugins 

//存放scss文件，发布时编译这个目录下的文件输出到www的css目录中
scss            
    --ionic.app.scss

//项目的开发目录，页面、样式、脚本和图片都放在这个目录下
www             

bower.json      //存放bower安装组件信息

config.xml      //Ionic的配置文件 ⱃ可以配置app的id，名称、描述起始页和一起其他配置

gulpfile.js     //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等

ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件

package.json    //存放npm安装组件信息

详细截图

plugin 目录

www

config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myproject761479" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myProject</name>
<description>
        An Ionic Framework and Cordova project.
</description>
<author email="[e-mail]" href="http://example.com.com/">
      Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>

ionic.project

{
  "name": "myProject",
  "app_id": ""
}

修改监听范围

{
  "name": "myProject",
  "app_id": "",
  "watchPatterns": [
"www/js/*",
"www/js/*/*",
"www/*.html",
"www/templates/*.html",
"www/css/*.css"
 ]
}

功能

进入项目目录下,执行ionic serve, 就会创建web站点, 自动打开项目的网址.
ionic会监测www文件夹的文件是否发生变化, 从而实时用websocket通知浏览器进行刷新, 不需要我们手动刷新.