I want to add the CDN-hosted Firebase Javascript file to my application based on ng-boilerplate.
I tried just adding it to vendor_files in build.config.js, but it isn't included in the output index.html - maybe because it can't find the file locally?
The application works if I add it to the index.html template directly, but that's unclean and breaks the tests.
Is there a way to add external files to ng-boilerplate or modify the Gruntfile to add them?
According to the docs,
the vendor_files.js property holds files to be automatically
concatenated and minified with our project source files.
so that won't work. According to Kato's link, it's still under consideration for v0.4.
Have you looked into angularfire?
As for having the files hosted from firebase cdn, add the following right after (or before) the google plus script:
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
Related
I have multiple javascript files that are bundled and minified in one file "bundle-min.js" and is linked in one of my html page. Now I want to introduce versioning in those js files. Means when I change any of my js file, I want my bundle file version to be updated. I have found gulp-version-append but I am not sure whether it will help me or not. Also I don't want to update the reference link of bundle-min.js in my html file again and again. I want my html page to get the latest version it self somehow. Is this possible and what's the best approach? Any help?
There are plenty of modules available for this. it depends on your module loader.
Webpack
https://www.npmjs.com/package/webpack-version-file-plugin
https://www.npmjs.com/package/versioning-webpack-plugin
or you can use define plugin for this
https://webpack.js.org/plugins/define-plugin/
Refer
How can I inject a build number with webpack?
I have a website built on the MEAN.io stack and am trying to generate PDF files on the client side with pdfmake. One can install pdfmake with bower (it looks like they used browserify to generate the client-side version).
I am struggling to get it to work. Either the injection of pdfmake does not work (I assume it cannot be found) or the pdfmake object is undefined (if I don't add pdfmake as a dependancy). I assume pdfmake needs to be packaged in some way to make it accessible, but I don't know how.
In config/assets.json I added:
"bower_components/pdfmake/build/pdfmake.js"
In the HTML corresponding to the JS file in which I want to use pdfmake I added:
<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>
I have set up a basic version on Github. I would really appreciate it if someone could explain to me how to make it possible to make pdfmake available for use in packages/system/public/controllers/index.js, for example.
I was recently have a similar problem. It seems to come from the fact that pdfmake isn't yet "browserfiable." After much troubleshooting, I was able to get it working through simply including the two client-side scripts pdfmake.min.js and vfs_fonts.js via script tags in my build directory. That's it.
Try moving the two script tags out of the bower_components directory and into your build directory. Make sure they're before your bundle.js, or generally whatever scripts need pdfmake.
I don't fully understand how bundled scripts are able to see the global objects created by these two files, but I think it's because they're setting pdfMake to the window object:
(The vfs_fonts.js file starts like this:)
window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs
Since Browserify sets the global object to window, this approach seems to work. (Though I don't fully understand why... see this Github issue on their repo for more explanation and the deglobalify npm package.)
Here's another relevant post I was able to find.
How can I include a set of JS files in my Karma Config that are dynamically loaded in my code?
I'm not sure how I can load those files dynamically. We are trying to avoid having to download them and maintain them separately.
Google hasn't helped much so some help would be great.
Create a js file that loads them and add this to the list of files in the karma conf somewhere near the top.
I think there are two ways to do this kind of thing:
Include the files in the files array, specifying a pattern and setting include to false.
Have a look to the RequireJS page on the Karma website for an
idea on how this works.
Use proxies. Have a look on the Karma configuration page.
I am using the tinymce jquery plugin the version 3, there I have included the whole folder which I downloaded from their site, and linked the script in my jsp.
Here I need to link only one script file as you know. jquery.tinymce.js I have did that, but for using the advanced theme still I need to add some supported script files too.
I am not getting which are the only required files we need to add so I end up in adding the whole folder I guess which is not required.
Here is my project folder where I added the complete folder.
In the image we you can see the only file we are linking in jsp.
The question is what are the only required files I need to keep so that tinymce works fine with advanced theme and I want to remove the unwanted files and scripts which I am not making use of them.
Can anybody suggest me what are the files which are required.
You can fully remove the "examples" folder under tinymce.
I don't advice to delete any further, because normally the size of files is small and not worth the trouble. If you do want to continue deleting you can remove license.txt and start removing unnecessairy plugins :
Example give : if you don't want to use the Emoticons (found under plugins), delete the folder. All information on the plugins in TinyMCE 3.X can be found here http://www.tinymce.com/wiki.php/TinyMCE3x:Plugins
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.