Front-end project directory Management-deployment structure

One, the first time to do planning projects, before the front of the boss, he has everything planned, and I follow it can be, this time to plan the front-end directory structure, good tension, reference to a number of articles, the results are not too understanding, Baidu Front-end tool framework –fis, not how to understand, so useless, Or I think about it, I am still the main reference, the last time I did the project, the project leader is how to plan the project.

Second, the front-end structure

1, first I think of the need for the function is, JS, CSS, UI components, library files, grunt, and other tools are placed separately.

2, regardless of the location of the HTML file, can be called anywhere in the JS file, CSS files, UI components, library files.

3, the place to store compressed files. There is also a place to store all the full library files, complete UI files

　　

(1) SRC is the main file directory.

(2) bower_components for all library files, UI components of the original file directory.

(3) DEP is the storage address of all library files and UI components after deletion

(4) Grunt Place grunt required plug-in, as well as configuration.

(5) JS, CSS files are used to store all the written JS files, CSS files.

(6) Src_css, SRC_JS for the compressed JS file, and after the compression of the CSS file.

(7) The Readme.md file is a front-end project description.

Third, the reasons for the consideration of such classification

1, extended type, no matter what effect I need to add in the future, I just need to add the corresponding files in JS, CSS directory, the naming method I also think well, you can use the name of the HTML page as a prefix, and then add the corresponding function of the name, so that you can form a good namespace.

2, reusability, why I did not consider the location of the HTML page, because also to work with the backend programmer, he must have certain changes to the page, this Part I do not care how he modified, I just guarantee good HTML page production, as well as JS files, CSS file introduction, I use SRC as all the main directory is to consider and background cooperation reasons, all JS, CSS, library files are separate, there will be no communication with the backend, delete is also possible, late modification is more convenient.

3, performance, to the project on-line, I only need to the src file, src_css files, src_js files, DEP files, the background can be, this is a compressed file, need any modification, I also have the original file can be used as backup.

4. Readme.md file, I mainly consider, if the project development to half, or after the completion of the project development, to have new entrants, or to transfer the project, I need to provide information, will be all written, first, I will not forget, teach others can also call him directly to see, project handover this stage, I can also quickly complete.

Summary: In the final analysis, this is what I think, and what the test directory, code specifications and so on things I didn't think of, okay, rookie front-end of the first planning project will start like this, and then slowly add it,

From for notes (Wiz)

Front-end project directory Management-deployment structure