How to minify html with laravel mix - laravel

I use laravel 5.6 in my project.
For example: I need minify index.php with laravel mix.
I used to work with Laravel-Elixir.
How to minify HTML with laravel mix ?

https://github.com/mercuryseries/laravel-elixir-minify-html
This package allows you to minify your static HTML files or the HTML that gets generated by your Blade template files.
Enjoy !

Related

Typescript with Laravel producing bundles based on blade folder

I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.

Integrating composer with codeigniter to autoload CSS and JS

I have composer set up in CodeIgniter 3, it is fully set up and I have installed bootstrap and font-awesome in the vendor folder. How do these then get included in my view files?
AutoLoad.php exists and I have set composer_autoload to true in config.
I was expecting bootstrap and font awesome to be automatically loaded in my HTML head. Is this correct?

What is a blade directive in Laravel?

In a blade template, you see #section, #content, #yield etc. What are blade directives? Are they comparable to PHP or HTML? There doesn't seem to be much explanation on Laravel syntax in the framework.
At a basic level Blade is a templating language that compiles down to PHP and HTML.
When you use #section, #content or #yield in a .blade template file it will be compiled down to PHP.
If you want to dive in exactly to how it works try looking through the tests in frameworks Github or taking a look at the API.

Laravel 5 - Loading Public JS / CSS / HTML Files From Custom Folder?

Laravel serves client side (HTML, CSS, JS) files from the /public folder by default. I am currently transitioning a Blade based front-end to an Angular based one. As a result, I am mixing Blade templating with Angular templating. I am using Blade layouts to generate a navbar, footer, and other common views while I transition the body content of my pages to Angular.
I have a folder constructed just for storing Angular files. My current app structure looks something like this:
-MyApplication
-angular
-app
-bin
-bootstrap
-config
-database
....
Is there anyway for Laravel to load my assets - stored in the /angular folder? I want to keep all my Angular files in one place, in standard Angular structure, as opposed to spreading them out and placing them in the /public Laravel folder.
You can try to create a symbolic link inside the public directory to your intended angular directory. Open your terminal and create a symbolic link like so:
ln -sfv ~/path/to/MyApplication/angular ~/path/to/MyApplication/public/angular
Don't forget to update the ~/path/to/MyApplication to your actual Laravel directory. Now you may refer to the javascript file inside the angular directory like this on your blade template:
<script src="{{ asset('angular/app.js') }}"></script>
Hope this help!

Laravel elixir: how it works

Its always nice to use Laravel elixir feature. But I have some basic question. Firstly
when we run gulp command, it concatenates all the css and js files. But I think I dont need, for example, datatables.css and datatables.js/boostrap-wysihtml for all of my pages. how to tackle this situation?
Secondly Lets review this code:
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"style.css",
"datepicker.css"
]);
mix.scripts([
"jquery.min.js",
"bootstrap.min.js",
"bootstrap-datepicker.js",
"typed.min.js",
"wow.min.js",
"owl.carousel.min.js",
"home.js",
"side-navigation.js",
"script.js"
]);
mix.version(["css/all.css","js/all.js"]);
});
in blade:
<link rel="stylesheet" href="{{ url(elixir('css/all.css')) }}">
what is the use of this elixir() function, when we are creating all.js and all.css file that has everything concatenated inside it?
You want to use the elixir function in the blade template because it will automatically use the rev.manifest file to resolve which versioned file(s) to use. The docs have more info. As far as not needing all scripts on all pages, there are a few different ways to pull it off. You can create a task that generates just generates one bundle - perhaps scripts needed everywhere - and another bundle handling the rest. I'd advise you to research that to see what works best for you.

Resources