I've been using Sublime for more than 2 years, but now I've come to know the minification of CSS and JavaScript files as well. So I'm using Minify plugin, but this plugin only work in a separate .css .js file. But one might have styles in style tag as well. So how should I minify these styles?
Currently I'm using minifier.org do this.
This should not depend on your IDE but on your build system.
Related
We are currently using System.Web.Optimization to bundle both js/css files into one js or css bundled file called CacheBundle_(plus hash here). It is really hard to debug css changes without knowing exactly where the styles are located. So I am trying to figure how to get source maps to work properly.
In the compilerconfig.json.defaults, I have the sourceMap set to true and the sass files are generating the inline source map code (example):
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiQ29udGVudC9DZW50cml4L3Njc3MvbWFpbi5jc3MiLAoJInNvdXJjZXMiOiBbCgkJIkNvbnRlbnQvQ2VudHJpeC9zY3NzL21haW4uc2NzcyIKCV0sCgkibmFtZXMiOiBbXSwKCSJtYXBwaW5ncyI6ICJBQUFBLEFBQUEsS0FBSyxDQUFDO0VBQ0osZ0JBQWdCLEVBQUUsR0FBRyxHQUN0Qjs7QUFFRCxBQUM2QixtQkFEVixDQUNqQiwwQkFBMEIsQ0FBQyxJQUFJLENBQUM7RUFDOUIsVUFBVSxFQUFFLElBQUksR0FDakI7O0FBSEgsQUFLRSxtQkFMaUIsQ0FLakIsQ0FBQyxDQUFDO0VBQ0EsV0FBVyxFQUFFLEdBQUcsR0FDakI7O0FBUEgsQUFTK0IsbUJBVFosQ0FTakIsMEJBQTBCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztFQUM3QixVQUFVLEVBQUUsQ0FBQztFQUNiLEtBQUssRUFBRSxPQUFPO0VBQ2QsV0FBVyxFQUFFLENBQUM7RUFDZCxRQUFRLEVBQUUsUUFBUSxHQU1uQjtFQW5CSCxBQVMrQixtQkFUWixDQVNqQiwwQkFBMEIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxBQU01QixTQUFVLENBQUM7SUFDVCxjQUFjLEVBQUUsTUFBTTtJQUN0QixPQUFPLEVBQUUsWUFBWSxHQUN0QiIKfQ== */
But they are not showing up on any of the pages of the site.
I am fairly new to ASP.NET, so definitely could use some help on this. Also not sure if it is better to use grunt/gulp for minification/source maps over the bundle tools in WebOptimization either. Thanks!
I just downloaded the pack for jquery UI, and when I extract it I get these files:
My question is that what files should I include? There're a lot of files there I'm not sure which one I'll need to put into my folders for full functionality. I know for sure I need to include jquery-ui.js or jquery-ui.min.js but I also want the themes that come with it and use them on my webpage. SHould I include the css and files inside external and images too?
It looks like you just need the minified css and js files.
http://learn.jquery.com/jquery-ui/getting-started/
In Domino 9 dojo comes with the AMD loader which seems to be interfering with loading of external javascript libraries eg Jquery Mobile, Fullcalendar.
The quick solution is to load these external libraries before the dojo libraries. But this requires the Xpage property: "Use runtime optimized Javascript and CSS resources" to be set.
The problem with this is that images referenced in compressed css files will break. Eg font-awesome, jqueryui.
This is a major flaw in the product that these references have to be recoded in the css files for it to work.
So the question is can eg fulcalendar and it's dependencies be loaded via AMD in Xpages so we don't have to recode all css files referencing images?
What exatly is your problem with loading jquery. I am loading jquery and other js libraries like select2, dgrowl, jgrid without any problems
When using the "Use runtime optimized Javascript and CSS resources" setting, there are some additional options you can set directly in xsp.properties to stop aggregation of CSS files like font-awesome. In this instance use 'xsp.resources.aggregate.css=false' and you will be good to go.
See http://lotusnotus.com/lotusnotus_en.nsf/dx/xpages-performance-dojo-widgets-and-resource-aggregation.htm for full details of all of the options.
I am looking for a tool to optimize my website's complete build. I am using SASS as a CSS preprocessor and Uglify to create my JavaScript files, and a couple of more tools all tied together with Grunt. Also, the markup is in this case a single index.html file, but in other projects it's in either PHP files or in Liquid templates.
I am using BEM (block, element, modifier) to name my classes and sometimes, that leads to quite huge classnames, such as navigation__item__link--home or even longer.
I am looking for a tool that automatically converts the final, built CSS files in a way that it changes the class or id names to something like .a, .b, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.
I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with Grunt.
It sounds like you are looking for a tool called munch. It is a pre-deployment tool that does just what you are asking for. It is a command line utility that you point at your view (html), css and js files and it will shorten class names and ids while still keeping them unique and keeping referential integrity intact between all of the source files. There are also some handy options, like the ability to output a map file that lists what transformations it made. The documentation is pretty straight-forward.
FWIW, I am not affiliated with the project.
I would recommend Grunt for this.
The sass and css can be done with existing grunt-sass plugin and the javascript can use the grunt-uglify plugin.
While I'm not sure if there is a plugin that already does the custom uglification, you could easily write a plugin to do so. Grunt plugins are written in node, so it's pretty approachable if you're familiar with javascript.
I have a project which consist of a lot of static HTML and js files. I need a build tool that can concatenate and minify them.
I saw this great screencast that explains how to do it with ant and YUI. The only thing I'm missing is after the minified version is created , how can i replace references to the JS/CSS files in the HTML, so it will reference the new minified version?
Is there a better/easier tool for this (not GPL/LGPL license)?
Grunt is pretty good, and supports most of those things. This plugin will re-write your CSS link tags, though normally (and for JS) you'd just write the link/script tags to point straight to the minified version anyway, and continually have it build your files.
You can try minify JS and CSS. Minify JS can make 1 JS file merging multiple JS file and same for CSS.