Laravel elixir is a popular feature in laravel used to compile , minify , merge styles and scripts by defining task in gulp. You may have used it commonly in your laravel projects and perhaps wanted sometimes to use it with wordpress project like plugin and/or theme as well. It’s not that difficult actually. All you have to do is typing some command in cmd prompt.
Firstly make sure you have node installed globally. You can binary installable file from here.
Then, install gulp globally
npm install --global gulp-cli
Now , open your cmd (cygwin in my case) in the root directory of your project. In my case, the project is test-plugin located in plugins folder.
run this command to create package.json file here. You will be asked to provide author name, project version etc. skip them for now hitting enter.
npm init
Next, run this command and wait for while to include necessary node modules in the project.
npm install --save-dev gulp
Then, include laravel elixir with the following command
npm install --save-dev laravel-elixir
Done ! Now, we need a gulpfile.js file wherer our task will be written to be run by elixir. So create gulpfile.js in your root.
Here , we have load laravel-elixir module, and provie some configuration to set assetpath, public path etc
var elixir = require('laravel-elixir');
elixir.config.assetsPath = 'assets/';
elixir.config.publicPath = 'public/';
elixir.config.css.outputFolder = './';assetPath defines, where elixir should search for your raw css, js , scss, less etc file.
publicPath defines, where elixir will save the compiled those scripts
Here, in my case, I have added main.css file in assets/css directory and let elixir compile this file like the code below,
elixir(function (mix) {
mix.styles(['main.css'])
})Now, we run gulp command in cmd prompt and see all.css file created in public directory.
That’s all, now you can use elixir exactly how you do in laravel. You can see the documentation for knowing more about elixir.
Elixir documentation : https://laravel.com/docs/5.3/elixir
