I tried use minify method like below:
mix.minify('public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js');
but it will create script1.min.js and script2.min.js
I also tried :
mix.minify('public/js/folder/script1.js', 'public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js', 'public/js/folder/script2.js');
and still create same files. How to minify without add suffix .min.js?
I can't found laravel-mix solution, so I used another solution using uglifyjs-folder :
npm install uglifyjs-folder --save-dev
add && uglifyjs-folder public/js -e -x .js -o public/js to package.js inside prod script like below:
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production && uglifyjs-folder public/js -e -x .js -o public/js",
"production": "mix --production"
},
it will minify all .js files on public/js folder after running npm run prod.
Maybe it's not the best practice, but it worked for existing project that already bad practice;
Related
Before upgrade to Laravel-Mix 6:
Laravel-Mix version: 5.0.9 (supports Webpack 4)
NPM version: 6.14.5
With this laravel mix version I was able to pass in environment variables to webpack.mix.js by running the npm scripts defined in package.json:
"dev": "cross-env NODE_ENV=development ENV_FILE=./.env.local node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
...
"production": "cross-env NODE_ENV=production ENV_FILE=./.env.production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
Then I could access the variable in webpack.mix.js, whose value depends on whether I was running on production or development mode:
let mix = require("laravel-mix");
mix.env(process.env.ENV_FILE);
This worked fine!
After upgrade to Laravel-Mix 6:
Laravel Mix version: 6.0.19 (Webpack 5 supported)
NPM version: 6.14.5
I followed the recommendations from the laravel documentation including the update of the npm scripts...
Following the instructions on the documentation how to pass in environment variables to Webpack CLI (please refer to https://laravel-mix.com/docs/6.0/cli#pass-options-to-webpack-cli), the npm scripts where then changed as follows:
"dev": "mix -- --env ENV_FILE=./.env.local",
"production": "mix --production -- --env ENV_FILE=./.env.production"
The problem is, that I cannot access the environment variable in webpack.mix.js anymore via process.env.ENV_FILE. Its value is undefined...
I already checked out in node_modules/laravel-mix/setup/webpack.config.js through console.log, that the variable indeed was passed in:
const { assertSupportedNodeVersion } = require('../src/Engine');
module.exports = async (config) => {
assertSupportedNodeVersion();
console.log("ENV_FILE: ", config.ENV_FILE);
const mix = require('../src/Mix').primary;
require(mix.paths.mix());
await mix.installDependencies();
await mix.init();
return mix.build();
};
And by running for instance npm run dev I can see the value logged out:
mix -- --env ENV_FILE=./.env.local
ENV_FILE: ./.env.local
So the question is, why I cannot access the environment variable in webpack.mix.js, and more importantly, how can I do it.
Thanks in advance for the help!
Laravel Mix 6 / Customize the Mix Configuration Path
There is no need to pass settings via env params anymore - simply specify different webpack.mix.js files for each script variation using --mix-config option and incorporate any additional settings (statically) into these:
"dev": "mix --mix-config=webpack.mix.dev.js",
"production": "mix --mix-config=webpack.mix.prod.js --production"
etc. Of course you can then still require a common webpack.mix.js containing the actual mix logic.
I'm new to shared hosting deployment and I need help to deploy an app on a shared hosting server that uses CPanel.
I have deployed thee same app before on a CPanel shared hosting, by zipping my files and uploading them to the subdomain. But as far as I am concerned, that is very wrong since all my development files are exposed to anybody
Second time I tried, I copied the files from the git repo via SSH, and the installing composer, but when I try to install node to use npm and run the command npm install and npm run dev. Surprise! I had errors such as Javascript heap out of memory Zone allocation failed and Aborted.
So I would like to know:
How to install properly node dependencies from a laravel package.json file on CPanel, without breaking down the server or misconfiguring something
Any help would be very appreciated. I there's a way to granmt or reward anyone here, I would like you to show me how.
I have to get this working before next saturday, therefore any help would be very nice.
This is my package.json, just in case you need it:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.1",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-mix-merge-manifest": "^2.0.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sweetalert2": "^10.16.0"
}
}
Thanks in advance.
So what happened here, is that I had to delete all node_modules folder. Then, I ran npm update --legacy-peer-deps command in order to have all packages according to the package.json file. After that, I could run
node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
without further complications.
I'm trying simple to-do in laravel vue.
This is my code from ./resources/js/app.js
require('./bootstrap');
import Vue from 'vue'
import App from './vue/app'
const chatapp = new Vue({
el: '#chatdiv',
components: { App }
});
I have created vue folder in ./resources/js and added app.vue file in that.
Now when I try to run 'npm run development' it gives me following error
> # development D:\test\laravue
> mix
i Compiling Mix
√ Mix: Compiled with some errors in 9.45s
ERROR in ./resources/js/app.js 4:0-27
Module not found: Error: Can't resolve 'vue/app' in 'D:\test\laravue\resources\js'
webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\prajw\AppData\Roaming\npm-cache\_logs\2021-02-25T13_46_36_740Z-debug.log
My package.json file contains this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
},
"dependencies": {
"vue": "^2.6.12"
}
}
Can someone help me to resolve this error? Thank you.
Vue doesnt have app folder in it, you can't import App from ./vue/app because vue doesn't have app.
You can create App.vue near your app.js, then in app.js you can import it
import App from ./App
Your App.vue can be like:
<template>
<div>Hello from App!</div>
</template>
<script>
export default {
name: "App"
}
</script>
I've seen this question being answered a couple of times on the net. However, I'm just not getting it to work. I hope you can help.
I'm using Laravel 5.5 with Laravel Mix. Instead of manually loading some of my needed js files into the specific directories, I want to install the packages via npm and require them in laravel mix.
This works with bootstrap out of the box. I swapped the 3.3.7 version for the 4.0.0 alpha6.
npm install bootstrap-v4-dev -D
Then in resources/assets/js/bootstrap.js I changed it to look like this
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-v4-dev');
} catch (e) {}
and it works. I can run npm run dev just fine. Now, I want to do the exact same thing with another npm package. So I do npm install now-ui-kit -D my package.json now looks like this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"now-ui-kit": "^1.0.1",
"popper.js": "^1.11.1",
"vue": "^2.1.10"
},
"dependencies": {
"now-ui-kit": "^1.0.1"
}
}
Then in the bootstrap.js file, I add require('now-ui-kit');, but now when I try to compile, I get the following error:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
# ./resources/assets/js/bootstrap.js 15:0-21
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js
I also tried placing the require('now-ui-kit'); in app.js or even in webpack.mix.js..
Nothing worked, and I really don't get what I'm doing wrong.. Could someone help?
Follow these steps:
Install npm package let install jQuery npm i jquery.
Create a .js file say resources/js/package.js
Now open webpack.mix.js add package.js in webpack.mix.js
mix.js([
'resources/js/package.js',
'resources/js/otherJsFile.js'
], 'js/app.js').extract([
// Extract packages from node_modules to vendor.js
'jquery'
])
Write this in resources/js/package.js :
import $ from 'jquery';
Finally use js/vendor.js, js/app.js on .blade file.
Now you can jQuery on your website imported from node_modules
I recently switched to laravel 5.4.
When i tried to run npm run watch I get the following error --
I didn't even done any edit in my sass file.
Sass File looks like this ---
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
How can i solve this?
My package.json file looks like this --
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"lodash": "^4.16.2",
"vue": "^2.0.1"
}
}
This is a current issue with Laravel Mix. There is an open issue discussion on GitHub for this.
https://github.com/JeffreyWay/laravel-mix/issues/200
According to the some of the users you could use Laravel Mix version 0.5.8 and your problem would go away. Edit your package.json file to have "laravel-mix": "0.5.8"
I recommend using this until the issue is resolved.
This seems to be an issue for windows users.
Edit
As of this moment the issues seems to have been resolved. You need to pull in the latest version of Mix and also add "vue-loader": "10.1.0" to your package.json file.
Make sure you have sass installed on your computer. If you don't have it installed, instructions are here: http://sass-lang.com/install.
Then you need to make sure sass is also installed in the project. Reading your package.json it seems you have less instead.
Run: npm i --save-dev sass
By default your project comes with less installed. Locate the file webpack.mix.js from the root folder. find the following line
mix.less('resources/assets/less/app.less', 'public/css')
.less('resources/assets/less/admin.less', 'public/css');
And change it to
mix.sass('resources/assets/sass/app.sass', 'public/css')
.sass('resources/assets/sass/admin.sass', 'public/css/admin');
If you don't see those exact same lines, find something similar.