Download the PHP package carbon/pipeline without Composer

On this page you can find all versions of the php package carbon/pipeline. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package pipeline

Carbon.Pipeline – Build stack for Neos CMS

Latest stable version Download GitHub stars GitHub watchers

Carbon.Pipeline is a delicious blend of esbuild and PostCSS to form a full-featured, ultra-fast modern Javascript and CSS bundler for Flow Framework and Neos CMS.

Getting started

First, thank you that you want to give this build stack a try! If you miss a ✨ feature or found a 🐛 bug, feel free to open an issue.

Install via composer

Run composer require carbon/pipeline --dev. Some files (if not already existing) will be copied to your root folder during the installation. After installing the package, run the command install to install the required packages defined in package.json. Feel free to modify and change dependencies before installing 👍

Standalone use in custom projects without Neos

Carbon.Pipeline is also a perfect choice for your non-Neos projects. Consider installing the composer package neos/composer-plugin beforehand to get Carbon.Pipeline installed in the correct directory under Build/Carbon.Pipeline.

Manual install

If you want to make significant adjustments to the build stack, you can also download the code as zip file and put it in the Build/Carbon.Pipeline folder. Go to Carbon.Pipeline/RootFiles/Global and Carbon.Pipeline/RootFiles/JavaScript or Carbon.Pipeline/RootFiles/TypeScript, copy the files to your root folder (Don't forget the hidden files, starting with a dot). After this is done, run the command install to install the required packages defined in package.json. Feel free to modify and change dependencies before installing 👍

Choose a package manager

You can choose between different package managers: npm, Yarn and the ultra-fast and disk-space saving pnpm. You can set your favorite package manager by running the command pnpm setPackageManager, npm run setPackageManager npm or yarn setPackageManager yarn. The script behind it don't need any dependencies, so you can run it before the install command. The default package manager is pnpm

Add files to the build stack

Carbon.Pipeline assumes the following project directory structure for resources:

A configured location under

The whole configuration, including which files to build, is configured in defaults.yaml and merged with your configuration. Under the key packages, you can either add an array with package settings or, if you have just one entry, you can directly add the configuration:

If you have just one file, you can pass this directly without creating an array:

If you don't set files, all parsable files from the input folder get rendered. Files that start with an underscore (_) will be ignored.

To change the input and/or the output folder, you can do this with the folder option:

Further, you can write the files to another package:

If you want to go crazy with multi-sites in Neos, you can also write the files to multiple packages:

A package entry has the following options:

Key Type Description Example
package string The name of the package (required) Vendor.Foo
files string or array The names of the entry files. If none given, all parsable files in the input folder get rendered Main.js
ignoredFiles string or array List of files who should be ignored Main.js
folder.input string The folder under Resources/Private where to look for the entry files Assets
folder.output.package string or array If set, the files will be writen in a different package (one or multiple) Foo.Bar
folder.output.inline string The folder where inline files get rendered Private/Templates/
folder.output.style string The folder where inline styles rendered Public/Assets
folder.output.script string The folder where inline scripts rendered Public/Assets
folder.output.module string The folder where inline modules rendered Public/Assets
folder.output.commonJS string The folder where inline commonJS files get rendered Public/Assets
external string or array You can mark a file or a package as external to exclude it from your build. */Modules/*
inline boolean Flag to toggle if the files should be inlined. If set, sourcemaps are disabled true
sourcemap boolean Flag to toggle source map generation false
format string Set the format of the output file. Read more cjs
jsFileExtension array or false File extensions of javascript files. If set to false, all files will have the extension .js false
jsFileExtension.script string File extension of script files .js
jsFileExtension.module string Output extension of module JS files. .module
jsFileExtension.commonJS string Output extension of common JS files. .common

These are the default values for the folders:

and these for the build options:

The target folders can be adjusted under the key folder.output. If you want to change the defaults for all your packages, you can also set this globally in your pipeline.yaml:

Please look at the defaults.yaml file for all the options.

If you set an entry file with the javascript module suffix (.mjs, .mjsx, .mts or .mtsx) the format of this file will be enforced to esm. The same with commonJS: If you set an entry file with the javascript commonJS suffix (.cjs, .cjsx, .cts or .ctsx) the format of this file will be enforced to cjs. E.g., if you have the following array ["Main.js", "Module.mjs", "CommonJS.cjs"], and have no specific setting for the format, Main.js will have the format iife, Module.mjs will have the format esm and CommonJS.cjs will have the format cjs.

Tasks

As you can choose your favorite package manager, you have to prepend the task name with the corresponding name (pnpm, yarn or npm run)

There are five predefined main tasks:

Command Description Command
watch Start the file watcher concurrently -r pnpm:watch:*
dev Build the files once concurrently -r pnpm:dev:*
build Build the files once for production (with optimzed file size) concurrently -r pnpm:build:*
pipeline Run install, and build the files for production pnpm install;concurrently -r pnpm:pipeline:*
showConfig Shows the merged configuration from defaults.yaml node Build/Carbon.Pipeline/showConfig.mjs
setPackageManager Set your package manager. node Build/Carbon.Pipeline/setPackageManager.js

The tasks are split up, so they can run in parallel mode. But you can also run them separately:

Command Description Command
watch:js Start the file watcher for JavaScript files node Build/Carbon.Pipeline/esbuild.mjs --watch
watch:css Start the file watcher for CSS files node Build/Carbon.Pipeline/postcss.mjs --watch
dev:js Build the files once for JavaScript files node Build/Carbon.Pipeline/esbuild.mjs
dev:css Build the files once for CSS files node Build/Carbon.Pipeline/postcss.mjs
build:js Build the JavaScript files once for production node Build/Carbon.Pipeline/esbuild.mjs --production
build:css Build the CSS files once for production node Build/Carbon.Pipeline/postcss.mjs --production
pipeline:build Build the files once for production (with optimzed file size) concurrently -r pnpm:build:*

Extendibility

Of course, you can also add your own tasks in the scripts section of your package.json file. For example, if you have a Neos UI custom editor and want to start all your tasks in one place, you can add them like this:

Be aware that you may have different syntax for settings options based on the chosen task manager To set the current work directory, for example you have to set --cwd for yarn, --dir or -C for pnpm and --prefix for npm.

Because the tasks start with build:, respectively with watch: or pipeline:, the tasks will be included in the corresponding root command. In this example, build, watch or pipeline. If you want to go crazy, you can even mix different task managers.

Compression of files

In production mode (build), the files also get compressed with gzip and brotli. You can edit the compression level under the key buildDefaults.compression. Per default, the highest compression level is set. To disable compression at all, you can set it to false:

Or, if you want to disable just one of them, you can set the entry to false:

Import files from DistributionPackages and other Packages

By default, two aliases are predefined: DistributionPackages and Packages. Like that you can import (CSS and JS) files from other packages like that:

Thanks to a custom made resolve function, you can also use globbing in CSS imports: @import "Presentation/**/*.pcss";

Alter the configuration file

In some setups, you may need multiple configurations with different config files. In this edge case, you can set a other config file in your scripts section in your package.json file:

In this example, pipelineCustom.yaml gets used instead of pipeline.yaml.

CSS

Sass

If you want to use Sass (.scssor .sass files) you have to install sass and node-sass-tilde-importer:

For pnpm:

For Yarn:

For npm:

You have to ways to import files from node_modules (Example with bootstrap):

Pass options to the sass compiler You can pass options to the sass compiler with `sassOptions`. **Example**: To silence warnings from stylesheets loaded through importers and load paths, you can enable `quietDeps`:

PostCSS

This template comes with a variety of PostCSS Plugins. Feel free to remove some or add your own favorite packages. The configuration is located in .postcssrc.mjs. The suffix of these files should be .pcss.

Pass custom options to you PostCSS config file

You can pass custom options to your PostCSS config file with key postcssOptions. In this example, you would access the key prefix with ctx.prefix in your PostCSS config file (.postcssrc.mjs).

Use postcss resolve() function

You can use resolve() in your css/scss files to load resources (eg images) from Resources/Public of the package. The path will be resolved at compile-time.

resolves to

If you choose to order your Packages in DistributionPackages in subfolders, you can add this setting to ensure the paths are correctly rewritten:

This ensures that the path that is generated (eg /_Resources/Static/Packages/(Sites|Plugins)/Your.Package/.../) will be correctly resolved, removing the subfolder from the path.

PostCSS Plugins

Following plugins are included: | Name | Description | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | [postcss-import] | Plugin to transform `@import` rules by inlining content. Thanks to a custom `resolve` function you can also use [glob] | | [Tailwind CSS] | A utility-first CSS framework for rapidly building custom user interfaces | | [postcss-nested] | Unwrap nested rules like how Sass does it | | [postcss-assets] | Plugin to manage assets | | [postcss-clip-path-polyfill] | Add SVG hack for clip-path property to make it work in Firefox. Currently supports only `polygon()` | | [postcss-sort-media-queries] | Combine and sort CSS media queries | | [autoprefixer] | Parse CSS and add vendor prefixes to CSS rules using values from [Can I Use] | | [cssnano] | Modern CSS compression | | [postcss-reporter] | `console.log()` the messages (warnings, etc.) registered by other PostCSS plugins | Of course, you can add your own or remove not-needed Plugins as you want. This is just meant as a starting point.

Tailwind CSS

This setup comes with Tailwind CSS, a highly customizable, low-level CSS framework. An example configuration is provided in Read more about controlling the file size here. To remove a specific package, you could use this pattern in your pipeline.yaml:

By default, following entries are pre-defined:

The script put automatically all entries starting with an ! at the end of the list. You can control this setting by calling pnpm showConfig --path=buildDefaults.content

By the way: Alpine.js is excellent in combination with Tailwind CSS.

Javascript

Flow Settings in Javascript Suppose you use tools like [Flownative.Sentry], you perhaps want to pass some of the settings to your Javascript without setting a `data` attribute somewhere in the markup. For that, you can enable `esbuild.defineFlowSettings`. If set to `true`, all settings are passed. It is recommended to put it to a path (e.g. `Flownative.Sentry`). This path is added as `--path` attribute to the `flow configuration:show` command. If you run the command `build`, which automatically has the flag `--production`, the `FLOW_CONTEXT` is set to `Production`. In Javascript, you can access the variables like this: Make sure your [`eslint.config.mjs`] has the global `FLOW` enabled:
Pass options to esbuild You can pass options to the [esbuild API] with `esbuild.options`. **Example**: To remove some functions from the production build, you can use the `esbuild.options.pure` setting. If you have just one function, you can pass a string; otherwise, you have to set it to an array:
TypeScript If you want to use [TypeScript], just choose the option TypeScript on the composer installation
React Using JSX syntax usually requires you to manually import the JSX library you are using. For example, if you are using [React], by default, you will need to import React into each JSX file like this:
Preact If you're using JSX with a library other than React (such as [Preact],), you'll likely need to configure the [JSX factory] and [JSX fragment] settings since they default to `React.createElement`and `React.Fragment` respectively. Add this to your `tsconfig.json` or `jsconfig.json`:
Svelte If you want to use [Svelte], add the following packages to `package.json`: For [pnpm]: For [Yarn]: For [npm]: Enable the plugin in your [`pipeline.yaml`] file: > You can also configure the esbuild plugin and preprocess package, which should be used. Just add a key `plugin` or `preprocess` and the plugin name. Your `tsconfig.json` may look like this:
Vue.js If you want to use [Vue.js], add the following packages to `package.json`: For [pnpm]: For [Yarn]: For [npm]: Enable the plugin in your [`pipeline.yaml`] file: > You can also configure the esbuild plugin, which should be used. Just add a key `plugin` and add the plugin name.
Babel.js / IE 11 support If you want to use [Babel.js], add the following packages to `package.json`: For [pnpm]: For [Yarn]: For [npm]: as well as additonals babel plugins and/or presets like `@babel/preset-env`, `@babel/plugin-proposal-class-properties`, `@babel/plugin-proposal-object-rest-spread` Further, you have to add a file called `babel.config.json`, for example: Finally, enable the plugin in your [`pipeline.yaml`] file: As the `ENV` variable is set to `development` or `production` if you run the tasks, you can have different setups (For example remove `console` commands with [`babel-plugin-transform-remove-console`] on `production`): If you are a poor person and have to support Internet Explorer, you must edit your `.browserslistrc`. If a browser starting with `ie` is found, the target `es5` gets activated.
Additional esbuild plugins You can also add additional [esbuild] plugins, for example [`esbuild-envfile-plugin`]: As the plugin returns not the function directly (like others), you also have to pass the function's name. If a plugin returns the function directly, you don't have to set this. If you want to enable such a plugin without any options, you can just pass `name-of-the-plugin: true`

Live-Reloading

If you want to use live reloading, you can do this with Browsersync.

To install it run pnpm add --global browser-sync, yarn global add browser-sync, or npm install -g browser-sync.

Then you have to create an initial config with browser-sync init. After that, you need to adjust the created bs-config.js file. You can adjust every parameter, but the two parameter you need to set is files and proxy:

If you want to also reload the page if a fusion or a template file gets changed, you can do so:

Make sure you set the correct proxy with the corresponding protocol (https:// or http://), depending on your setup. To create a better overview of the parameter, you can delete the not changed values from the file.

To start Browsersync you can run browser-sync start --config bs-config.js. If you want to start it together with watch, you can add the following line into the scripts section:

All versions of pipeline with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package carbon/pipeline contains the following files

Loading the files please wait ....