I'm manually downloading these CSS and JS files from: https://github.com/1j01/os-gui
I'm not sure where in my Laravel 9 app I should place the CSS and JS files.
What's the proper way to do it? Should I just download and place the files in the public directory? But shouldn't I be utilizing Laravel 9's Mix to compile the JS CSS files, and if so how can I go about doing that?
This is the list of files I want to use:
css/layout.css
css/windows-98.css
css/windows-default.css
js/$Window.js
js/MenuBar.js
js/parse-theme.js
js/demo.js
js/jquery-3.3.1.js // i'll probably use v3.6.0 (or whatever is the latest version)
If you want those files to be optimized and controlled and also want that every request does not download a bunch of css and js files, you should use laravel mix which is installed by default
You should put those files inside /resources folder and compile them into a single file, adittionally you could purge with the mix purge plugin so your assets will be purged/optimized.
This is really simple in your webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.css('resources/css/app.css', 'public/css', [
// and in your app.css you can #import every css you need to load
]);
Related
I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
According to this blog (which is written for BS3), I should add the following lines to the angular.cli.json file.
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
The problem is that in the distribution I'm using (BS4 Alpha 6), there's no such file. In the dist directory, there's a bunch of files as follows.
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
util.js
Do I have to link to them each individually? Am I missing a minified file somewhere? I'm in dist so I assumed that it's the production version.
Should I go about it in a totally different way, perhaps? I'm trying the Angular CLI package since I want to test without Gulp, Grunt nor Webpack. Is there an approach where I can include, reqest, demand or append those file (preferably minified) to my web site?
The styles I've included my simply importing what I needed from the dist like this.
#import "~bootstrap/dist/css/bootstrap.min.css";
However, I'm a bit confused on how to handle JS of the BS.
You're looking in the wrong place.
The files you are seeing are in js/dist/. You should be looking in dist/js/.
I have a homepage(index.html) which is a static html with its assets, and after user login at the homepage, it will go to the second page(home.html) which is a react app.
My folder structure is like this:
--build/
----index.html
----home.html
----home.bundle.js
----assets/
------index.css
------index.js
--src/
----static/
------index.html
------home.html
------assets/
--------homepage.css
--------homepage.js
----components/
------home.js
I want to use webpack to :
1. minify the assets of index.html
2. bundle the index.js app.
My questions are:
1. What about I bundle all the assets of index.html rather than just uglify? Is this a better approach?
2. How to use Webpack to fulfill the above 2 requirements? I know how to bundle a pure SPA but don't know how to deal with this mixed type.
Thanks
You can't uglify an html file (otherwise i will learn something today ;-)) but you can uglify your javascript to reduce the size and allow a better performance when they re loaded in the browser.
So what you can do for starting, it is too bundle all your javascript in one bundle file that you will insert manually in your html file. You can do it because in general we give a static name (e.g bundle.js) for the bundle generated by webpack.
Hope that s answering your question?
Romain
I have lot of .js code in my project, but I want to use babel-plugin-add-module-exports to main.js file without affect to all .js files I have.
How can i do that?