I created a simple one page site with just three files, index.html, app.css, app.js. That was all I needed. I was using bulma from a cdn and had custom css in app.css. Then I decided to switch over to tailwindcss to give it a go. To do this just created I had to create a tailwind.js file and a main.css file. I use the build in converter so no need to get into gulp or webpack. But I do now have files that I do not want to push to production.
So I thought I'll create a source directory and put my index.html, main.css and app.js in there, then write a script that runs the tailwindcss converter and puts the files I want to deploy in a build folder. Well that sounds familiar... So I'll just use Jigsaw and be done with the build part of it.
Here is how I went about that.
Install Jigsaw (Take a look here for installation options)
composer require tightenco/jigsaw
Since we will be compiling assets, we need to run
npm install as well.
Move our files into the source folder
With Jigsaw we get a _source/layouts/master.blade.php file and a source/index.blade.php file. Since this is a single file site we could just replace index.blade.php and not extend the master layout, but It's better to split it up into the template and the content.
The next thing to do is move our css into _source/assets/css/app.css. Then we need to tell gulp to process this file for us. We can still use the tailwindcss converter to do this for us. We just need to add the following to our gulpfile.js file.
mix.exec('./node_modules/.bin/tailwind build ./source/_assets/css/app.css -c ./tailwind.js -o ./source/css/app.css');
This says run the tailwind build our file into ./source/css/app.css. That way when jigsaw build is ran it will include the processed css file.
mix.webpack( './source/_assets/js/app.js', './source/js/' );
Here we are processing ./source/_assets/js/app.js and outputting ./source/js/app.js again so jigsaw build will process it.
Build our site Now we can build our site and check the output to see if all is as expected. But first we need to install our dependencies, and also install elixers webpack support
npm install npm install laravel-elixir-webpack-official --save-dev gulp
Once we are happy with the result we can add the
--production flag to build the folder we will deploy.