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
Related
I'm compiling Font Awesome Sass files to CSS, and it's putting a fonts folder with all the font files at the root level of my project, which I don't want.
Specifically, I installed the free Font Awesome npm package as follows:
npm install --save-dev #fortawesome/fontawesome-free
I then added the following to a vendor.scss file:
$fa-font-path: '../../../../public/fonts' !default;
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
This is the directory structure of the project:
(Project root)
|---fonts (I don't want this one.)
|---node_modules
| |---#fortawesome
| |---fontawesome-free
| |---scss
| |---_variables.scss (Contains original $fa-font-path being overridden.)
|---public
| |---css
| |---fonts (This is the one I want.)
|---src
|---sass
|---vendor.scss (Contains new $fa-font-path definition and FA Sass imports.)
If I change $fa-font-path to '../../../public/fonts' !default; or '../../public/fonts' !default; then the build process errors out and won't compile, but '../../../../public/fonts' !default; puts all the Font Awesome font files in a fonts folder at both the project root level and in the public/fonts folder. Why is it doing this, and more importantly, how can I stop it from creating the fonts folder at the root level? Thank you.
One thing I probably should have mentioned in my question is that I'm using the laravel-mix npm module to wrap around Webpack and bundle all my assets.
Laravel Mix returns a promise from its chained calls that allows you to call then on the end of it, from which I was able to write some custom code in the then callback to always remove the fonts directory at the project root level.
Specifically, my Mix file became the following:
const mix = require('laravel-mix');
const rimraf = require('rimraf');
mix.js('src/js/app.js', 'public/js/')
.extract(['vue'])
.sass('src/sass/vendor.scss', 'public/css/')
.sass('src/sass/app.scss', 'public/css/')
.then(() => {
rimraf.sync('fonts');
});
rimraf is an npm module that basically allows you to run rm -fr on a directory. The module can be gotten here: https://www.npmjs.com/package/rimraf
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.
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'm having trouble figuring out how to add npm packages which are not specifically built to be used with brunch to my elixir/phoenix project.
One thing I don't want to do is manually copy files from node_modules/ to vendor/.
If anyone knows how to properly configure Brunch to use Tailwind in a Phoenix app, any help would be greatly appreciated.
For Phoenix 1.4 I've made a blog post about how you can setup it. https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4 This is using webpack and postcss
Create project mix phx.new myproject
Go in your assets cd assets
Add tailwind dependencies yarn add -D tailwindcss
Init tailwind theme ./node_modules/.bin/tailwind init
Add postcss dep yarn add -D postcss-loader
Create a file in /assets call postcss-config.js and add this code
module.exports = {
plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
}
Inside your webpack config change
use: [MiniCssExtractPlugin.loader, 'css-loader']
for
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
Finally add those tailwind stuff in your app.css file
#tailwind preflight;
#tailwind components;
#tailwind utilities;
Include postcss-brunch and tailwindcss packages
$ npm install postcss-brunch tailwindcss --save-dev
Create Tailwind config file (in assets directory)
$ ./node_modules/.bin/tailwindcss init
Add Tailwind as postcss plugin
assets/brunch-config.js
...
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
postcss: {
processors: [
require('tailwindcss')('./tailwind.js')
]
}
},
...
Use Tailwind in css
assets/css/app.css
#tailwind preflight;
#tailwind utilities;
https://tailwindcss.com/docs/installation
i'm using Laravel 5.1, which ships with laravel elixir - a wrapper for gulp.
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less');
});
And app.less looks like this:
#import "../bootstrap/less/bootstrap.less";
#import "variables";
I'm running gulp watch from the command line, but the problem is that it only reacts when changes are made to app.less and not the imported files (e.g. bootstrap.less).
How can I enable gulp watch to watch imported files also?
Thanks
Turns out that because ../bootstrap/less/bootstrap.less is above the root folder being watched, then it is not watched, despite it being included.
gulp watch watches all assets in the folder, it doesn't read the less files for includes.