For example there is the following structure of a project fragment:
directory1
file1.inc
directory2
file.php
How in gulp-htmlmin to write <-- #include ??? --> instruction in the file.php, to include file.inc?
Related
Problem
When I build my gatsby website with "gatsby build", the size of the generated HTML and CSS files is fairly large (approx. 200kB; even though there is close to zero real text-content in it).
When looking into the generated HTML-file, it turns out, that in each and every generated HTML-file, the complete global CSS is (in text-form) included. So it is completly redundant.
In my case: I use bootstrap as frontend framework, so all the bootstrap-css-classes (used and unused ones) are
100% included in the generated HTML-files
AND additionally: in the seperate "styles.ac6d....css" file.
To clarify: What I get after the gatsby built:
index.html 210 kB
about.html 210 kB
imprint.html 210 kB
....
style.css 200 kB
Expected Behaviour
What I would have expected after the gatsby built:
index.html 10 kB
about.html 10 kB
imprint.html 10 kB
....
style.css 200 kB
I would like to have small HTML-files without any unused CSS in it OR at least not to have the CSS redundently in 20 different files.
Questions
Is it possible to get gatsby built HTML-files without all CSS redundently included in every file?
AND / OR: Is it possible to have only the needed CSS-classes in the file (especially in the case of bootstrap)?
Am I doing something wrong here?
Additional Infos
How do I import the bootstrap CSS?
in global.scss:
#import "./node_modules/bootstrap/scss/bootstrap
in gatsby-browser.js
import "./src/styles/global.scss"
How does the compiled HTML look like?
The compiled HTML in index.html (and about.html, ...) from gatsby looks like so:
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.ac6d966df9cf852917cd.css" id="gatsby-global-css">/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;
<!-- .... [ALL THE REST OF BOOTSTRAP CSS] -->
Edit: Conclusion for me
To inject the full global CSS in all the HTML files seems to be a normal behavior from the gatsby build process according to the comments. So just in case anybody else wonders about this gatsby behaviour...
I would go the SCSS way by importing a global styles.scss in which you only import the needed parts of the bootstrap distribution.
/*----------------------------------------------------
Overriden Bootstrap Variables (by me!!!!!)
------------------------------------------------------*/
$primary: #00B056;
$secondary: #bf9571;
$body-bg: #fff;
$body-color: #5a5a5a;
/*----------------------------------------------------
Import Bootstrap SCSS
------------------------------------------------------*/
// use this one only for debugging purposes. This is the whole package
//#import "../../../node_modules/bootstrap/scss/bootstrap";
// Required
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
#import "../../../node_modules/bootstrap/scss/mixins";
// Optional
#import "../../../node_modules/bootstrap/scss/reboot";
#import "../../../node_modules/bootstrap/scss/type";
#import "../../../node_modules/bootstrap/scss/images";
// add more bootstrap stuff as needed
There are of course more partial scss bootstrap packages available. Check their documentation for scss handling or check your node_modules path.
Of course you need to install bootstrap via npm/yarn to have it available. Also you need gatsby scss plugins like gatsby-plugin-sass and node-sass.
Among not using Bootstrap as #George suggested in #Logemann's answer, which in my opinion should be always avoided because tend to overload the applications and the same effect can be easily applied using own custom CSS.
I would suggest only importing the mandatory Bootstrap modules, rather than all the dependency to save some KB.
In addition, if get rid of Bootstrap is not an option I will try to look at some purging plugin, such as gatsby-plugin-purcecss to remove some duplicated styles in specific files.
// gatsy-config.js
module.exports = {
plugins: [
`gatsby-plugin-stylus`,
`gatsby-plugin-sass`,
`gatsby-plugin-less`,
`gatsby-plugin-postcss`,
// Add after these plugins if used
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
}
}
]
};
I'm new to sass and want to know that can I store #mixin in a file other than main.scss because it makes the main file a little to messy like CSS, If it can work then how can I proceed?
Yes. Create a new .scss file and import it into your main.scss file using #import
e.g. https://codesandbox.io/s/mixin-zu97i
You can indeed like you suspected place your mixins in another file and refer to it.
For example you could do the following.
Structure:
main.scss
_functions.scss
Inside _functions.scss
#mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
// [+ other mixins]
Inside main.scss
/* Place this on the first line of your main file */
import "_functions";
.box {
#include transform(rotate(30deg));
}
/* [The rest of your SASS] */
Why did I use a underscore(_)? This way the SASS/Compiler knows that this file is a partial, what is a partial?
A partial is a Sass file named with a leading underscore. You might
name it something like _partial.scss. The underscore lets Sass know
that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #use rule.
Source (would recommend reading/scanning through it):
https://sass-lang.com/guide#topic-4
I am developing a PWA using Angular. I am using a centralized color file where I store the primary and secondary color for the app in scss variables.
color.palette.scss:
// other code
$treadwill-pre-login-primary: #2a3b3d;
$treadwill-pre-login-app-foreground: #f4bb56;
// other code
I want to refer to these variables from the manifest.json file.
manifest.json:
{
..
"background_color": $treadwill-pre-login-app-foreground,
"theme_color": $treadwill-pre-login-primary
..
}
Relative file structure:
|
-- ...
-- /app
--index.html
--color.palette.scss
--manifest.json
-- ...
Is there a way to do it?
I have a mission with the following structure
init.sqf
radio/script1.sqf
radio/script2.sqf
script3.sqf
macros.hpp
in script3.sqf, I can use #include "macros.hpp". However, I am not being able to do the same in script1.sqf, as it causes the game to crash. Any ideas?
In radio/script1.sqf, you can include "macros.hpp" using
#include "../macros.hpp"
This is reported in this PDF, in section 4, "#include".
They use the other slash \, but I tested in arma 3 that / works.
Notice that if you add
#include "../macros.hpp"
to script3.sqf, the game will crash, and the error message is what you would expect. Specifically, it can be radio/macros.hpp not found.
I wish to copy some twig files while removing the 'src' suffix
example: someCode.html.src.twig
with the result : someCode.html.twig
using gulp rename as I must have this change implemented for several files that all have the src suffix.
I also wish to maintain the directory structure:
example:
D: test --> formsDirectory --> someFile.html.src.twig
, someotherFile.html.src.twig
--> SomeOtherDir --> onemore.html.src.twig
result:
D: someDir --> formsDirectory --> someFile.html.twig
, someotherFile.html.twig
--> SomeOtherDir --> onemore.html.twig
I know that I can use gulp rename to remove the extension and basename however I wish to only change the suffix are illustrated. Any Help would be Great! thanks
Use gulp-ext-replace
Example:
.pipe(ext_replace('twig', '.src.twig'))