A PHP Command Line tool that makes it easy to compile, concat, and minify front-end Javascript and CSS/SCSS dependencies.

Last update: Nov 12, 2021

Front End Compiler

packagist package version packagist package downloads license

A PHP Command Line tool that makes it easy to compile, concat, and minify front-end Javascript and CSS/SCSS dependencies.

The minify and scssphp packages do all of the heavy lifting, this tool simply combines the two into a single CLI tool with some extra features.

Installation

To a package (local)

composer require itsahappymedium/fec
./vendor/bin/fec help

To your system (global)

composer global require itsahappymedium/fec
fec help

Usage

Running FEC without any arguments will load files from a fec.json file (and if that doesn't exist, gpm.json) that is structured like so:

{
  "compile": {
    "css": {
      "build/main.min.css": "scss/main.scss",
      "build/vendor.min.css": [
        "gpm_modules/kazzkiq/balloon.css/src/balloon.scss",
        "scss/vendor/*.scss"
      ]
    },
    "js": {
      "build/main.min.js": "js/*.js",
      "build/vendor.min.js": [
        "gpm_modules/kraaden/autocomplete/autocomplete.js",
        "js/vendor/*.js"
      ]
    }
  }
}

The --path or -p option can be passed to define a JSON file or a directory path to where a fec.json or gpm.json file is located to load a file list from.

File paths can be passed to FEC to compile those specific files.

The --css-output or -c option can be passed to define the file where CSS/SCSS input files will be concated and minified into otherwise if this option isn't used, CSS/SCSS files will all be concated and minified into their own individual filenames with their extension changed to .min.css.

The --js-output or -j option can be passed to define the file where JavaScript input files will be concated and minified into otherwise if this option isn't used, JavaScript files will all be concated and minified into their own individual filenames with their extension changed to .min.js.

The --scss-import-path or -s option can be passed to include additional directory paths to locate imported SCSS files. Separate multiple directories with a comma (,).

The --compress or -x option can be passed to additionally compress the minified files by removing all comments and line breaks.

Examples

fec --js-output build/main.min.js js/*.js

fec --css-output build/main.min.css --js-output build/main.min.js scss/*.scss js/*.js

Defining Settings with JSON

You can set the scss-import-path and/or compress options by defining them in your JSON file like so:

{
  "compile": {
    "css": {
      "build/main.min.css": "scss/main.scss"
    }
  },
  "settings": {
    "fec": {
      "compress": true,
      "scss-import-path": "gpm_modules"
    }
  }
}

The scss-import-path setting accepts a string or an array of strings, these paths are relative to the location of the JSON file.

Related

  • GPM - A PHP Command Line tool that makes it easy to download dependencies from GitHub.

License

MIT. See the license.md file for more info.

GitHub

https://github.com/itsahappymedium/fec
Comments
  • 1. Possibly add the ability to only concat files rather than minify?

    This would probably help in development while we're waiting on #2 to be possible. A minify: false option or something like that with the default being true.

    Reviewed by kodie at 2021-11-04 16:05
  • 2. CSS paths for `url` values are changed to be relative to wherever FEC was ran from rather than to the stylesheet itself

    For example, if my file structure is like this:

    /composer.json 
    /content/themes/my-theme/compile.json
    /content/themes/my-theme/scss/style.scss
    

    and my compile.json file looks like this:

    {
      "compile": {
        "css": {
          "style.css": "scss/style.scss"
        }
      }
    }
    

    and my style.scss file looks like this:

    .my-div {
      background: url('img/background.svg');
    }
    

    and I run FEC from the root of my project like so:

    vendor/bin/fec --path content/themes/my-theme/compile.json
    

    the path in my CSS gets changed to:

    ../../../img/background.svg
    

    Ideally, the path wouldn't get changed so it ends up relative to where style.css gets created.

    For now you can get around this by making your CSS url paths relative to wherever you'll be running FEC from. So in my case here, I would use content/themes/my-theme/img/background.svg.

    Reviewed by kodie at 2021-10-21 18:05
  • 3. Possibly allow the compress option to only be applied to certain files and/or excluded from certain files

    We use the --compress option to make sure any comments or newline characters are removed from vendor libraries to make sure our production CSS and JavaScript is as small as possible (some work could still be done on the JS side of things), however with WordPress themes, we need the first comment block to be preserved for it's metadata.

    I'm thinking something like this:

    {
      "settings": {
        "fec": {
          "compress": "!sass/style.scss"
        }
      }
    }
    

    But I'm not 100% sure yet.

    Reviewed by kodie at 2021-10-07 14:15
  • 4. Possibly output the files that are imported via scss in the terminal

    We currently output the main scss files as well as any css and JavaScript files that are loaded in. It would probably be nice to also get a list of any additional files that are loaded in via scss and compiled.

    The scssphp library we're using does have the the ability to hook into the import function as documented here: https://scssphp.github.io/scssphp/docs/extending/importers.html I've played with it a little bit but didn't get very far, however I do think it's possible.

    Reviewed by kodie at 2021-09-24 23:42
  • 5. Add watch command

    This command would start a task that watches for any changes to source files and recompile them when needed.

    fec watch

    It would also be nice to have this command inject some JavaScript or something where the page would automatically refresh when files are recompiled but that would probably be a lot more work.

    Reviewed by kodie at 2021-09-22 16:49
  • 6. Allow some options to be set via the JSON file

    Just like this issue I opened up on the GPM package: https://github.com/itsahappymedium/gpm/issues/2 I think it would be nice to be able to set options via the JSON file. Something like:

    {
      "settings": {
        "fec": {
          "compress": true,
          "scss-import-path": "content/gpm_modules"
        }
      },
      "dependencies": {
         "derek-watson/jsuri": "1.3.1",
         "eduardoboucas/include-media": "1.4.10"
      }
    }
    

    Options could be overwritten via the CLI and paths would be relative to the JSON file.

    Reviewed by kodie at 2021-09-22 16:13
  • 7. `remove-important-comments` edge-case where an SCSS file with only important comments gets injected into the middle of another SCSS file

    Using FEC in combination with GPM on a project, like we have many times before, we ran into this weird edge-case where style.scss gets injected into the middle of imports.scss when it should have been at the top.

    style.scss has only a multiline important comment and imports.scss has imports to other scss files that actually contain code.

    {
      "compile": {
        "css": {
          "style.css": [
            "sass/style.scss",
            "sass/imports.scss"
          ]
        }
      },
      "settings": {
        "fec": {
          "remove-important-comments": "!sass/style.scss"
        }
      }
    }
    

    Removing remove-important-comments from the config fixes the issue. We have use this same exact setup on many other sites before and as far as I know this is the only time we've ran into this issue.

    Reviewed by kodie at 2022-05-19 18:54
  • 8. During `watch` command, when an SCSS file that's been imported by multiple files is edited, only one compile is triggered

    For example, I have two SCSS files that will be in their own separate destination files but they both import the same SCSS file. If I'm running the watch command and edit that imported SCSS file, only one of the destination files will get recompiled.

    Reviewed by kodie at 2021-11-15 16:00
  • 9. Better minification

    We currently use minify for minifying files which works pretty good but there are some improvements that could be made.

    For example with CSS, it adds each file onto a new line, which we fix in FEC with some additional regex that's applied after minification happens, so not ideal, but that works fine.

    But with JavaScript, not only does it add each file onto a new line, it preserves a lot of unnecessary line breaks and also doesn't mangle the variable names (which would be a nice option). The UglifyJS Node module does an awesome job at this but the point of FEC is to do it all in PHP.

    We're kind of limited in PHP minification libraries and I wouldn't be against having a separate library for minifying JS. I've tried out JShrink as well as js-minify however both of them have a lot of the same issues that the minify package has and also failed to pass some of our project tests.

    So for now, I think the minify package is about as good as it gets as far as PHP minification libraries go. One option would be to use an executable CLI minification application and call it from FEC. If we went that route though I'd probably want to add it in as an option that's disabled by default. I also don't know how I feel about including a third-party executable in the FEC repo but we could possibly have it downloaded as a composer post-install script.

    I think the third-party executable is something I'll look into in the future but for now, we'll just stick with the minify package. I may look into submitting some pull requests to minify in the meantime.

    Reviewed by kodie at 2021-11-10 20:22
  • 10. Add source maps

    It appears that the scssphp package has this feature but minify does not which might make this kind of difficult. However, I'm not against switching to a different minification package as I'm not 100% happy with how the current one handles JavaScript minification.

    Reviewed by kodie at 2021-09-22 16:09
BetterWPCLI - a small, zero-dependencies, PHP library that helps you build enterprise WordPress command-line applications.
BetterWPCLI - a small, zero-dependencies, PHP library that helps you build enterprise WordPress command-line applications.

BetterWPCLI - a small, zero-dependencies, PHP library that helps you build enterprise WordPress command-line applications.

May 3, 2022
Skeleton for creating a new Command Line Interface application with a minimum of dependencies.

Skeleton for creating a new Command Line Interface application with a minimum of dependencies.

Jan 17, 2022
A powerful command line application framework for PHP. It's an extensible, flexible component, You can build your command-based application in seconds!
A powerful command line application framework for PHP. It's an extensible, flexible component, You can build your command-based application in seconds!

CLIFramework CLIFramework is a command-line application framework, for building flexiable, simple command-line applications. Commands and Subcommands

May 17, 2022
🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.
🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.

Termwind Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API. In short, it's like Tailwind CSS

May 27, 2022
PHP Interminal is a command-line tool that gives you access to PHP Internals discussions in your terminal.
PHP Interminal is a command-line tool that gives you access to PHP Internals discussions in your terminal.

PHP Interminal is a command-line tool that gives you access to PHP Internals discussions in your terminal. ??

Dec 12, 2021
A PHP command line tool used to install shlink
A PHP command line tool used to install shlink

Shlink installer A PHP command line tool used to install shlink. Installation Install this tool using composer.

Jan 10, 2022
A simple command-line tool whose aim is to facilitate the continous delivery of PHP apps
A simple command-line tool whose aim is to facilitate the continous delivery of PHP apps

Deployer Simple command-line tool that aims to facilitate the continous delivery of PHP apps, particularly Laravel apps. Imagine you want to update yo

Sep 8, 2021
👨🏻‍🚀 A command-line tool that gives you the Alpine Day 2021 schedule in your timezone. 🚀
👨🏻‍🚀 A command-line tool that gives you the Alpine Day 2021 schedule in your timezone. 🚀

Alpine Day Schedule a command-line tool that gives you the Alpine Day 2021 schedule in your timezone. ?? Quick start Requires PHP 7.4+ # First, instal

Jun 10, 2021
Laracon Schedule a command-line tool that gives you the Laracon Online schedule in your timezone.
Laracon Schedule a command-line tool that gives you the Laracon Online schedule in your timezone.

Laracon Schedule a command-line tool that gives you the Laracon Online schedule in your timezone. ?? Quick start Requires PHP 7.4+ # First, install: c

Dec 13, 2021
Simple command-line tool to access HiWeb account information

Simple command-line tool to access HiWeb account information.

Nov 17, 2021
💥 Collision is a beautiful error reporting tool for command-line applications
💥 Collision is a beautiful error reporting tool for command-line applications

Collision was created by, and is maintained by Nuno Maduro, and is a package designed to give you beautiful error reporting when interacting with your

May 26, 2022
A CLI tool to check whether a specific composer package uses imported symbols that aren't part of its direct composer dependencies

A CLI tool to analyze composer dependencies and verify that no unknown symbols are used in the sources of a package. This will prevent you from using "soft" dependencies that are not defined within your composer.json require section.

May 17, 2022
Takeout is a CLI tool for spinning up tiny Docker containers, one for each of your development environment dependencies.
Takeout is a CLI tool for spinning up tiny Docker containers, one for each of your development environment dependencies.

Takeout Takeout is a CLI tool for spinning up tiny Docker containers, one for each of your development environment dependencies. It's meant to be pair

May 13, 2022
Twitter raffles in the command line, with PHP and minicli
Twitter raffles in the command line, with PHP and minicli

Rafflebird Rafflebird is a highly experimental CLI application for giveaways / raffles on Twitter, built in PHP with Minicli. Disclaimer: The recent s

May 14, 2022
Command-line control panel for Nginx Server to manage WordPress sites running on Nginx, PHP, MySQL, and Let's Encrypt
Command-line control panel for Nginx Server to manage WordPress sites running on Nginx, PHP, MySQL, and Let's Encrypt

EasyEngine v4 EasyEngine makes it greatly easy to manage nginx, a fast web-server software that consumes little memory when handling increasing volume

May 22, 2022
Lovely PHP wrapper for using the command-line

ShellWrap What is it? It's a beautiful way to use powerful Linux/Unix tools in PHP. Easily and logically pipe commands together, capture errors as PHP

May 3, 2022
A PHP library for command-line argument processing

GetOpt.PHP GetOpt.PHP is a library for command-line argument processing. It supports PHP version 5.4 and above. Releases For an overview of the releas

May 24, 2022
Generic PHP command line flags parse library
Generic PHP command line flags parse library

PHP Flag Generic PHP command line flags parse library Features Generic CLI options and arguments parser. Support set value data type(int,string,bool,a

Mar 2, 2022
php command line script to DCA crypto from Coinbase Pro

dca.php A simple php script designed to be run via the command line via a cron job. This will connect to coinbase pro and buy the crypto coins specifi

Oct 22, 2021