Pretty simple, I want to run single command and get all necessary plugins, css and fonts inside one minified tinymce.min.js file
After running:
grunt bundle --themes=modern --plugins=table,paste
I got minified tinymce with plugins, but WITHOUT skins/lightgray which include css, fonts, images
How can I do that?
found answer by myself,
added extra param for skin_url:
skin_url: './unpackaged-dependencies/tinymce/skins/lightgray'
And include original tinyMCE CSS and fonts
so tinymce.full.min.js and skins package should be on the same level
Related
While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
I'm using the Saturn Site theme from Grav (https://getgrav.org/downloads/skeletons) and want to change the background image of the home page (and eventually other styles). In the theme's custom CSS (user/themes/saturn/css/custom.css) I changed the background image, but the new image is not rendered unless I update both custom.css and custom.min.css.
I believe it is inappropriate to change both files; the system should generate a new version of the minified CSS. Reading the Grav docs (https://learn.getgrav.org/themes/asset-manager) I discovered that Grav provides
an Asset Pipeline that can be used to minify and compress assets to reduce the number of browser requests, and also the overall size of the assets.
How do I run this pipeline to update/minify the theme's CSS? Or do I need to install a separate CSS minifying tool?
Additional information:
My user/config/system.yaml file includes this:
assets:
css_pipeline: false # The CSS pipeline is the unification of multiple CSS resources into one file
css_minify: true # Minify the CSS during pipelining
css_rewrite: true # Rewrite any CSS relative URLs during pipelining
Grav only minifies the files which are loaded in the theme.
According to https://github.com/getgrav/grav-theme-saturn/blob/develop/templates/partials/base.html.twig, custom.min.css is the loaded CSS file, so Grav will minify it, not custom.css.
You have 3 solutions:
Edit the line in base.html.twig
{% do assets.addCss('theme://css/custom.min.css') %}
to
{% do assets.addCss('theme://css/custom.css') %}
then you can add anything you like to custom.css and Grav will minify it for you.
However if you do this, your change in base.html.twig will be lost when you update the theme.
You just add you CSS to custom.min.css and you don't need to minify it at all (although its name is *.min.css), Grav will help you minify it. This way your changes in custom.min.css will still be lost when you update the theme.
Create a child theme of this theme, override base.html.twig and apply the first or second solution above. This way your change will not be lost when you update the theme. However this requires Grav development skills.
While in the root directory of GRAV try running bin/grav clear. That should update the minified CSS file as well.
I am trying to build a new design on an old system that is using DOJO, eventually we are going to move to AJAX to handle the data calls. Is there a default or minified CSS file so I don't have to use their themes? (i.e. Claro, which is the theme that was and still is applied)
It says you can make custom themes, but there has to be a bare bones version out there somewhere.
Thanks for your time.
The bare minium CSS is available in dijit.css
(you can see the file on the CDN: https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css)
As dojo team says about this file :
Essential styles that themes can inherit.
In other words, works but doesn't look great.
So be aware it will be ugly!
But you can build your own theme starting from that.
dojo comes with out of the box the following themes:
Claro
Tundra
Soria
Nihilo
There is no really a default CSS a part of the CSS which is included in on of the listed theme. But as ben point out in his answer, there is a dijit.css which is a very essential base of CSS which other themes can in-heritage from.
You can apply them adding the following in your HTML file:
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
<body class="claro">
Or you can use a CDN, example for claro (just change the name for css file in order to get a different theme):
https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css
The CDN version is an unique file and easy to include in your app but it is not minified.
If you need to have a minified version, you could use the dojo build to compact all your project files and included CSS for your theme minified.
More info here:
https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#id10
Because I'm using Webpack to also bundle my css and that my script tag is at the bottom of my HTML, on initial page load I get the content of the page without any of the styling.
Then all of a sudden the styling comes in when the script kicks in.
Webpack is very useful to help bundle the CSS but this behavior is quite unsettling and not really acceptable.
What are common ways to remedy this problem?
You can try using extract-text-webpack-plugin to break out the css in to their own files. That way you can add <link> tags yourself to those pages you wish to have their styles loaded before the JS is loaded. See stylesheets as separate bundle.
For webpack v4, mini-css-extract-plugin should be used instead of extract-text-webpack-plugin (source). There are usage examples on their README.
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.