How to properly organize the process of developing large sites?

Question

Computer networks

Today I realized that I can no longer support projects as a front-end developer ...
Now the process is as follows:

1. site testing: someone finds a jamb in the site interface, or the design on the site is slightly changed
2. search and download: I open Filezilla and via FTP I try to find the css I need in the whole pile of files (and there are 20 css pieces)
3. edit: at the very end of the css (about 2000 lines of code) I add a css rule, no matter what (no time to look in all this where it is better to insert a new rule to preserve some CSS structure)
4. saving and copying the file: I save my CSS in Sublime, switch to Filezilla and upload it back to the server

To make a tiny correction (in pure Chrome, locally, it can be done in 20 seconds), it takes about 5 minutes. There are a lot of corrections and all this is already tired, because I think there is a more correct way to support projects.

For example, again there was a task to fix something (or to make a project from scratch). And it seems to me that the process should be like this (please correct what is wrong):

1. create\change the project and its structure (locally)
   
   • create folders/files
   • programming \ layout (take Bootstrap)
   • write in .less with live editing (when changes are immediately visible in Chrome)
   
   
2. testing on a local server (working with Smarty)
3. upload the project to GitHub (commit)
4. build and deploy the project (build and deploy):
   
   • compile .less to .css
   • collect all css and js in one file
   • minify css and js files
   • upload the necessary files to PRODUCTION-hosting
   
   
5. testing (on PRODUCTION-hosting)
6. Upload to local computer from GitHub

Then we start again from point 1 (iteration is like this). Tell me, do I understand the development process correctly? And will my version ACTUALLY help in improving the convenience and efficiency of development?

Answer 1

BEM + Git + CruiseCountrol will save you

Answer 2

If all your points are automated (say, deploy via a CI server), then yes, it will be more convenient. Using git and less will already be more convenient.

Answer 3

We use CruiseControl and TortoiseSVN , very handy.
UPD: In fact, it happens like this: we download the necessary repository with a tortice, make code changes and commit the changes. Cruise Control sees that there have been changes, runs tests, and if everything is OK, publish.

Answer 4

If you don't have experience with CI setup, it's a good idea to first just update/export from the VCS to the filesystem on the server. For example via SSH. In this case, there will be troubles with the configs, but they are completely solved by adding files to ignore. What you wrote, especially in points 3 and 4, is correct, especially if you like less, but not trivial: not all JS files should be collected into one, different js are included on different pages. To compress CSS, always use absolute paths to images. Protection against double minification… It’s better not to rush into the pool with your head, but go by the method of gradual improvements:

1. VCS+export
2. CI server + deploy script
3. Minification, less and other goodies