best practice for web deployment

Question

I started learning sass and started using webpack to have a better development workflow for my projects (most time I develop wordpress themes). In the development phase I use gulp with webpack to bundle my js files and compiling sass.

After the development process I upload everything to my ftp and then the problems starting... when some styling changes I write the new styles directly in the compiled css file and when I need addional javascript I just write it in the minified, bundlet javascript-file and I think this is really bad.

So I wanted to ask you what is the best practice to handle changes (styling, addional js-code) in production on the server? (my server don't have node)

Answer 1

Well. First things first: you are correct that this is bad practice. Don't write your changes directly into the bundled production files. Your development environment should always represent the latest version of your code, then you bundle it and push to production.

So a first step would be to make your changes locally, in your development environment, bundle the files and then push them to your production server, replacing the old files.

I would also recommend that you use some sort of versioning tool, such as git, where you for example could keep a develop and a master branch of your code. Develop is where you work on your next version, master is your local representation of what's in production.

Regarding the deployment process it all depends on your production environment and how much control you have over it. I don't think using FTP to send up new files is to be considered bad practice, it's just a bit ardous. Most developers would probably prefer some sort of deployment script that automates that process. For Front End code I usually use a shell script that uses scp to write my changes to production. But that's just one of many possible solutions.

Answer 2

Considering your situation (wordpress + need to change css) I think that good (quick) temporary solution would be to use some custom css functionality. It used to be done with plugins, but I think that some recent version of wordpress has it inside in core.

You can then insert css in some wordpress form and it will be added to your page. This way you will not corrupt minified files and also you will be able to extract the changes you made and put them back in your development environment.