CSS/JS concatenation with gulp and how to reconnect in index.html file?

Question

Node.js

I can't figure it out. So there is an index file and there

<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>

Now I'm using gulp and concatenating it all into one file and minifying it and saving it to assets/js/app.all.min.js
How should I proceed now? It is necessary that during development I have what is at the top, all files one by one so as not to constantly run commands, and after uploading to the server, you need to change this to
<script src="assets/js/app.all.min.js"></script>
To automate the deployment, I use flightplan. So I can also run gulp commands on the server. But I can't figure out what to look for. What are the key words here? Or what can you recommend?

Answer 1

There are several solutions.
1. On the forehead - create another index.html, put it in the predefined folder, copy it from there to the build folder during assembly. Naturally, only the paths for the compressed version are registered in this file. This option is suitable if index is the only html file, and there will be no other differences in it.
2. We use a template engine - for example jade, or any other supporting include. We compile templates at the build stage.
In general, I would recommend not to work on an unassembled project. Those. it is better to immediately set up all watch-ers for automatic reassembly, and look only at the result in the browser. Otherwise, there may be situations where the build script is very outdated compared to the project, because there was no need to constantly build the project.
In other words, treat the assembler (if you decide to use it) the same way you treat tests - it's part of the project, not an external optional environment.