How do I combine all of my js files to a single file with laravel mix? and is it a good practice to directly keep the downloaded external plugins js files and CSS files in public directory? because we have a js folder already in resource folder and it's getting compiled and saved in public directory when we do npm run production, not sure if this is correct or not.
This is how my resource folder looks like :
And my app.js file looks like this :
You can include those libraries by installing them to NPM with npm install jquery for instance. Then in your bootstrap.js file you would have something like:
window.jQuery = window.$ = require('jquery');
That would make it available in the window, and then you still have just one js file to include on the client (your compiled app.js file).
If you do have a file you want separate from your main bundle, and it isn't one you have pulled in through NPM, it's not a bad thing to commit it straight to the public folder. I would keep them in /resources/assets/js/vendor and then use mix.copy to move them into /public/js/vendor. Thats just because I prefer all of my work to be in resources and to have public be all compiled or copied files.
you can add them from npm , or if these are external plugins like my case you can do this
mix.js('resources/assets/js/app.js', 'public/js')
.scripts([
"path/plugin1.js",
"path/plugin2.js",
.......
], 'public/js/all.js').styles([
"path/plugin1.css",
"path/plugin2.css",
.....
],'public/css/all.css');
for more useful information you can visit : https://laravel.com/docs/5.6/mix
You can use npm to install jquery and do it like this same with jeff
window.$ = require('jquery');
OR but if you have your own script want to include then
just put it top on vue instance
require('./jquery.js') //based on your picture it jquery and app.js are in same level
window.vue = require('Vue')
this will automatically read and being compiled by the npm.
Related
I was trying to register a vue component in the app.js file from a laravel project but I just can't seem to find the right path for the app.js, there are two files with app.js filenames. Here is my file structure:
public
css
js
app.js
resources
js
components
Articles.vue
ExampleComponent.Vue
app.js
bootstrap.js
Here is where I imported my app.js file to my blade file:
<body>
<div id="app">
<articles>
</articles>
</div>
<script type="text/javascript" src="{{ assets('js/app.js') }}"></script>
</body>
The problem is I want to access the second app.js file which is in the resources folder, but the above code keeps giving me the first app.js file which is in the public folder.
I tried giving it the absolute path to the file using this code URL::asset('resources/js/app.js')
This gives me a url like localhost:8000/resources/js/app.js which is the correct file location but somehow this link leads to a 404 page. So is there any other way to access the file?
Thanks
Firstly
localhost:8000/something always refer to something in the public directory. So, you cannot reference your resource/js/app.js in your blade file as js file.
Secondly
Actually you don't need to use the resource/js/app.js file in your blade. If you even do so, the code won't work. Because the codes in resources/js/app.js are un-compiled. You need to compile them and use them in blade files. So, where is the compiled file? It's actually the public/js/app.js file. This file is the compiled version of your resource/js/app.js.
The problem is every time you change a js file inside resource, you need to re-compile the js codes. All those codes will be merged together and will be copied in public/js/app.js.
How to compile?
Before compiling your js code you need to make sure you have installed your frontend dependencies correctly by running the npm install command.
Then if all dependencies are installed you can compile your code using the command
npm run dev for development level compile
npm run production for production level(minified and secured) compile.
If you don't want to run the npm run dev command every time you change a file, then you can run npm run watch command. This command will watch if any js file changed. If changed it will compile automatically.
I'm new to webpack in Laravel. I already managed to compile the default scripts into one. However, when I tried to add a new Vue Controller in a separate folder, it seems it will not be included during npm run dev.
Currently I have this set-up
-assets
--js
---app.js
---test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/test.vue'
], 'public/js/app.js');
This will work. However when I put test.vue inside a folder.
-assets
--js
---app.js
--controllers
--test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/controllers/test.vue'
], 'public/js/app.js');
However, when I changed it from test.vue to test.js it will compile. Does the file extension matter? when compiling mix.js?
Can someone help me out on this? Thanks!
If i am not mistaken you can't compile single .vue files using webpack without some sort of loader
Using Vue.component() and importing a vue file into a .js file and then compiling the .js will work.
This might be of help: https://github.com/vuejs/vue-loader
Vue Single-File Component (SFC) Spec
A *.vue file is a custom file format that uses HTML-like syntax to
describe a Vue component. Each *.vue file consists of three types of
top-level language blocks: , , and , and
optionally additional custom blocks:
vue-loader will parse the file, extract each language block, pipe them
through other loaders if necessary, and finally assemble them back
into an ES Module whose default export is a Vue.js component options
object.
Only recently jumped on to the Laravel and Bootstrap 4 bandwagons, alas I have got Laravel 5.5 running with Bootstrap 4.0 no problem.
Sooo, I have getbootstrap.com Dashboard theme but I'm unclear on how to compile the themes assets and dependancies, i.e. what do I do with the gulpfile.js and package.json?
Note: I am using Laravel 5.5.34 and Bootstrap 4.0.0. I would rather learn how to compile assets using Laravel Mix and migrate from Gulp to Webpack, than simply copy the dist CSS to the public directory or link to the CDN in blade templates.
I was going through the same dilemma and this answer from Jeffrey Way has helped me.
I have created a css folder in resources/assets folder ( now it looks like resources/assets/css ). I copied all the css files that came with the theme to this folder.
And i updated the webpack.mix.js file in the root of the application
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now when i run npm run dev all the css is compiled into a single file in pubilc/css/app.css and js in public/js/app.js
Note: My theme also came with a js file which is named app.min.js
So i inluded it in public/js/app.min.js as the main compiled file name is app.js. If your theme has a file app.js rename it to theme.js and place in the public/js folder.
You can call these the normal way you do after compiling them with {{asset('css/app.css') }}
I am wondering in how I should include my npm packages into my HTML. I have added "slidebars": "2.0.2" to my package.json. After that, I ran npm install. So far so good.
Now, I am new with both Laravel and npm. I am trying to use the "mix" feature provided in Laravel like this:
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
Does that automatically compile all the packages provided in the package.json into the single app.js + app.css? Or do I manually need to import the CSS + JS from the slidebars-plugin, like: <link href="/node_modules/slidebars/dist/slidebars.css" rel="stylesheet">?
For the css, the easiest way would to copy your css files to resources/assets/ and then link it to your app.scss like this:
#import "package.scss"
As for the JS, you can combine your vendor JS files into one and copy them to the public directory like this
mix.js([
'node_modules/package/dist/package.min.js',
'node_modules/package2/dist/package2.min.js',
'node_modules/package3/dist/package3.min.js',
], 'public/js/vendors.js');
Then in your view, you just include /js/vendors.js
I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.
I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.
The options I could do is:
Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:
Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.
Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.
Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.
Any recommendations, on what the best way is to compile css files in my "node_modules" directory?
If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).
elixir(function(mix) {
mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
mix.sass(['file.scss', 'app.scss']);
});
This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.
Just add a dot before file path.
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
var elixir = require('laravel-elixir');
var path = require('path');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
function node_modules(filename) {
return path.join('../../../node_modules/', filename);
}
elixir(function (mix) {
var base = [
node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
];
});