is the first time I use vue js and laravel mix and I'm a bit confused, I previously loaded the scripts manually, without compiling, however now that I want to use vue js, when I add the app.js script to the end of my blade template the others scripts stop working, I tried to compile all the scripts and add them together with the app.js file but even so it does not work, this is my webpack code
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
//project files
mix.styles([
'public/css/materialize.css',
'public/plugins/datatablesMaterialize.css',
'public/css/main.css',
'public/css/ionicons.min.css',
'public/css/nouislider.css',
'public/plugins/fullcalendar/fullcalendar.css',
'public/plugins/responsive.dataTables.min.css',
'public/css/jquery.fancybox.min.css',
'public/css/style.css',
'public/css/sweetalert2.min.css',
'public/css/jquery.steps.css'
], 'public/css/allPets.css');
mix.scripts([
'public/plugins/datatablesMaterialize.js',
'public/plugins/moment.min.js',
'public/plugins/dataTables.responsive.min.js',
'public/plugins/moment.min.js',
'public/plugins/fullcalendar/fullcalendar.js',
'public/plugins/fullcalendar/lang/es.js',
'public/plugins/jquery.validate.js',
'public/plugins/validation-additional-methods.min.js',
'public/js/materialize.js',
'public/js/sweetalert2.min.js',
'public/js/jquery.steps.js',
'public/plugins/jquery.validate.js',
'public/plugins/slick/slick.min.js',
'public/js/jquery.fancybox.min.js',
'public/js/spinner.js',
'public/js/jquery.spin.js',
'public/js/funciones.js'
], 'public/js/allPets.js');
when I use the files allPets.css and allPets.js without the script app.js everything works, however when I add everything it stops working again(
the sidebars of materialize stop working etc).
var plugin = 'resources/assets/plugins/';
mix.js('resources/assets/js/app.js', 'public/js/app.js')
.combine([
plugin + 'jquery/jquery.min.js',
plugin + 'popper/popper.min.js',
plugin + 'bootstrap/bootstrap.min.js',
plugin + 'moment/moment.min.js',
plugin + 'toastr/toastr.min.js',
plugin + 'slimscroll/jquery.slimscroll.js',
plugin + 'waves/waves.js',
plugin + 'sticky-kit/sticky-kit.min.js',
plugin + 'fancybox/jquery.fancybox.pack.js',
plugin + 'fancybox/jquery.fancybox.js',
plugin + 'fancybox/jquery.mousewheel.pack.js',
'public/js/app.js',
],'public/js/bundle.min.js')
.sass('resources/assets/sass/style.scss', 'public/css')
.browserSync('laravue');
Related
Given the webpack.mix.js of a fresh Laravel project :
const 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.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
What is the equivalent using just webpack and a webpack.config.js? (Im looking to remove laravel mix as a dependency on an existing project.)
I did find this default file in the source but it did not help me. Is there a way I can see the "compiled/resulting" webpack configuration or a template/starting point that corresponds to laravel mix default settings?
You can, but the result is not very satisfactory.
Create a JS script with this:
console.log (JSON.stringify(
require('./node_modules/laravel-mix/setup/webpack.config.js'), null, 4)
);
and save it in the root folder of your laravel project. Run it with Node and the output will be the configuration object Laravel Mix receives and inputs to webpack.
However, this file is very long and covers a vast amount of settings, which you wouldn't need if you made your file from scratch. Yes, you could try and remove every extra setting you think you can remove without breaking your output, but in the end it's better to learn how Webpack works so you can write better, mode adjusted configs. At least you can use it to understand how it does certain things.
Just put into webpack.mix.js
Mix.listen('configReady', function (config) {
RegExp.prototype.toJSON = RegExp.prototype.toString;
console.log(JSON.stringify(config));
});
So you will get webpack config from your laravel.mix.
With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script).
The file you referenced seems to point exactly to the default configuration. Why did this not help?
In order to migrate you could
Learn the basics
Extract the dependencies from Laravel mix aÇıd add them to your package.json
Hint: The dependencies there are your devDependencies
Start by installing npm install --save-dev everything "webpack", "babel" and prefixed with "-loader".
If you need Sass and extracted css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin.
Minimal example of a webpack config for your mix example from above would be
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'js/[name].js',
path: path.join(__dirname, 'public')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader'
]
}
]
}
};
Learn the more advanced basics for your use case
Here's my webpack.mix.js file:
mix.js('resources/assets/js/app.js', 'public/js')
.combine(['public/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.js'], 'public/js/app.js');
I am launching js task, then combining all js files into a single one.
When i run npm run dev everything works as expected, but if i run npm run watch and then edit a file that being required in app.js (custom.js) this way:
require('./bootstrap');
require('./custom.js');
Then save the changes, mix is compiling very long, after it finishes my changes not reflected. Am i doing something wrong there?
Loop issue was because i used the same name when combining js files - app.js.
Correct way is not using combine, i've included my owl carousel file in app.js:
require('owl.carousel');
I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.
Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:
mix
.js('templates/src/js/app.js', 'web/assets/dist/')
.js('templates/src/js/home.js', 'web/assets/dist/')
.extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
.sass('templates/src/scss/app.scss', 'web/assets/dist/')
.sourceMaps()
.options({
postCss: [
require('postcss-critical-css')({
preserve: false,
minify: false
})
]
})
.browserSync({
proxy: '127.0.0.1:8080',
files: [
'templates/**/*.twig',
'templates/src/js/**/*',
'templates/src/scss/**/*'
]
});
if (mix.inProduction()) {
console.log("In production");
mix.version();
}
When I run the script via 'npm run watch' I get an error:
10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.
I did try to set up Laravel Mix + mix.sass + one of the following plugins:
https://github.com/zgreen/postcss-critical-css
https://www.npmjs.com/package/postcss-critical-split
Without success :(
Anybody with a working setup or link to an example repository?
Thanks,
Teun
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();