I'm writing static webpages, using html, css and javascript.
I use angular and write lot's of components. I'm testing bower to keep track of them. It works fine, however, I would like to compress all javascript and css in one file. I would also like to have a non–minified version of the files.
I recommend using Grunt (or Gulp if that appeals more to you) to bundle & minify your scripts & CSS, http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS
I am ASP.NET developer so it is pretty easy to load either the individual files for development or the minified versions in production. This is what it looks like in my applications:
if (HttpContext.Current.IsDebuggingEnabled)
{
{CSS or JS Links to individual files go here}
}else{
{minified CSS or JS goes here}
}
}
In the web.config you just flip the debug flag to false for production:
<compilation debug="true" targetFramework="4.5" />
Related
We're using script and style bundles to minify and bundle our resources. We're also using the StyleTransformer to transpile our .less files to .css.
coreCsss.Transforms.Add(new StyleTransformer());
coreCss.Include("~/Content/Common/Styles/core.less");
We also have a processor directive to only enable optimisations when building a non-debug configuration.
#if DEBUG
BundleTable.EnableOptimizations = false;
#else
BundleTable.EnableOptimizations = true;
#endif
The intention of the above is to allow us to more easily debug unpackaged and unminified javascript during development.
The problem we have noticed is that with EnableOptimizations disabled, then our .less files are not being transpiled and instead the raw .less is being served to the browser. Is there anyway to disable minification and bundling but still enable transformation? I would guess this is a fairly common scenario.
First, the code you have is completely unnecessary. Out of the box, EnableOptimizations is false in development and true in production. The only reason you might need to set it to something is if you actually wanted to enable the bundling in development (where it's disabled by default). That said, bundling is an all or nothing affair, if StyleTransformer depends on the bundling process to function, then if will have to be enabled in development, or you'll get exactly what you have.
Personally, I would recommend using something like the Web Essentials Visual Studio Extension, which among other things, will auto-compile LESS into CSS on save. Then, you can work with the LESS, and simply reference the CSS version. I'm sure there's other extensions with similar functionality. You can also set up build tasks to run gulp and such, but that's a little more complex.
I am developing a website when i have third-party plugins (javascript plugins, with css files and images) and i don't want to separate the plugin between stylesheets and javascript, i want to keep the plugins folder, and each plugin with the javascript and the stylesheet.
And i use different plugins in different pages of the webapp. So i put a "plugins" folder inside "vendor/assets" but i don't know how to load them in the webpage.
Do you know how can i do that? or do you have any advice for working with javascript plugins?
Regards,
Try adding this in your application.css:
#import "/vendor/assets/plugins/css-stuff.css";
and in your application.js, try this:
<script src="/vendor/assets/plugins/javascript-stuff.js"></script>
That should work for you, but if not, then say something here.
Why is it so forbidden to add line like <link href="/assets/stylesheets/bootstrap/bootstrap.css" rel="stylesheet"> in my application.html.erb file. How else do I insert it?
It's not "forbidden" outright - it just skirts a lot of important Rails conventions which will likely create problems & inconsistencies down the line
There are several elements to what you're asking. Here they are:
Layout
Firstly, you need to use the correct helpers in your layout:
#app/views/layout/application.html.erb
<%= stylesheet_link_tag "bootstrap/bootsrap" %>
The reason for this is the same as using helpers in other parts of your Rails application - as paths change between environments & certain "backend" functionalities of the system evolve, you can't rely on using vanilla HTML to call "Rails-centric" methods
A pro tip is that if there is any reference to a path, or an asset, you need to use the helpers which Rails provides
Asset Pipeline
Further to this, you need to appreciate how the "asset pipeline" works.
One of the big benefits of the Rails framework is that it gives you the ability to organize your assets in the most effective way - by keeping them in the /assets folder.
Whilst great for development, your problem will arise when you go into a production environment - Rails prefers to serve static assets in production, which means that the assets will be pre-compiled & access in the public folder:
In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.
To make sure this works properly, you need to use the path helpers to load the files dynamically; hence allowing Rails to access the files wherever they are on the system
--
Manifest
I would strongly recommend you look into the "manifest" feature of the asset pipeline:
#app/assets/stylesheets/application.css
/*
*= require bootstrap/bootstrap
*/
Is the included bundle tool in MVC good enough?
Is their any big reason not to use it?
I been working with squishIt in webforms and never been any problem. But now im on a MVC project and i've seen that MVC has it own bundle mecanism.
So should I use that instead?
Can it minify and gzip? Does it add any hash on the merged file as squishIt does?
Or is there any other solution on making the file unique on release?
Or is there any other one to use?
To answer your questions
Yes it minifies / gzip
Yes it adds a querystring to prevent caching
And (not a question), but Bundling also works with webforms
I would recommend using whatever you feel most comfortable with. The built-in bundling is fine though and easy to use, and has nice features for debug/live deployments.
I HAVE found that the minifier doesn't minify as efficiently as some others, though this usually isn't an issue as it will use the .min file if one is provided.
Say your bundle includes all scripts in a folder, and that folder has jquery.1.10.2.js and jquery.1.10.2.min.js, it will use the unminified file in debug mode and it will use the .min version in release mode. Then if you remove the .min file, in release mode the bundle will likely be slightly larger, but the end result will still be a minified bundle.
More Reading on the ASP.NET Bundling
And yes there are other packages, like YUICompressor. You can search NuGet for them, but I've always used the built-in bundling so can't speak to how good they are.
I discovered a really strange thing with the order of the output.
Im using those files:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Content/Script/json2.js",
"~/Content/Script/jquery-1.10.2.min.js",
"~/Content/Script/jqueryMobileCustom.js",
"~/Content/Script/jquery.mobile-1.3.2.min.js"));
The folowing output will be:
<script src="/Content/Script/jquery-1.10.2.min.js"></script>
<script src="/Content/Script/json2.js"></script>
<script src="/Content/Script/jqueryMobileCustom.js"></script>
<script src="/Content/Script/jquery.mobile-1.3.2.min.js"></script>
That's wrong!
But if I change the name of "jquery-1.10.2.min.js" to this: "jquery.1.10.2.min.js". It work's as it should. And ordering them as I want.
Do you know if there is a way to disable sortorder when using scriptbundle and include? Or why even does it react on a ' - ' instead of a ' . ' in my files.
I know it is a 'BundleFileSetOrdering' function but I like to specify it with a include.
I am using Ruby on Rails 3.0.10 and I would like to auto-build and load different CSS stylesheet files depending on if I am running my application in the development or in the production mode.
I would like to auto-"minimize" CSS files for performance reasons and to load those related "minimized" files because I do not want to show to the "public audience" the content of my comments present in my CSS file (note: users can access theme, for example, by using the FireBug plugin for the Mozilla Firefox browser). I would like to do that also for javascript files.
How can I do that?
P.S.: I am planning to switch to the Ruby on Rails v3.1...
In your layout you probably have something like:
<%= stylesheet_link_tag "production.css" %>
Just add another stylesheet there but wrap it in a conditional that checks the rails environment.
<%= stylesheet_link_tag "development.css" if Rails.env.production? %>
For Rails 3.0 there are many plugins to minify your css and javascript.
I use smurf.
gem "smurf"
Part of the process of minification is that it removes comments.
In Rails 3.1 production will uglify your javascript, so comments should be removed by default.
But if you insist on using a different stylesheet, take a look at the other answer.