DEV Community

Cover image for Compile SCSS and JS inside a PHP Project
Basil
Basil

Posted on

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

GitHub logo 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.

Alt Text

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

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

Compile with Unglue

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

Discussion (1)

Collapse
cchana profile image
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!