How can I compile JS without merging on Laravel mix?
const mix = require('laravel-mix');
mix.js('resources/js/*', 'public/js');
The code above results in all the js files in the js directory being merged into one file.
But, I want to get a result like below code.
const mix = require('laravel-mix');
mix.js('resources/js/a.js', 'public/js/a.js');
mix.js('resources/js/b.js', 'public/js/b.js');
...
mix.js('resources/js/z.js', 'public/js/z.js');
You can use copy.
const mix = require('laravel-mix');
mix.copy('resources/js', 'public/js');
Above will copy entire files inside resources/js into public/js directory.
Related
I want to take all json files from path resources/json/ and do versioning so that when json files changed user can reload it, but I dont know which function I have to use
I changeed webpack.mix.js:
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
//.json('resources/assets/json/*', 'json')
.version();
but I dont know how to copy from dir into another dir and in write mix-manifest file write all json files with hash
I have done this:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
.copyDirectory('resources/assets/json', 'public/build/json')
.version(['public/build/json']);
and two times npm run dev, because mix is not waiting for copying files, .then() not helped, so two times npm run dev.
I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js
Downloaded files by NPM
Code
my webpack.mix.js
const mix = require('laravel-mix');
//laravel default to make app.css and app.js
// I want add Datatables to these files
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
//my template files
mix.combine([
'public/theme/primary/js/jquery.min.js',
'public/theme/primary/js/popper.min.js',
'public/theme/primary/js/bootstrap.min.js',
'public/theme/primary/js/uza.bundle.js',
'public/theme/primary/js/default-assets/active.js'
], 'public/js/combined.js');
Any idea?
Solved
I added this code to my bootstrap.js under require('bootstrap');
require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );
and then added styles to my app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Everything works perfectly now.
Hope it help others.
To combine multiple scripts and styles you can do it this way:
mix.scripts([
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
'resources/js/app.js'
])
.styles([
'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
'resources/sass/app.scss'
]);
This by default should create all.js and all.css files in the respective js and css public folders.
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
How can I minify my JavaScript and css files all in one?
currently I have:
let mix = require('laravel-mix');
mix.styles([
'theme/admin/assets/css/bootstrap.css',
'theme/admin/assets/font-awesome/css/font-awesome.css',
'theme/admin/assets/css/zabuto_calendar.css',
'theme/admin/assets/lineicons/style.css',
'theme/admin/assets/css/style.css',
'theme/admin/assets/css/style-responsive.css',
'css/adminstyle.css'
], 'public/css/admin.css');
mix.scripts([
'theme/admin/assets/js/jquery.min.js',
'theme/admin/assets/js/bootstrap.min.js',
'theme/admin/assets/js/jquery.dcjqaccordion.2.7.js',
'theme/admin/assets/js/jquery.scrollTo.min.js',
'theme/admin/assets/js/jquery.nicescroll.js',
'theme/admin/assets/js/jquery.sparkline.js',
'theme/admin/assets/js/common-scripts.js',
'theme/admin/assets/js/zabuto_calendar.js'
], 'public/js/admin.js');
in my webpack.mix.js file but it creates empty files.
You have to use full path starting from the root directory of your Laravel application.
So instead of:
'theme/admin/assets/css/bootstrap.css'
As you've said that theme is under public, you should do this:
'public/theme/admin/assets/css/bootstrap.css'
Do this update on the rest of your URLs
I am using Laravel Mix in Laravel 5.4 and I would like to combine to plain files and add versioning.
Reading the documentation it says
The version method will automatically append a unique hash to the
filenames of all compiled files, allowing for more convenient cache
busting
And it efectively does what it says. But is there any workaround to obtain a final combined file with versioning?
Actually I would like to join some compiled files together with other plain files and combine everything in a single versioned file.
Edit:
The code I am using is like the following
mix.sass('resources/assets/sass/app.scss', 'public/css')
.combine(['public/css/app.css', 'other/component/file.css'], 'public/css/all.css')
.version();
And I would like to obtain a versioned all.css file. i.e. something like all.d41d8cd98f00b204e9800998ecf8427e.css.
However what I get is a versioned version of the app.css and a non-versioned version of the all.css.
Versioning/Cache-Busting for CSS and JS files
Webpack.Mix
After combining my css (using mix.styles) and js (using mix.scripts) files into two files, I had all.css and all.js.
To add versioning, I did the following:
var timestamp = Date.now();
mix.copy('public/css/all.css', 'public/css/all/all.'+ timestamp + '.css');
mix.copy('public/js/all.js', 'public/js/all/all.'+ timestamp + '.js');
OR
Write it directly when you combine your css and js files, for example:
mix.styles([
'public/css/app.css',
'public/css/custom.css'], 'public/css/all/all.'+ Date.now() + '.css').
mix.scripts([
'public/js/app.js',
'public/js/custom.js'], 'public/js/all/all.'+ Date.now() + '.js').
Blade layout file:
I created /css/all/ and /js/all/ directories. I used the scandir() php function with ordering to get all of the files in the respective directories. Then I got the first filename from the array, which in this instance was 'all.1574160664960.css'.
#php($css_files = scandir('css/all/', 1))
<link href="/css/all/{{ $css_files[0] }}" rel="stylesheet">
#php($js_files = scandir('js/all/', 1))
<script src="/js/all/{{ $js_files[0] }}"></script>
https://laravel-mix.com/docs/5.0/versioning
In webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sass', 'public/css')
.version();