Laravel 5.4.26
NPM 5.4.2
Node 8.1.2
I am running npm run watch and it works perfectly with all my SASS or CSS files. I also have this line of code there:
.scripts(['resources/assets/js/specific/dashboard.js'], 'public/js/specific/all.js')
Every time I run npm run watch dashboard.js is succesfully compiled into all.js.
However every time I make a change in dashboard.js laravel mix instantly empties all.js never to fill it up again. If I Ctrl+c the process and run npm run watch again it compiles it successfully again.
This is bad because every time I make a change in the js (that I'm currently developing) I need to go back and restart the process and wait for it.
Related
I have installed Tailwindcss on Laravel 9 and the problem is that whatever I change in the code in the blade.php files, Tailwindcss does not work. Only when I run npm run dev and refresh the page, the effect is visible.
Why after each code change in laravel blade files I have to do npm run dev otherwise tailwindcss does not work as if it does not recognize its classes.
Run npm run watch to watch for changes and recompile your styles and scripts when you save.
The npm run watch command will continue running in your terminal and
watch all relevant CSS and JavaScript files for changes. Webpack will
automatically recompile your assets when it detects a change to one of these files:
Read more about it here:
https://laravel.com/docs/9.x/mix#watching-assets-for-changes
I am using Vue in laravel. When I make changes in vue code these changes doesn't appear until I run this command:
npm run production
I want to use vue without this command or at least one time should be enough
The Vue code that you write must be transpiled to vanilla javascript so that most of the browsers out there can understand it (not all browsers understand Vue or the underlying javascript version, such as ES6).
Additionally, most likely the code you write has many dependencies (including Vue itself) but also many other libraries. npm run generates a single javascript file with all the necessary code to run, but also stripping out all other portions of libraries that you don't use. If this didn't happen, it would take a lot of time to your page to load because the browser would need to load all the libraries.
You can simply run npm run watch to keep building vue into vanilla javascript code as you are working on vue components.
What does npm run watch does exactly?
In package.json file in the root folder of your laravel project, you can see that there is a script of "watch" which then runs npm run development -- --watch. Here, --watch part is important. npm run development compiles or builds vue components into ./public/js/app.js and also creates css styles in ./public/css/ corresponding to the styles that you apply inside vue components tags.
./public/js/app.js and ./public/css/*.css files are then included in php blades and it serves as vue components.
Using npm run development is recommeded while you are working on your local dev environment rather than npm run production, which command itself implies that it builds production version of vue components. In production version, vue-devtools cannot inspect vue components but it does in development version.
And as --watch part keeps its eye on vue components' chages and it builds as soon as you make any change in .vue files. So you run npm run watch once, you are good to go. No need to run npm run development or npm run production every time.
To update our code on port id need to run npm rum production command
I'm trying to change the color theme of bootstrap with sass. I'm running the command npm run watch and when I save it does in prompt me with:
Laravel Mix Build Successful
When I view my page I do not see the changes. (I've cleared cache and hard refreshed as well as closed broswer/new browser) To do this I'm updating "warning" to be a purplish color, but bg-warning is not changing to a purplish background (I believe this is what is intended).
I'm using Laravel framework 5.5
Here is my webpack.mix.js
Here is my app.scss
Here is my base/_colors.scss
I've tried throwing my base/_colors.scss code straight into the app.scss file with no luck either. (Even though it says it builds properly.)
I've also tried running the following with no success:
npm run dev
npm run production
Edit: the other possibility is this is not how sass works with bootstrap. Do I need to actually assign things the color of $warning or does this look for all instances of $warning (.alert-warning, .bg-warning, etc.) and replace?
Try running npm hot, that helped me:
npm run hot
I would do following further steps:
check if the folder base really exists
create a a new css file which in not inside a folder (base) just to check that that does not cause an error
Write simple css in your _colors.css and check if that works
add an !important statement after your color declaration to check if it does not have to do anything relating overriding the styling
Is it possible to run only scss files on laravel mix?
I need to update only css info, and making the compiler run everything it takes long time.
Instead of doing always "npm run development", coul have another command running only scss files.
Yes You Can But:
You will have to learn about webpack and mix first then you can handle this
If you are working on vue.js then use
npm run watch
You will not have to run it again and again only changes will be compiled wherever you made.
And read package.json it provides commands related to compiling assets.
What is the difference between npm run watch and npm run watch-poll in Laravel mix?
I cannot see any difference between the output they give.
watch will listen for file changes, however, on certain systems this won't always work.
watch-poll periodically checks (polls) for changes e.g. every 1000ms it will manually check to see if any files have changed.
https://laravel.com/docs/5.4/mix#running-mix
https://webpack.js.org/configuration/watch/
watch-poll is an alternative to watch in certain enviroments watch might not track changes properly, therefore watch-poll was implemented.
Poll will check the files every x seconds rather than automatically picking up on changes through watching.
You can read up on the docs for a more information about mix.