To manage your js and css files in Laravel you could place your js and css files in the public directory, but using the /resources/assets folder you can add your js and css (sass or less, etc) in there.
You then need to compile these with nodejs and NPM. To install nodejs / npm on Ubuntu you can use
sudo apt-get install nodejs
Once installed in a terminal window navigate to your Laravel project directory and type:
node install
Once that’s done you can view the file package.json.
These are the js and css files that node manage for this project. Each of the script names can be run using npm.
Eg, in my test Laravel site part of this file says:
“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”
},
SO, in the terminal I can run:
npm run dev
to run the development script.
This needs to be done every time you make a change to your js or css files.
To make this process easier, use watch instead. It will “watch” these asset files and will automatically run them when you make changes.
npn run watch
Comments