设为首页 加入收藏

TOP

AngularJS + CoffeeScript 前端开发环境配置详解(二)
2015-11-10 13:45:45 来源: 作者: 【 】 浏览:7
Tags:AngularJS CoffeeScript 前端 开发 环境 配置 详解
些插件同时支持,为了节省篇幅以下的指令都是以 npm install [包] --save-dev 方式安装


以下配置是从 generate-angular 中拷贝过来用的:


这里需要说明的是 app/index.html文件,也就是在配置中:


这个选项是给 usemin 插件去找脚本引用的,这里默认只是设定了 index.html 文件,因为这是一个Angular SPA项目,所以只有一个index.html文件作为主入口,如果你具有多个不同的视图模板,而且所引用的 script 都不要一样的话,可以将这些模板页明确地放在这个 html 数组选项中。


关于usemin的详细用法可以参考google的官方文档,以下只是对最常用的部分进行讲解,力求不去看官方那个庞大的英文文档也能快速地使用起来。


打开 index.html :


如果你足够细心你会发现这里有一些“与众不同的”标记,
实际上这不是注释,他们其实是 usemin 的专用配置标记。其中 是另一个插件 bowerInstall 的
配置标记,我会在下文再详细讲解。


这个标记其实很简单将他翻译过来就是:内的引用是由 bowerInstall 自动加入的,他加入后会修改index.html源文件,我们不需要手工加入。而对于某些比较坑爹的第三包,这里指的坑爹是他的最终输出文件放在一些古怪的深层目录中,而不是在他的发布目录的根下,那么我们才需要手工加入引用。如 ace-builds 这个包,他的发布文件是在 ace-builds/src/ace.js,同时他又提供了ace-build/src-min/ace.js 文件,对于这类包我们就不得不手工将具体的引用文件加入到 标记内,否则bowerInstall是不知道应该引用哪一个文件的。


而输出位置就是前面我们在 usemin选项中设定的:


也就是 项目目录/dist


接下来是 main.cssindex.js ,这两个是从不同的源来生成的,main.css 没有指定源,所以他会在当前的index.html所在位置中找 styles 目录也就是 项目目录/app/styles,那么具体需要引用那些自定的css(之前通过 less生成的)就在此设定。


解释得更为清楚一点就是 假设有一个 app/styles/custom.less 文件,那么在 index.html内加入这个引用应该是:


虽然custom.css在设计期并不存在,但他会被less编译器最终输出,所以引用时只要名字对了就行了。


同样的 build:js 的设置也是这理,只是这里增加了 .tmp 作源搜寻目录,就是说在 .tmp 找不到的源文件 可以到 app/scripts下找,反之亦然。


首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇用Java程序判断是否是闰年 下一篇AngularJS 的异步服务测试与Mocki..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: