Namespace, Primitive, Method
Publish your own packages to the world's most popular software ecosystem with npm Pro.Get started »


1.0.0-beta.6 • Public • Published


Build Status

A tools for linting and building assets from yProx CMS. See this PR for additional details.


  • Be inside an Yprox application 🤷‍♂
  • Node.js > 8
  • Yarn


Note: You should create a .npmrc file at the root of your application with a auth token inside, because this package is private.

$ yarn add @yproximite/yprox-cli

Available commands

After some configuration, you should be able to run those commands:

yprox-cli build [--mode=development] [--watch] [--handler=] [--no-babelify]

$ yarn yprox-cli build
$ yarn yprox-cli build --mode production
$ yarn yprox-cli build --handler rollup # will handle only assets handled by rollup 
$ yarn yprox-cli build --no-babelify # disable Babel 
# Build, then watch and build 
$ yarn yprox-cli build --watch
$ yarn yprox-cli build --mode production --watch

yprox-cli lint [--fix]

$ yarn yprox-cli lint
$ yarn yprox-cli lint --fix

Production mode

When passing flag --mode production during building:

  • JS and CSS files will be minified
  • Sourcemaps will be generated for JS and CSS files
  • Images will be minimified


First, you should create a yprox-cli.config.js file:

// your-app/yprox-cli.config.js
module.exports = {
  // Entries that will be build/linted, see next section
  assets: {
    app: './assets/app.js',
    vendor: './assets/vendor.js',
  // Destination paths that will be automatically injected in your entries
  path: {
    js: './public/js',
    css: './public/css',
    img: './public/img',
    plugins: './public/plugins',
  // Specific configuration for handlers
  handlers: {
    autoprefixer: {
      browsers: [...],

Your configuration file will be merged with defaults config:

  path: {},
  handlers: {
    autoprefixer: {},
    cssnano: {
      safe: true,
      autoprefixer: false,
    uglify: {
      compress: {
        drop_console: true,
    gifsicle: {
      interlaced: true,
    jpegtran: {
      progressive: true,
    optipng: {
      optimizationLevel: 5,
    svgo: {
      plugins: [
          removeViewBox: true,


Since you configured two entries app and vendor, you should create files assets/app.js and assets/vendor.js.

Those files follow this structure:

// `cli` is an instance of `Cli` class
// `config` contains your configuration (`yprox-cli.config.js`)
module.exports = (cli, config) => ([
  // array of entries

Each entries can be handled by:

  • browserify
  • rollup
  • js
  • css
  • file
  • image

Handler browserify (DEPRECATED)

This handler is deprecated because browserify is old, plugins are not maintened, and it will never support ES6 modules. Use rollup handler instead for a modern approach.

Used for building .vue components:

  handler: 'browserify',
  src: 'src/StoreLocatorBundle/Resources/private/js/yprox-store-locator',
  concat: 'yprox-store-locator.min.js',
  dest: config.path.js, // will resolve `public/js`

Handler rollup

Used for building .vue components, with support of ES6 modules (no need to Babel):

  handler: 'rollup',
  name: 'yprox-store-locator',
  src: 'src/StoreLocatorBundle/Resources/private/js/yprox-store-locator',
  concat: 'yprox-store-locator.min.js',
  dest: config.path.js, // will resolve `public/js`

Handler js

Used for handling JS files.

In production, it also uglify and generates sourcemaps.

  handler: 'js',
  src: 'src/StoreLocatorBundle/Resources/public/storeLocatorUtils.js',
  concat: 'storeLocatorUtils.min.js',
  dest: config.path.js,

Handler css

Used for handling CSS files, it runs autoprefixer on them.

In production, it also runs CSSNano, uglify, and generates sourcemaps.

  handler: 'css',
  src: 'src/CoreBundle/Resources/private/css/legacy.css',
  concat: 'legacy.css',
  dest: config.path.css,

Handler file

Used for copying files:

  handler: 'file',
  src: 'src/CoreBundle/Resources/private/plugins/jQuery-Validation-Engine/**/*',
  dest: `${config.path.plugins}/jQuery-Validation-Engine`,

Handler image

Used for minifying images (png, jpeg, gif and svg) in production mode:

  handler: 'image',
  src: 'src/CoreBundle/Resources/private/img/*',
  dest: config.path.img,




npm i @yproximite/[email protected]





Unpacked Size

285 kB

Total Files


Last publish


  • avatar