I've created a basic angular project using yeoman's angular generator. While the standard Grunt process is fine in general, I do have my concerns with the way how the views get all minified into the same JS File.
If I have about 10 views on my Page, the requested view can't be seen until 'all' pages have been loaded, since their all in the same file.
I now want to modify the Grunt process, so that each HTMLviewfile get minified into its own file in a views directory. The main angular router should now request the view files as they are requested by the client (user).
Is there any way you could help me. All my research has resulted that the module 'grunt-angular-templates' is responsible for minification of all HTML views. I've yet to find out, how to keep the files from getting merged into a single file.
Thanks!
I found out, that in order to not minify all the view files into the script.js file, you have to remove the ngtemplate process from you gunt build task
Related
I'm importing a external web template I found in bootstrap to build a intro page. It has it's own js, css , html files.
However I found it is troublesome to transfer the beautiful external web to meteor format by hand. How you deal it smartly?
Now I only can figure out that replacing the html() when the intro is created. (although I still don't know how to do it exactly )
Template.intro.onCreated(function(){
$('html').html('the external code');
});
The simple and dirty way is to put all js, css, and html into public\ directory of your meteor app since this directoy is served "as is"
After that you can start converting your js files (taking into account local and global namespaces) and convert html files into Handlebars templates. Converted files you should move to client folder. Css files you can put in client folder to allow its minification and remove references to css files from Handlebars templates of html pages.
/public folder is usually used for static files like images. I suggest putting everything in a client folder. Usually there will be a lot of redundant js files coming with the template (bootstrap, jquery, fontawesome, etc). Best thing to do is use http://atmospherejs.com/ packages for those libraries and you will most likely be left with the templatename.js file which deals with the html within that template which you'll have to "meteorise"
I have a project that is using ASP.NET Bundling. I am having an issue where the .map files are throwing an error on the client side even though I have explicitly excluded them from the bundling using the ignore list.
bundles.Add(new ScriptBundle("~/bundles/stuff").IncludeDirectory(
"~/Scripts/stuff/", "*.js", true));
bundles.IgnoreList.Ignore("*.map");
When I run the project I get a 500 error with the following message:
The view 'The controller for path '/stuff/Charting.js.map' was not
found or does not implement IController.' or its master was not found
or no view engine supports the searched locations.
How do I get this to properly ignore the .map files in the directory while bundling?
If I understand you correctly you shouldn't be having any real issues.
.map files allow a browser to download a full version of the minified JS. It is really for debugging purposes.
The .map missing shouldn't a problem. You only know it is missing, as the browser has had its Developer tools opened and is just informing you that the JS debugging won't be as good as it could be.
This is why libraries like jQuery have the full, the minified and the map file too.
See this article for a full explanation of .map files.
Alternatively, you could actually include the .map files in your project.
We got a wrap bootstrap theme call ace admin. We are trying to integrate the theme into meteorjs.
The structure of the ace admin files folder is:
assets
avatars
css
fonts
images
img
js
build
demo
files
lib
several javascript files here (*.js)
dist
avatars
css
fonts
images
img
js
By following the tutorial here
I moved all the static content such as images, fonts, etc to client folder, javascript related folders - (assets, build, dist and all the related content) to public folder.
The problem that I am facing it - Meteor is not loading the javascript files inside the public folder.
Could someone help? Thanks.
Edit:
Ok. Finally. Thanks to #Ethaan. After spending almost 2 days figuring out what the problem- its with the javascript loading dependencies. If anyone is facing similar problems - make sure you load all the dependencies first and then load other files.
Do everything in the link provided in the above url that I mentioned and then move all the js folder files to client.
You should know some things about meteor structure, You can read docs
/lib folder its where you put the code you want to share between server/client, code like Routes,Collectios or other code ho is available on server/client(if you put code which use "window" object you will have issues, since windows objects its undefined to the server.)
/publicfolder here is where you put the images, logos, fonts, etc (you get the idea)
/client folder here is where you put the code which will be available only to the client
/server here is where you put the code only available on the server
I recommend you to read the docs, this was just a quickly explanation.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)
I am currently working with web optimization bundler that is part of the .net framework that bundles up both my javascript and css in to a single file. This works nicely.
I have run in to a problem with it though. See the following code:
BundleTable.Bundles.Add(new ScriptBundle("mybundle").Include(
"~/Scripts/globalize.js",
"~/Scripts/jquery.validate.js",
string.Format("~/resources.axd")));
This bundles up all the javascript from the files but also I would like to bundle the output from my .axd http handler. This returns javascript. However the javascript never gets included in the bundle. If I run the handler in my browser, no issue, javascript is returned.
I am wondering maybe the bundler does not recognize the .axd extension and therefore does not attempt to request the file. Any ideas if this is the case and the work around?
Correct, you can only include files into bundles, it will not make requests to the axd for you. What you can do is manually hit the axd, and save the file to disk and include that into your bundle.
I just wrote a script bundle for resx - you can find the source here
https://github.com/MrAntix/sandbox-resx-script-bundling
In BundleConfig, add your bundle ...
bundles.Add(
new ResxScriptBundle("~/bundles/local")
.Include<JsResources>("app")
);
It creates a model for each resource like this ...
window.resources=window.resources||{};
window.resources.app = {
"HelloWorld": "Hello World, from JSResources.resx"
};
And you can use it in your JS like this ...
$("h1").append(window.resources.app.HelloWorld);
... for example