kasparsd / minit Goto Github PK
View Code? Open in Web Editor NEWA WordPress plugin to combine CSS and Javascript files.
License: GNU General Public License v2.0
A WordPress plugin to combine CSS and Javascript files.
License: GNU General Public License v2.0
Hello @kasparsd,
As we all know some stylesheets has @import
functions, and we also know that @import
works only if its on top, for the moment MINIT doesn't move @import
functions to the beginning of the minified file.
BUT it will better if MINIT, just replace the @import
with the content from the @imported
file.
by the way thanks for the great plugin ;),
Sidati
I've found https://github.com/tchwork/jsqueeze/blob/master/src/JSqueeze.php which passes Uglify's tests.
add_filter( 'minit-content-js', 'minit_jsqueeze' );
function minit_jsqueeze( $javascript ) {
require_once( 'lib/JSqueeze.php' );
$jz = new Patchwork\JSqueeze();
return $jz->squeeze( $javascript, true, true, false );
}
The latest trunk version of Akismet uses wp_print_scripts() to print inline jQuery script:
wp_print_scripts( 'akismet-form' );
which causes Minit to return a "minit" file with incomplete dependencies.
I'm facing an issue (in conjunction with W3 Total Cache and Google Maps geocoder) I've not been able to resolve myself for a while now:
A client's site is using "Local SEO for WordPress SEO by Yoast" and regardless what I try - I always have to purge Minit's cache manually to get the implemented map running after any content or code updates on the site.
Not sure if there's a conflict or if I'm just doing something wrong...
I've already done the following (as suggested in #34):
function minit_cache_bump_init() {
$purge_actions = array(
'clean_post_cache',
'edit_term',
'publish_post',
'comment_post',
'edit_post',
'wp_update_nav_menu',
'activated_plugin',
'deactivated_plugin',
);
foreach ( $purge_actions as $action ) {
add_action( $action, 'minit_cache_bump' );
}
}
function minit_cache_bump() {
update_option( 'minit_cache_ver', time() );
}
And this (as suggested in #20):
function flush_w3tc_on_minit_purge() {
if ( function_exists( 'w3tc_pgcache_flush' ) ) {
w3tc_pgcache_flush();
}
}
And I've also excluded related scripts:
function exclude_my_file( $exclude ) {
$exclude[] = 'jquery';
$exclude[] = 'wpseo-local-frontend';
$exclude[] = 'maps-geocoder';
return $exclude;
}
add_action( 'init', 'minit_cache_bump_init' );
add_filter( 'minit-cache-purged', 'flush_w3tc_on_minit_purge' );
add_filter( 'minit-exclude-js', 'exclude_my_file' );
But any time the site is updated two scripts are missing from the page source:
//maps.google.com/maps/api/js
and
wp-seo-local-frontend.min.js
The map (and those files) will only show up again when I manually purge the Minit cache. Any idea about this?
When there are version strings, the scripts don't seem to get combined. This is causing problems when individual files dependent on juery get loaded before jquery.
I ended up removing the version strings altogether, so I can't investigate this further for now but can probably install the plugin on another blog and try to duplicate the issue later.
I understand that there are probably sound reasons for this but given Wordpress's penchant for adding strings all over the place, perhaps the plugin needs an option to ignore unless an exception is made or something.
Also, pagespeed insights seems to be showing that the combined file is not minified.
I have problem when using minit with wp super cache.
how to automatic it?
Hello.
Thanks for the awesome simple useful plugin. I'm not good php developer. I want to integrate your plugin on my theme. I need to minify JS, CSS files from my theme options panel. How can i minify in each case.
Thanks again.
Hey @thomasmb -- could you please test the extra-data-support branch on your site?
Here is the updated and simplified regex.
Hi @kasparsd,
Why not add a Purge Button in the admin bar ??
add_action('admin_bar_menu', function(){
global $wp_admin_bar;
$wp_admin_bar->add_node(array(
'id' => 'minit_purge_button',
'title' => __('Purge Minit', 'minit'),
'parent' => false,
'href' => add_query_arg(array(
'purge_minit' => true,
'_wpnonce' => wp_create_nonce('purge_minit')
), admin_url()),
'group' => false,
'meta' => array()
));
}, 999);
Is it possible to exclude some pages or posts from not being Minified?
Hello.
Love this plugin.
Could anyone give a little help on how to exclude some script from Minit?
Iยดm using the filter minit-exclude-js but i cannot quite make it work.
I've tried:
add_filter('minit-exclude-js','exclude_from_minit');
function exclude_from_minit()
{
wp_enqueue_script('easing');
}
and
add_filter('minit-exclude-js','exclude_from_minit');
function exclude_from_minit()
{
get_template_directory_uri() . 'js/jquery.easing.1.3.js';
}
but the script is not excluded from the minit.js file.
I know i am doing something wrong but can't figure it out.
What's the correct way?
Hi, trying the plugin and seems to work great (css is combined, js scripts don't break the site), it's only missing the minification. Are there any settings to enable uglifyJS or YUI compression?
Thanks
Hi,
First of all, thanks for the great plugin!
The only issue I have noticed is that it ignores styles added via wp_add_inline_style() function.
For example I have this:
wp_register_style('thr_style', THEME_URI . '/style.css', false, THEME_VERSION, 'screen'); wp_enqueue_style('thr_style'); $thr_dynamic_css = 'div.example{ display: none;}'; wp_add_inline_style('thr_style', $thr_dynamic_css);
This is just an example, $thr_dynamic_css is actually dynamicaly generated css string which is appended to a main css file. So, when I use "minit" everything is ok with the main css file, it just excludes style appended via wp_add_inline_style.
Can you please take a look?
I'm probably messing up or missing something important, but excluding Jquery like that
function exclude_my_file( $exclude ) {
$exclude[] = 'jquery';
return $exclude;
}
add_filter( 'minit-exclude-js', 'exclude_my_file' );
seems to fail (partly).
I can load Jquery in head, that works without excluding (I guess minit doesn't touch it then?) but when I specify to load in the footer by
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '', true );
it's async'd all the time... (with and without excluding)
Could this be an issue of my hack to dequeue the native WP Jquery and enqueue'ing Google's CDN version? If yes: is there a way around it?
BTW: Great plugin! I really love smart, fast & tiny solutions :)
How could CSS url()
-s be normalized?
http://chrisdry.wp/wp-content/themes/scribe/css/../fonts/Pe-icon-7-stroke.eot
Hi,
Thanks for the plugin - unfortunately had to remove it for now as it broke the CSS & I don't have time to fix it at the moment.
After deactivating and deleting the plugin, it has left behind the minified js in the uploads folder which it says I don't have permission to delete. This in turn (I think) has broken some js on my homepage. Is there a way of changing the permissions so I can access & delete this folder.
Sorry, I'm not a professional developer so there are still a lot of things I need to learn!
Thanks, Karys
Example No1: minit-minify.php
add_filter( 'minit-content-js', 'minit_jsqueeze' );
add_filter( 'minit-content-css', 'minit_cssmin' );
function minit_jsqueeze( $javascript ) {
// https://github.com/tchwork/jsqueeze
require_once 'lib/JSqueeze.php';
$jz = new Patchwork\JSqueeze();
return $jz->squeeze( $javascript, true, true, false );
}
function minit_cssmin( $stylesheet ) {
// https://github.com/natxet/CssMin
require_once 'lib/CssMin.php';
return CssMin::minify( $stylesheet );
}
Hello.
Thanks for theme awesome simple plugin. I've integrated your plugin our theme. but theme check shows me one warning for minit.php.
WARNING: file_put_contents was found in the file minit.php File operations should use the WP_Filesystem methods instead of direct PHP filesystem calls.
Line 161: if ( ! file_put_contents( $combined_file_path, $done_imploded ) )
How can i fix it?
Thanks.
This is important for #48.
get_data()
https://github.com/WordPress/WordPress/blob/master/wp-includes/class.wp-dependencies.php#L257localize()
https://github.com/WordPress/WordPress/blob/master/wp-includes/class.wp-scripts.php#L235add_inline_style()
https://github.com/WordPress/WordPress/blob/master/wp-includes/class.wp-styles.php#L139I have rewritten most of the code to make it easier to maintain.
It would be great if more people could test it before it's officially released. Here is the ZIP file https://github.com/kasparsd/minit/releases/tag/0.3-beta.1 or you can checkout the feature/restructure
.
minit-exclude-js
filter.<script />
tag is now async
by default.version
for cache busting during updates.hi,
thanks for the good idea of a simple minifier for js and css.
But seems not to work with wordpress child themes.
I guess the error is that the necessary @import command to get the parent theme css is not correct translated. Seems like the path gets screwed.
thanks!
Looks like there is no filter for doing that https://github.com/WordPress/WordPress/blob/master/wp-includes/class.wp-scripts.php
/* TOC:
- minit-6eaa7fd0bd3f5cd86377f82510bfed97
*/
/* Minit: http://chrisdry.wp/wp-content/uploads/minit/6eaa7fd0bd3f5cd86377f82510bfed97.js */
/* TOC:
- jquery-core
- jquery-migrate
- jquery
- aqpb-view-js
- comment-reply
- gravity_plug_modernizr
- gravity_plug_easing
This would save minutes (if not hours) - pretty hard to - go to plugins / scroll to minit / hit purge - all the time. Perhaps something like W3TC with integration into admin menu and toolbar.
Or - as an alternative a possibility to use a filter like you did with 'minit-cache-purged' (I guess I'd like that even more...)
I'll do my own investigating of this, but minit doesn't seem to play well with Jetpack's sharing buttons. I keep getting jQuery undefined errors, but elsewhere the script is working fine.
When I have the time, I'll investigate the problem and do a pull request if the error is on this side.
Here's a sample post if you want to see the console errors: http://www.ronalfy.com/when-the-wife-gets-a-tattoo-and-doesnt-tell-you/
I am having an image path in my style.css re-written...
The body tag has a background-image set to the following:
http://domain.com/_subdir_/wp-content/themes/_themename_/images/header_graphic_fin.png
but it is being changed somehow in the combining process to the following:
http://domain.com/_subdir_/wp-content/themes/_themename_//_subdir_/wp-content/_themes_/_themename_/images/header_graphic_fin.png
(I just replaced the domain, subdirectory, and theme name for the sake of simplifying things.) Any ideas why this would be rewritten in the combining process?
Good work on the awesome plugin, otherwise!
Due to various ad networks related scripts and external js sometimes some sites break due to combining js files. There should be an option to turn off combining javascript and also an option to do the same for css files.
Please consider semver, and make 0.3
0.3.0
.
I don't understand how to install this :-(
I wanna install :-)
I have tested the plugin it doesnot combining js and css files instead loading them through asnyc attribute.How to fix this.I also cleared cache while viewing the source
Hi Kaspar,
First of all: great work man, This is by far the best plugin to combine files. Great work!
I have a problem though.. I am using Ajaxy Live Search plugin, but that one does not work anymore since I activated your plugin. I checked the console and it says (two times): ReferenceError: jQuery is not defined
Is there a way we can fix this?
PS: I also noticed that the CSS does not minify. Do we have do this manually?
Minit doesn't ignore conditional files added via wp_style_add_data and wp_script_add_data, so it means all files are included, like for default theme, Twenty Fifteen.
If we exclude, for example, those styles, Minit file is included after them, not before, as they depend on master style.
My site CSS breaks when I enable this... Not sure why... site: idoketo.com
One more issue, both of plugins you have suggested doesn't work for me.
https://github.com/bjornjohansen/minit-yui - this plugin deosn't do anythign for me, purge minit cache, try again, it creates fminit file but it is not minified...
https://github.com/bjornjohansen/minit-min - this plugin causes infinite page loading on my website frontend
Hello, How are you?
I have successfully implemented Minit to my WordPress website, without anything breaking unlike a lot of other script. Everything worked fine until I made a lot of use of a body class, and when using it I noticed that some css such as:
body.blog .single-header {
My css
}
is not being applied anymore.
Do you have an input on this?
Thank you so much for your help.
I'm not sure how to do this, i see there are 2 classes for this - but not sure how i would apply it to exclude a JS or CSS file from being combined?
Thanks for the plugin.
Cached HTML may contain references to the previous minit versions of CSS and Javascript files.
Hi,
thanks for this great plugin.
jQuery library will load after the JS file and break my page.
Can jQuery load after this JS file, too? I load jQuery into the footer by my functions.php
, too.
All JS files included by wp_enqueue_script();
Thanks for your help
Ingo
When using this wonderful plugin in localhost the output is:
<script type='text/javascript' src='http://localhost/wordpress41/wp-content/uploads/minit/3b6495e08ff9129a8715eb2c87863028.js'></script>
But when used in production site, the output becomes:
<!-- / Scroll Triggered Box --> <!-- Asynchronous scripts by Minit -->
<script id="minit-async-scripts" type="text/javascript">
(function() {
var js, fjs = document.getElementById('minit-async-scripts'),
add = function( url, id ) {
js = document.createElement('script');
js.type = 'text/javascript';
js.src = url;
js.async = true;
js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
add("", "async-script-contact-form-7"); add("http://mysite.com/minit/2bffe8327673534b433f87a7f94998c3.js", "async-script-minit-2bffe8327673534b433f87a7f94998c3"); })();
</script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
For a lot of themes and plugins it's quite common to have your CSS and fonts in different folders. With the current regex that breaks.
Hey @thomasmb and @bjornjohansen -- how would you suggest we handle styles that define $media
param during wp_enqueue_style()
instead of using inline CSS media objects. Should Minit just exclude those files from being merged? And what about RTL styles?
function theme_name_scripts() {
wp_enqueue_style( 'style-name', '/static/themes/TidalForce/style.css' );
wp_add_inline_style( 'style-name', 'a{font-weight: bold !important;}' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
<link rel='stylesheet' id='minit-css-css' href='http://subtwo.wp/static/uploads/minit/c15621859a80c68d5763f1bde094dd4a.css' type='text/css' media='all' />
<style id='minit-css-inline-css' type='text/css'>
a{font-weight: bold !important;}
</style>
Hello,
Upon activating the plugin, Google Page Speed Test continues to give this alert: "Eliminate render-blocking JavaScript and CSS in above-the-fold content." Please advise.
Also, how does one keep the plugin updated, once installed?
Thank you very much for your plugin and endeavors.
Hello!
I am using this plugin from time to time, and I really enjoy its simplicity, and that's why I came back one more time to it, installing the beta version (0.3).
For me it works just fine. I have a particular issue with two .js files that MUST use wp_head (is this correct? or 'load in header').
jquery.smartmenus.min.js
jquery.js
I applied the filter as you provided an example on your site, but this is not perfect yet.
Minit plugin will have a limited use considering the http2 implementation. Why shouldn't it be the most complete and effective for users which still use the usual http protocol.
My point is it would be very cool to join also script files loaded at top. I don't know a bit about coding, but maybe @kasparsd could find an easy solution for it.
Thanks!
I have a dev environment website on localhost that serves images from uploads directory.
upload_url_path = 'http://whatever.com/wp-content/uploads'
When opening localhost/whatever/ files get cached on localhost, but webpage tries to serve them from whatever.com/wp-content/uploads/minit/ where they don't exist (not a surprise).
Quick and dirty fix before using options like siteurl or home options.
$combined_file_url = sprintf( '%s/minit/%s.%s', 'http://localhost/whatever/wp-content/uploads', $cache_ver, $this->extension );
Scripts like Modernizr won't work if called at the end of the body. Would it be possible for you to handle this problem with a config value or something else?
Greats from Germany
Jan
to help people who find this directly :)
Looks cool, thanks!
Thanks for the great plugin, found this via @bjornjohansen ๐
First time trying it out, and wondering why I am getting two CSS file generated and added. One in the head which appears to just be a copy of my normal theme style included, but renamed with minit data. The second stylesheet is included at bottom of the page in footer, and appears to be the concatenation of plugins styles.
Edit: Actually, just noticed it does not appear to be concatenating files, just changing their names. You can see a stack of CSS links in the screenshot here...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.