Recently I added conf/ApplicationResources.groovy (using resources plugin) file to my project structure. Here I keep my modules definitions for javascript and css libraries. Before, I was importing libraries with classic g:javascript tag.
Now every time when javascript code changes (while server is running) I get client side js error saying
"Uncaught SyntaxError: Unexpected end of input".
So for each javascript change application needs to be redeployed, what I dont want.
I have also declared .js files to be excluded from resources plugin pattern, but the problem remains. Any advice/help will be appreciated.
Solution from Sérgio Michels that worked:
Add to Config.groovy: "grails.resources.debug = true;"
To avoid cache issues with the Resources plugin, in all my projects I'm using the config grails.resources.debug = true in Config.groovy.
You still use <r:require modules=""/> in your GSP, but in development mode the source will show all files included instead of merging them.
Related
I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
I am new to Magento but work in webdev for several years now.
My goal is to optimise an existing Magento installation in terms of speed.
Looking at all the JS and CSS files used within this installation the first thing I aim for is to combine those file or better reduce the number of modules used. I am aware of the "combine files" function within the config menu, but that does lead to conflicts between jQuery and prototype which is why I am trying to first get an understanding of what types of frameworks/modules etc are used.
This is a list of all JS-files required by the homepage of this installation:
jquery-1.12.3.min.js
prototype.js
ccard.js
validation.js
builder.js
effects.js
dragdrop.js
controls.js
slider.js
js.js
form.js
script.js
menu.js
translate.js
cookies.js
func.js
jquery.easing.1.3.min.js
efects.js
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
jquery.noconflict.js
swiper.min.js
jquery.easing.js
jquery.scrollTo.min.js
jquery.global.js
remodal.min.js
jquery.themepunch.tools.min.js
jquery.themepunch.revolution.min.js
easyzoom.js
ios-orientationchange-fix.js
jquery.swipebox.min.js
jquery.themepunch.plugins.min.js
jquery.themepunch.revolution.js
jquery.slider.js
jquery.selectbox.js
jquery.bxslider.min.js
jquery.tweet.js
cookieconsent.min.js
gtm.js?id=GTM-5W7V6F
analytics.js
ec.js
What would be the best approach to clean up this list in order to keep functionality while reducing request and load?
For starters i see that you load 2 versions of jQuery
jquery-1.12.3.min.js and jquery.easing.1.3.min.js
What i did was combine the javascript files with the config settings like you said and use the jQuery.noConflict() https://api.jquery.com/jquery.noconflict/. Don't use the $ (dollar) sign to use jQuery but write it fully because prototype also uses it and it creates problems sometimes. There will be some problems which you should try to fix. Sometimes it's just adding a ; to the end of the file or function.
I then tried to figure out what code was needed and what wasn't so i could remove some of it.
Magento Inbuilt provide this things
Login admin panel
goto System->configuration->Advanced->Developer->JavaScript Settings and set Merge JavaScript Files to yes
You can do same for css and you will see very few request in your web page
I have a website, which uses different javascript plugins, and a bunch of js files to run (~30). I wanted to try to group these js files into a single file, and tried to apply a basic minification to it(only removing whitespaces) using Google's Closure Compiler.
I've introduced all of the js files, in the same order as they are included in my page to the Closure Compilers online version, and run the compilation. The parameters for the compilation looked like this:
// ==ClosureCompiler==
// #output_file_name default.js
// #compilation_level WHITESPACE_ONLY
// .... bunch of javascript files here
// ==/ClosureCompiler==
The compilation ran with success, there were neither warnings nor errors. I then fetched the result file, copied it to my server, and tried to include it to my page.
The page runs, but a strange error appears, which stops my javascript in the middle of it's operation:
TypeError: event.feature.values_ is undefined
I've tried to fetch the space where this error is happening, the code there looks something like this:
this.vectorLayer.getSource().on("addfeature",function(event){if(typeof event.feature.values_.type=="undefined")return;
This is something which my own javascript code is doing, but this part of the code shouldn't even run when the page is loading. When I use the separate javascript files, the page loads just greatly, without any errors, but with the white-space removed, and the files combined, this error appears.
With basic logic, I tought that by adding together the .js files in the same order in which they are included on my page, and only removing the white-spaces to get a smaller file size shouldn't result in any errors, as the browser loads the js files in synchronously anyways. Am I mistaken in this regard? If not, what could the possible reason for this error be?
EDIT 1:
Okay, so I narrowed down the problem to a single .js file, the javascript file of OpenLayers. If I do not compile that file, and include it separatly, everything works fine. What could be causing this strange problem?
As it turns out, this was caused by a strange caching mechanism on Google's side. Restarting the Closure Compiler, and reintroducing all the js files once again, then recompiling it, solved my problem.
Thanks for the comments guys!
I just downloaded the latest version of angular-seed, and I noticed a file I haven't seen before (in any project). There is a index-async.html.template file within the app folder. I know enough to know what asynchronous loading is, but I have never seen a .template file used in web development before. Does anyone out there know what this is used for, and if there is any benefit to using the index-async.html.template vs. just the regular index-async.html?
It looks to be used solely when using the Angular-Seed update feature. If you look into the update-angular.sh file in the scripts directory you find this:
# Update the inlined angular-loader in app/index-async.html
sed '/##NG_LOADER##/{
s/##NG_LOADER##//g
r app/lib/angular/angular-loader.min.js
}' app/index-async.html.template > app/index-async.html
So, it seems that Angular-Seed will auto replace some dependencies when you use the update. It does this by token replacing in .template and then overwriting index-async.html.
So, it isn't to be used in web development.
I've configured Django Pipeline (verison 1.3.15) for a single group of JS files. I've configured them in the same order that they appear in my page normally. Everything works fine with collectstatic, etc. When I view the source, everything appears to have been correctly crammed into 1 monolithic JS file, but when I load the page, things are wrong. The jQuery plugins I've included (which worked fine before) aren't attached to jQuery (verified via Firebug) (jQuery is passed to a closure for my plugins, not by $, so it's not a noConflict() issue). Is there a known issue with Pipeline that I somehow have overlooked, where you can't include multiple JavaScript files together under some circumstances, due to the way they're compressed (Note: I'm using the JSMin compressor)?.
The problem has most likely nothing to do with the pipeline but with js syntax of your js files. Consider the following scenario:
// file1.js
var foo='bar'
and
// file2.js
var cat='dog'
When both of the files are separate the browser has no issue processing the js since it automatically can figure out the end of each expression however when you combine and minify the two files you get something like:
//combined.js
var foo='bar' var cat='dog'
The above is clearly a syntax error. So most likely something similar is happening in your case. To solve this make sure that all of the files have absolutely valid js syntax (which is most cases are just missing semicolons).