Node / NPM to manage JS / CSS in Laravel

Node / NPM to manage JS / CSS in Laravel

Comments 0 Comment

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

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *