yProx-cli
A tools for linting and building assets from yProx CMS. See this PR for additional details.
Requirements
- Be inside an Yprox application 🤷♂
- Node.js > 8
- Yarn
Usage
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-cliAvailable 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 --watchyprox-cli lint [--fix]
$ yarn yprox-cli lint$ yarn yprox-cli lint --fixProduction 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 moduleexports = // 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 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 // array of entries;Each entries can be handled by:
browserifyrollupjscssfileimage
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: configpathjs // 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: configpathjs // 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: configpathjsHandler 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: configpathcssHandler file
Used for copying files:
handler: 'file' src: 'src/CoreBundle/Resources/private/plugins/jQuery-Validation-Engine/**/*' dest: `/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: configpathimg