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

一、人生第一次做规划项目，以前都是跟着前端的老大，他把一切都规划好了，我跟着做就可以了，这次要自己规划前端目录结构，好紧张，参考了众多文章，结果还是看不太懂，百度前端工具框架–fis，没怎么看得懂，所以没用，还是自己好好想把，我还是主要参考了，我上次做项目时，那个项目负责人是怎么规划项目的。

二、前端结构

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

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

　　3、存放压缩文件的地方。还有一个存放所有完整库文件、完整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文件为前端项目说明。

三、这么分类的考虑原因

　　1、扩展型，不管以后需要添加什么效果，我只需要在js、css目录中添加相应的文件就可以了，命名方式我也想好了，可以用html页面的名字作为前缀，然后在加上相应功能的名字，这样就可以很好的形成命名空间。

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

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

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

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

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/Zjingwen/p/4480642.html