So, there is a tool Laravel Mix which could be run via npm command like npm mix dev or npm mix prod.
Locally I need styles and scripts to be compiled but not minified. So I have to run npm mix dev. But I need to commit only minified versions of such files. And it's not an option to have both versions in a repository - it has to be only minified.
Is there an option so I can use development files locally but before I make a commit they will be minified? And after commit - unmified again (with npm mix dev)
Related
I´m compiling the SASS file with Laravel 8 mix:
// SASS/CSS files
mix.sass('resources/assets/scss/app.scss','public/assets/css')
.sourceMaps(false).version();
However, the .map file is only generated when I run npm run prod. If I run npm run dev, the .map isn´t created. Usually, it should be the other way around. Any idea what´s wrong with the configuration here?
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 developing an application using Laravel and vueJs. During build up the application, the npm run watch command watching all relevant files for changes and recompiling app.js when it detects a change. First time, I created a repository (suppose in github/gitlab/bitbucket etc.) with a master branch and two different branches.
Now, the problem is when we're going to push to the branch or merge with master branch, it's getting so many conflicts in public/js/app.js. I guess, I know the reason. This is because of, during build the application with npm run watch, every changes recompiling the app.js. So, old public/js/app.js in the repository will get the merge conflict in new public/js/app.js. If I ignore the app.js then how the changes impact to the app when multiple developers work at the same time. In this circumstances, what should be the solution when the application is developing by two or more developers and using github,gitlab,gitbucket etc. to merge the codes. Would someone suggest me the correct way please!
Ignore compiled files in your .gitignore as there's no reason to push them to your repository unless you don't have nodejs in your server
.gitignore:
/public/js/app.js
Then run
npm install
npm run prod
In your server when you're ready to deploy
Steps to correct
rm public/js/app.js
echo "/public/js/app.js" >> .gitignore
git commit -m "ignore compiled asset"
git push
npm run watch
I usually ignore all compiled assets in public directory
/public/js/*
/public/css/*
/public/fonts
Because it's cleaner and faster to push (since the compiled assets are huge in size +1MB) to have all dependencies in node_modules and write Javascript as ES6 modules in resources/js or formerly resources/assets/js and same for SASS and CSS
You shouldn't put the compiled files in git, remove the app.js in your public directory from your git repository. Your friend just has to run npm run prod on his machine to get an updated app.js.
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
We have a .NET Core project which uses Angular2 as frontend client. This frontend is located in our solution in a Frontend directory.
This frontend contains the package.json and angular-cli.json to isolate all that fron the rest of the .NET project. On ng build, Angular2 compiled files are sent to ../wwwroot directory.
Our project structure:
We want, when someone checkout the project AND on publish (on Azure) to be able to call these actions:
npm install -g angular-cli
cd Frontend && npm install && ng build --prod
How to achieve this in the project.json .NET Core file?
I tried for example, targetting a deployement on Azure, to set this up:
"prepublish": [ "npm install -g angular-cli" ],
"postpublish": [ "cd Frontend && npm install && ng build --prod", "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
But it breaks the deploy. Are both the prepublish and postbublish (with cd Frontend and subsequent commands) valid?
And how to make VisualStudio do the same thing when the people checking out the git repo and hit build?
In general, you may use any tasks runner (gulp, npm tasks, etc) and in postpublish step (or other step like prebuild) just execute appropriate tasks.
As alternative you could even do steps in opposite direction and call dotnet commands (build, deploy, ...) from your, lets say, npm task script. For example, you could look into this repo that is example of using ASP.NET Core and Angular2 with Webpack. They use those npm tasks as entry point of any actions like build, run or deploy:
The npm package.json configuration loads all the required packages for Angular 2 and Webpack. The Webpack packages are all added to the devDependencies. A “npm build” script and also a “npm buildProduction” are also configured, so that the client application can be built using Webpack from the cmd line using “npm build” or “npm buildProduction”.