I have a very long CSS file because i have merged a couple of separate style sheets. Now i can see the repating classes on DOM Inspector but detecting and deleting the one by one is very hard.
I found some CSS minifiers on internet like https://cssminifier.com/ which is minifying the code and cleaning the multiple classes but since i am newbie it is very hard to read or edit them for me.
I have think of regex but so far i achived nothing. I am open to any kind of solution which does not include back-end coding.
I have found another solution and i've just wanted to share it, worked very well for me.
I've installed Node.js and installed CSS Pure:
npm install css-purge -g
Right after i have put my CSS file to somewhere that i can access easily, like C:\MyCSSFiles and run the following code inside that directory:
css-purge -i myFile.css -o myFile_purged.css
i stands for the name of the input file, and o stands for the name of the output file.
This process had removed the comments on the code tho... It is ok for me anyways.
Related
Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
I have half a dozen CSS files inside the folder "client/CSS". In the local server it works fine but after deployment the website only seem to load the bootstrap.min.css file. Has anyone come across this? Thanks!
Meteor tries to compile all the css files it finds into one file. If you have css missing, meteor is probably failing on one of your files and giving up. When this has happened to me the issues were around unmatched brackets.
Try putting your css text into CSSLint or something like it, one at a time, and see if they have errors.
Some other discussion here that says #media and #imports lines might also be cause some issues depending on their use.
Bounty: Bounty given to whoever share a standalone command-line CSS minifier for Windows (that is, run just like JSMin and CSSTidy, but actually minifies rather than 'prettify' and remove properties
Using Visual Studio 2010 Post-Build Events, I'm currently working to reduce our CSS/JS framework by merging and minifying the files into .min for production when building the solution/project.
For the JS I'm using JSmin.exe while for CSS, CSSTidy.exe
All okay for JSmin, but CSSTidy is removing all IE7 *property hacks and other properties used by display-table.htc (-dt-display:). If I use the --preserve_css=true setting, it keeps the comments (which I don't want) and the *property have the * stripped out (which I want).
Example:
.row-fluid .span1 {width: 6.382978723%; *width: 6.329787233638298%;}
Becomes (note it added linebreak as well):
.row-fluid .span1 {
width:6.382979%;
width:6.329787%
}
The question made here is what I'm looking for BUT the answer was given for HTML Purifier (which I don't use) instead of a CSSTidy alternative.
So the questions:
Is it possible to make CSSTidy NOT remove the IE7 hacks nor other invalid properties (which I actually use)?
Is there any other standalone/command-line CSS compressor (specially one which actually minifies rather than just tidy it)? (bounty for that)
Obs.:
The VS solution is TFS shared, can't make all devs install YUI or whatever other framework which isn't standalone, nor other languages frameworks like Ruby/PHP. Currently the jsmin.exe and csstidy.exe were the best since I just added both to the solution and call them on post-events.
After spending all Friday searching and not finding a good tool, today I gave a new shot and finally found a tool that minify both CSS and JS.
The name isn't much straightforward, that's why was hard to find: Microsoft Ajax Minifier
While asks for install, I just copied the folder contents to the project and worked like a charm.
For those who want to use it as Post-Event build:
Considering you have a .js folder and you want to concatenate and minify all .js files that end with .debug.js.
type "$(ProjectDir)\Scripts\*.debug.js" | "$(ProjectDir)tools\AjaxMin" -JS -comments:none –global:jQuery,$ -out "$(ProjectDir)\Scripts\myProject.min.js" -clobber
$(ProjectDir) is the project folder;
type is a cmd.exe command for displaying the contents of one or more files. So I order to get the contents of all *.debug.js files and leave in the STDIN;
Invoke AjaxMin.exe (no need for the .exe that I copied to my \tools\ folder;
pass arguments as needed with -argName:argValue;
use -out and a pathname with a file that will be outputted;
add -clobber to overwrite if file exists
Now everytime I need to update my css and js files, I re/build the project and voilá, minified CSS and JS.
By default SASS looks at the filename and determines whether to make a css file out of it. I'm wondering if there is a way to prevent this from happening.
We're building a large website and lots of front-end developers are editing the css, but we only have one dev server. Sure some things you can see happen locally, but often you can only see the real rendered way on the server.
So, when I push my compiled css file to the server, my co-workers' css gets clobbered until s/he commits and I do an svn:update, etc, etc.
However, if we were working in different SASS file, and those css files were getting created, I would only have to push up, say, the forms.css file instead of the whole thing.
Then for Production, we'd put it back to the way SASS normally works.
The only other way I can figure to do this is to do a mass rename of files, which seem very messy.
Thanks in advance.
The entire point of partials is that they don't get compiled into files. If you want a sass file to be turned into a css file, remove the underscore.
Your real problem seems the be that you're putting compiled CSS in your version control. Don't do that. Only commit Sass, and compile it into CSS server-side with a post-receive hook or something.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)