yProx-cli

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

Requirements

Node.js > 8
Yarn

Usage

$ yarn add @yproximite/yprox-cli

Available commands

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

yprox-cli build [--mode=development] [--lint] [--watch] [--filter:...]

$ yarn yprox-cli build
$ yarn yprox-cli build --mode production
$ yarn yprox-cli build --filter:handler rollup # will handle only assets handled by rollup 
 
# Build, then watch and build 
$ yarn yprox-cli build --watch
$ yarn yprox-cli build --mode production --watch
 
# Lint before build 
$ yarn yprox-cli build --lint

yprox-cli lint [--fix] [--filter:...]

$ yarn yprox-cli lint
$ yarn yprox-cli lint --fix
$ yarn yprox-cli lint --filter:handler sass # will lint only 'sass' entries 
$ yarn yprox-cli lint --filter:handler sass --fix # will lint and fix only 'sass' entries

Filtering

For each commands, you can specify multiple arguments --filter:X Y, where:

X is the name of an entry's property (see Assets entries)
Y is one of the possible value of X

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

Configuration

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,
        },
      ],
    },
    rollup: {
      shims: {},
      // https://github.com/rollup/rollup-plugin-node-resolve
      nodeResolve: {}, 
      // https://github.com/rollup/rollup-plugin-commonjs
      commonjs: {}, 
      vue: {},
      buble: {},
      // https://github.com/TrySound/rollup-plugin-string#usage
      string: false, // `false` means that we actually disable the plugin
      // https://github.com/rollup/rollup-plugin-json#usage
      json: {}, 
    },
    https://github.com/sass/node-sass#options
    sass: {} 
  },
}

Common arguments

passing -v enable verbose mode
passing --mode will specify mode
passing --filter:X Y will filter entries where X === Y (or X includes Y if X is an array)

Assets/Entries

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:

rollup
webpack
js
css
file
image

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 `webpack`

Equivalent to rollup handler, but it uses webpack under the hood. The configuration is a bit different. Everything under config key is passed to webpack.

It does:

Configure webpack's mode with yprox-cli's mode (development and production)
Suppor code-splitting with dynamic import() and named chunks
Handle .js files with bublé
Handle .vue files with vue-loader, and extract CSS with mini-css-extract-plugin in production
Handle .css files css-loader and postcss-loader (with Autoprefixer and cssnano enabled)
Handle .sass and .scss files with sass-loader

{
  handler: 'webpack',
  // The following config is passed to webpack
  config: {
    entry: {
      'core-app-front': './src/CoreBundle/Resources/private/js/app',
      'core-app-admin': './src/Admin/CoreBundle/Resources/private/js/app',
      'yprox-store-locator': './src/StoreLocatorBundle/Resources/private/js/yprox-store-locator',
    },
    output: {
      path: config.path.js,
    }
  }
}

In order to be more performant, it is highly recommended to only have one entry handled by webpack (with multiple entries inside).

Run yprox-cli build -v to print webpack final configuration.

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 `sass`

The same behavior for css handler.

It supports .sass and .scss files.

{
  handler: 'sass',
  src: 'src/CoreBundle/Resources/private/sass/grid.scss',
  concat: 'my-grid.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,
}

Development workflow

You need to install some dependencies first:

$ yarn

Contribution

Make a pull request, its title should follows Angular commit message convention
You should Squash and Merge your pull request

Publishing a new release

This is automatically done by Travis and semantic-release when you merge a pull request.

npm

@yproximite/yprox-cli

yProx-cli

Requirements

Usage

Available commands

yprox-cli build [--mode=development] [--lint] [--watch] [--filter:...]

yprox-cli lint [--fix] [--filter:...]

Filtering

Production mode

Configuration

Common arguments

Assets/Entries

Handler `rollup`

Handler `webpack`

Handler `js`

Handler `css`

Handler `sass`

Handler `file`

Handler `image`

Development workflow

Contribution

Publishing a new release

Keywords

Install

Version

License

Unpacked Size

Total Files

Homepage

Repository

Last publish

Collaborators

@yproximite/yprox-cli

yProx-cli

Requirements

Usage

Available commands

yprox-cli build [--mode=development] [--lint] [--watch] [--filter:...]

yprox-cli lint [--fix] [--filter:...]

Filtering

Production mode

Configuration

Common arguments

Assets/Entries

Handler rollup

Handler webpack

Handler js

Handler css

Handler sass

Handler file

Handler image

Development workflow

Contribution

Publishing a new release

Keywords

Install

Version

License

Unpacked Size

Total Files

Homepage

Repository

Last publish

Collaborators

Handler `rollup`

Handler `webpack`

Handler `js`

Handler `css`

Handler `sass`

Handler `file`

Handler `image`