AngularJS templated index with gulp - angularjs

So everytime i add/remove/rename a file of my angularjs project the index.html file is changed accorgingly by the inject gulp process.
The consequence is that if in a team more people change file paths the index.html file is constantly conflicted and must be manually merged.
How can i solve this?
I think that a solution can be:
index template file that is versioned but only contains placeholders for the injection of external scripts and then a gulp process that builds at runtime a temporary index.html file that is not versioned.
How can i achieve this?
gulpfile.js ->
https://gist.github.com/bolza-admedo/32fec5026d2433c346fd
gulp.config.js -> https://gist.github.com/bolza-admedo/2712631f093a901be73c

add your resulting index.html to .gitignore, I assume you are using GIT as your source control.
.gitignore:
dist/index.html
you make your changes to index.html, then your gulp process builds another index.html that is placed in dist folder for example, that is along with other build artefacts, like JS and CSS are excluded from git repository
rule of thumb: everything that is produced by your build - is excluded from git

Related

How to add React build files into existing JSP project

I have build a react app with some external libraries and would like to include it into an existing project that has nothing put JSP's.
Running the command react-scripts build generates files in a build folder.
build/asset-manifest.json
build/favicon.ico
build/index.html
build/manifest.json
build/precache-manifest.23802519359aee1ffa0ec2f3ba332c80.js
build/work.js
build/static
build/tab.png
What do I include and how do I include these files.
I have tried to add the index.html into index.jsp but is doesnt seem to work. Although I do see the title change to what is in my react app.
<%#include file="index.html"%>
or do I need to include all the files similar to how I added index.html
The index.html file does load a couple of script files in the build/js folder like so below.
<script src="/static/js/2.57fa75d6.chunk.js"></script><script src="/static/js/main.fe75a1b9.chunk.js"></script>
I have project with similar requirements as yours.
Some info needs to be render at server, but could not find proper way to do it in java, so I created maven plugin for that:
https://github.com/maasdi/react-assets-maven-plugin
You can try check it out, hope that can help with yours.

Any idea how to add manifest.json to html head dynamiclly

I realized that, by default, the umi project does not have manifest.json. I added the file to the public folder manually. Then, after compiling the application through the umi build command, my custom file is merged with thedist folder.
But is there any way to add the meta header to the self-generated index.html file?
I have not been able to find anything in the UMI docs. My guess, I need to build a script to insert it into the file after it is fully compiled.
Anything would be helpfull.
If you are using the pro.ant.design, you can find the index.html in /src/pages/document.ejs. It is a templated version of the index page.

For sencha app build , do we need to include all js files related to view in main.js(portal.js)?

I am using sencha cmd 6 for building my application.
my folder structure is
classic
src
model
view
account
jobs
portal
portal.js
controller
store
production build process execution is successful but when i load that build its giving .js file not found error.
So i include all js files in folder structure into main js portal.js then .js error is removed and build works.
But i dont want to include all these list of files in one single js, so can we skip the js include part from portal.js and use any property or attribute to include all js files ?
You can specify with * like 'Ext.chart.*' in requires section of Ext.app.Application.
Hope this helps.

How to prevent gulp from creating vendor and app files

I'm not sure if I'm correct or not but it seems that my gulp setup automatically creates a vendor.JS with all the dependencies I have in my bower.JSON and an app.JS with all th JS files i have on my project.
Both files are also uglified.
Is there a way to prevent that behavior and just get all the JS files injected in the index.HTML ?
First. If you want to set order of downloading scripts, you can use gulp-rigger.
After installing it you can create main.js file and set there:
//= path/to/script1.js
//= path/to/script2.js
...
//= path/to/scriptN.js
Next just uglify only this file.
Second. If you want to exclude files from gulp task processing, you can use next:
gulp.src(["/your_scripts_dir", "!your_scripts_js/*.min.js"]).
.pipe(...)
...
See also this answer https://stackoverflow.com/a/24648667/5397119

Why does the index.html file not reference sencha-touch-all.js when I run the package command?

I created a simple Hello World application using Sencha Architect. The program automatically creates an app.html file, not index.html. Everything works great in my browser.
Next, I run the package command from Sencha Architect and it creates 100's of files in my project folder, including index.html, app.json, packager.json, etc.
The main difference between the app.html and the index.html file is the following line:
<_script src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>"
** I added an underscore because this line was editted out
Without this line, the index.html doesn't work in the browser but the app.html does.
I could add this line manually to the index.html file but it gets overwritten every time I run the packager program.
Does anybody know why this is occurring? Is there an option or something I'm missing?

Resources