@superflycss/cli
SuperflyCSS Command Line Interface
Last updated a year ago by ole.ersoy .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @superflycss/cli -g
SYNC missed versions from official npm registry.

SuperflyCSS Commandline Interface

CLI for SuperflyCSS Projects. The CLI enables the running of superflycss build, test, and serve/watch tasks. The CLI uses the pli - project layout instance for project layout. See the Build PostCSS Plugins list for a list of plugins currently supported.

Installation

npm i -g @superflycss/cli

Usage

Blog Articles

New Project Types

The sfc new command supports five different options for project type. They are c for component, u for utility, p for prototype, e for empty, and a for application.

So for example when generating a new component project, use sfc new -t c. Prototype is the default, so when creating a prototype project just use sfc new projectname.

Supported Commands

Type sfc -h to see supported commands. The output will look like this:

  Usage: sfc [options] [command]

  SuperflyCSS Command Line Interface

  Options:

    -V, --version        output the version number
    -t, --type [type]    
    -h, --help           output usage information

  Commands:

    new|n <name>                 Create a new project
    clean|c                      Clean the build (Removes target folder)
    build:main:css|bmc           Build main css)
    build:test:css|btc           Build test CSS
    build:test:html|bth          Build test HTML
    build:main:filtered:css|bmfc Build main filtered CSS
    build:test:filtered:css|btfc Build test filtered CSS
    build:main:minified:css|bmmc Build main filtered CSS
    build:test:minified:css|btmc Build test filtered CSS
    build|b              Build main css, test css, and test html
    dist|d               Prepare dist directory for publishing to NPM
    serve|s              Compile and serve main and test css and test html

The sfc serve command watches and builds the project while also serving the projects html files with live reload courtesy of browser-sync.

Specifically it build src/test/css/**/*.css files and the results are saved to serve/css. The src/test/html/**/*.html files are build and save to the serve directory.

Place main css files in src/main/css and test css files (The CSS used in the test html file) in src/test/css. Built main css files are saved in target/main/css and test css files are saved to target/test/css. Use test case files in src/test/html/ to test the CSS being built. Run sfc test:css to compile the test html files.

Filtering

Filter CSS selectors against target/main/html or target/test/html using postcss-uncss.

  • Run sfc bmfc to filter target/main/css files again target/main/html content.
  • Run sfc btfc to filter target/test/css files again target/test/html content.

The files produced will have a .filtered.css extension.

Minification

Minification is performed with cssnano and mqpackger. Uncss is used when html is present to run against.

  • Run sfc bmmc to minify src/main/css files.
  • Run sfc btmc to minify src/test/css files.

The files produced will have a .min.css extension.

PostCSS Plugins Used by the CSS Build Commands

The following plugins are invoked when the tasks build:main:css and build:test:css are invoked.

Plugin Name Plugin URL
autoprefixer https://github.com/postcss/autoprefixer
postcss-import https://github.com/postcss/postcss-import
postcss-apply https://github.com/pascalduez/postcss-apply
postcss-calc https://github.com/postcss/postcss-calc
postcss-color-function https://github.com/postcss/postcss-color-function
postcss-custom-media https://github.com/postcss/postcss-custom-media
postcss-css-variables https://github.com/MadLittleMods/postcss-css-variables
postcss-each https://github.com/outpunk/postcss-each
postcss-font-magician https://github.com/jonathantneal/postcss-font-magician
postcss-for https://github.com/antyakushev/postcss-for
postcss-reporter https://github.com/postcss/postcss-reporter
postcss-sass-color-functions https://github.com/adam-h/postcss-sass-color-functions

Filtering is performed by the postcss-uncss plugin and minification is performed using css-mqpacker and cssnano.

Test CSS Command

The sfc test:css command supports the visual testing of superflycss components and utilities by building the src/test/html/**/*.html content. It has the following features:

For sample tests using nunjucks templates to keep the content DRY see component-test.

Current Tags

  • 4.1.21                                ...           latest (a year ago)

62 Versions

  • 4.1.21                                ...           a year ago
  • 4.1.20                                ...           a year ago
  • 4.1.19                                ...           a year ago
  • 4.1.18                                ...           a year ago
  • 4.1.17                                ...           a year ago
  • 4.1.16                                ...           a year ago
  • 4.1.15                                ...           a year ago
  • 4.1.14                                ...           a year ago
  • 4.1.13                                ...           a year ago
  • 4.1.12                                ...           a year ago
  • 4.1.11                                ...           a year ago
  • 4.1.10                                ...           a year ago
  • 4.1.8                                ...           2 years ago
  • 4.1.7                                ...           2 years ago
  • 4.1.6                                ...           2 years ago
  • 4.1.5                                ...           2 years ago
  • 4.1.4                                ...           2 years ago
  • 4.1.3                                ...           2 years ago
  • 4.1.2                                ...           2 years ago
  • 4.1.1                                ...           2 years ago
  • 4.1.0                                ...           2 years ago
  • 4.0.0                                ...           2 years ago
  • 3.0.3                                ...           2 years ago
  • 3.0.2                                ...           2 years ago
  • 3.0.1                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.5.4                                ...           2 years ago
  • 2.5.3                                ...           2 years ago
  • 2.5.2                                ...           2 years ago
  • 2.5.1                                ...           2 years ago
  • 2.5.0                                ...           2 years ago
  • 2.4.0                                ...           2 years ago
  • 2.3.3                                ...           2 years ago
  • 2.3.2                                ...           2 years ago
  • 2.3.1                                ...           2 years ago
  • 2.3.0                                ...           2 years ago
  • 2.2.1                                ...           2 years ago
  • 2.2.0                                ...           2 years ago
  • 2.1.6                                ...           2 years ago
  • 2.1.5                                ...           2 years ago
  • 2.1.4                                ...           2 years ago
  • 2.1.3                                ...           2 years ago
  • 2.1.2                                ...           2 years ago
  • 2.1.1                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.9.1                                ...           2 years ago
  • 1.9.0                                ...           2 years ago
  • 1.8.3                                ...           2 years ago
  • 1.8.1                                ...           2 years ago
  • 1.8.0                                ...           2 years ago
  • 1.6.1                                ...           2 years ago
  • 1.6.0                                ...           2 years ago
  • 1.5.0                                ...           2 years ago
  • 1.4.0                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 0
Last Month 1
Dependencies (36)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |