Compile SCSS and JS inside a PHP Project

There are still Projects which do not utilize all those fancy JavaScript Frameworks and their environments. No NPM, no YARN, just PHP (and HTML, CSS)

But of course, SCSS might be used and some JavaScript parts you'd like to compile into minified files.

How to compile your SCSS and JS files? Install a grunt workflow, Gulp or Webpack? You could...

... but you don't need to mix up your well organized PHP project with Node stuff. Its possible to just install

unglue-workflow / client

The client binary which sends the data to the server and creates the output from the API response.

and compile right from your console, no need for a package.json file (which is instantly outdated anyhow) inside your PHP Application.

And this is why we cam up with unglue.io an API based compile service for JS and SCSS.

Forget the hassle of installing Node on your local system just to compile some SCSS files and minify/uglify JS code. A composer package which is seamless installed along with other depencies does all the job.

You can either host your own API (there is a docker server image or just install the node package somewhere) or just use the public API we offer, its completely free and open source.

Using Unglue

In order to use unglue you just need 3 things:

1) Install the composer package unglue/client (composer require --dev unglue/client).

2) Create an .unglue file in the directory you would like to have your compiled files and let unglue know what to compile:

{
    "css": [
          "../scss/main.scss"
    ],
    "js": [
        "../js/main.js"
    ]
}

3) And run the compile or watch command right from your vendor folder: ./vendor/bin/unglue watch

If you are running your own server (locally or on a public URL) use ./vendor/bin/unglue watch --server=yourunglueserver.com

For the full documentation and usage see unglue.io

---

This is just another option to handle your frontend code workflow, the common workflows are not wrong, its just: Frontend workflow done different

Comments

[Charanjit Chana]

Really interesting solution, I like the KISS philosophy in general and this would certainly fit that by keeping your local setup pretty simple. I use CodeKit locally, it’s just something I never have to think about but if/when it’s time to move on I think unglue might be the perfect candidate!