一、项目目录结构：
D:\EldonZhao\git\Controller\web 的目录
2017/04/10 10:56 <DIR> .
2017/04/10 10:56 <DIR> ..
2017/03/06 20:24 41 .bowerrc
2017/03/06 20:24 436 .editorconfig
2017/03/06 20:24 11 .gitattributes
2017/03/06 20:24 62 .gitignore
2017/04/10 10:58 <DIR> .idea
2017/03/06 20:24 170 .jscsrc
2017/03/06 20:24 256 .jshintrc
2017/04/10 10:56 <DIR> .tmp
2017/03/06 20:24 310 .yo-rc.json
2017/04/07 16:54 <DIR> app
2017/04/07 15:11 1,003 bower.json
2017/04/07 11:38 <DIR> bower_components
2017/04/10 10:57 <DIR> dist
2017/03/06 20:24 13,054 Gruntfile.js
2017/03/08 10:07 <DIR> node_modules
2017/03/09 10:10 1,386 package.json
2017/03/06 20:24 285 README.md
2017/04/07 15:11 <DIR> test
11 个文件 17,014 字节
9 个目录 187,551,342,592 可用字节
其中dist目录是在grunt --force后生成的，应该就是打包后的文件。
二、压缩包目录：
D:\EldonZhao\git\Controller\web\dist 的目录
2017/04/10 10:57 <DIR> .
2017/04/10 10:57 <DIR> ..
2017/04/10 10:57 3,221 404.html
2017/04/10 10:56 <DIR> bower_components
2017/04/10 10:57 <DIR> images
2017/04/10 10:57 2,434 index.html
2017/03/06 20:24 45 robots.txt
2017/04/10 10:57 <DIR> scripts
2017/04/10 10:57 <DIR> styles
3 个文件 5,700 字节
6 个目录 187,551,338,496 可用字节
三、使用web服务器运行：
我这里使用的是nginx做简单的测试，主要涉及如下步骤：
-
a. nginx服务安装：
从官网下载nginx安装文件，然后安装即可，注意勾选把执行文件加入PATH的选项。
-
修改nginx.conf文件：
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root D:\EldonZhao\git\Controller\web\dist;
index index.html index.htm;
}
如上所示，主要修改location属性。
-
启动服务：
nginx的起停比较奇怪，不是杀进程就可以的，启动时直接nginx.exe就可以，但是停止时需要执行nginx.exe -s stop。nginx.exe -h可以知道原因。
-
访问本地80端口：
step1.png
可见打开页面并不是想象那样了，查看错误信息是某些组件没有引入成功。
Uncaught Error: [$injector:modulerr] Failed to instantiate module webApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
四、解决js引用问题：
-
a.问题发现：
这个问题的定位过程还是很痛苦的，也趁此机会了解了【grunt整合版】30分钟学会使用grunt打包前端代码，真的是一片很好的文章，对grunt的结构有了更加深刻的了解。
在根据文章走读Gruntfile.js文件的时候发现如下代码：
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
sourcemap: true
}
}
},
这段compass代码感觉很有用处，它定义了各种类型资源文件的打包配置，但是脑海闪过一丝不详的感觉，好像从最开始搭建环境的时候，我的compass组件就不是很好用，重新检查一遍编译日志，看到如下一部分内容：
编译日志太多，找不到了....反正就是compass没有安装的告警，使用--force可以跳过。
跳过是跳过了，但是问题就是compass配置的事务都不执行了，导致了文件没有编译到dist目录去。
-
b.问题解决：
感觉首先还是要解决compass组件的安装问题，开始的时候一直查找grunt-contrib-compass的安装解决方法。后来了解到compass是一个公共组件，可以通过ruby安装：
gem update --system && gem install compass
安装好compass后重新编译：
grunt build --force
发现编译日志中有如下日志，说明compass组件没有问题了：
Running "compass:dist" (compass) task
directory .tmp/styles
write .tmp/styles/login.css (1.515s)
write .tmp/styles/main.css (1.932s)
write .tmp/styles/natgw.css (2.006s)
write .tmp/styles/nattbl.css (2.016s)
write .tmp/styles/oplog.css (2.148s)
Done, without errors.
打开页面还是提示部分引用不存在，页面出现问题，但是可喜的一点是，查看dist目录发现css文件都打包到dist/styles/main.edb685c7.css文件中了，说明修复compass问题还是很有必要的（前期这个文件大小为0，根本没有打包css文件）。
-
继续解决js应用问题：
这里的解决还是有点碰巧的，请看下图：
requirejs.png
图中方框里面的代码开始是放置在代码段中的，导致没有编译完这部分代码都被删除了，发现这个代码段中的引用都是自动加入的，所以不能添加到这里。 后来修改到代码段中，就出现了上面说的问题，编译都没有问题，但是引用的js不全，后来比较知道，这段代码中的引用的js都是本项目自身创建的js文件。
所以这部分手动添加的依赖只能放在上图红框中，(⊙﹏⊙)b。
重要：上面房中红框中也是不对的，需要放在和之间。
问题回归：
使用grunt build打包代码，使用nginx服务加载dist目录下静态文件，chrome打开localhost:80地址，页面正常显示：
step2.png
