前端项目目录管理-部署结构

1、人生第一次作规划项目，之前都是跟着前端的老大，他把一切都规划好了，我跟着作就能够了，此次要本身规划前端目录结构，好紧张，参考了众多文章，结果仍是看不太懂，百度前端工具框架–fis，没怎么看得懂，因此没用，仍是本身好好想把，我仍是主要参考了，我上次作项目时，那个项目负责人是怎么规划项目的。

2、前端结构

　　一、首先我想到须要的功能就是，把js、css、UI组件、库文件、grunt，等这些工具分开摆放。

　　二、在不考虑html文件的位置状况下，在任何地方均可以调用到js文件、css文件、UI组件、库文件。

　　三、存放压缩文件的地方。还有一个存放全部完整库文件、完整UI文件的地方

　　

 

　　（1）src为主文件目录。

　　（2）bower_components为全部库文件、UI组件原文件的存放目录。

　　（3）dep为删减事后的全部库文件、UI组件的存放地址

　　（4）grunt放置grunt须要的插件，以及配置。

　　（5）js、css文件用来存放全部的编写的js文件、css文件。

　　（6）src_css、src_js为压缩事后的js文件，以及压缩事后的css文件。

　　（7）README.md文件为前端项目说明。

3、这么分类的考虑缘由

　　一、扩展型，无论之后须要添加什么效果，我只须要在js、css目录中添加相应的文件就能够了，命名方式我也想好了，能够用html页面的名字做为前缀，而后在加上相应功能的名字，这样就能够很好的造成命名空间。

　　二、复用性，我为何没有考虑html页面的位置，由于还要和后端程序员合做，他确定对页面会有必定修改，这一部分我就不太管他怎么修改了，我只需保证好html页面的制做，以及js文件，css文件的引入，我用src作为全部的主目录就是考虑到和后台合做的缘由，全部js、css、库文件都是单独的，不会有跟后端有任何交际，删除掉也是能够的，后期修改也比较方便。

　　三、性能，到项目上线期，我只须要将src文件中的，src_css文件、src_js文件、dep文件，交个后台就能够了，这都是通过压缩的文件，须要任何修改，我还有原文件能够做为备份。

　　四、README.md文件，我主要是考虑到，若是项目开发到一半，或者项目开发完成后，要有新人加入，或者是要移交项目时，我所须要提供的信息，将一切都写好了，第一，我本身不会忘记，教别人也能够叫他直接看，项目移交这一阶段，我也能够快速完成。

　　总结：说到底，这都是我想的，还有什么测试目录、代码规范等等东西我没有想到，好吧，菜鸟前端的第一次规划的项目就要这样开始了，之后再慢慢添加吧，

来自为知笔记(Wiz)