Build Tools

To customize Mobi.css, you need to be familiar with some tools.

npm

npm is the node package manager.

We use npm to install, run scripts, manage versions.

Once cloned Mobi.css main repository or plugin/theme repos, the package.json descripts some avalible scripts.

The basic scripts are npm install, npm start and npm test:

npm install     # Install the dependencies
npm start       # Build css, js and docs. Serve public. Watch changes
npm test        # Run lint and tests

Other useful scripts:

npm run build   # Build css, js and docs
npm run lint    # Lint styles and scripts
npm version patch/minor/major
                # Update the version. This will run preversion and version scripts
npm publish     # Publish the current version

gulp

gulp is a task runner for development.

Actually npm start and npm build are simply run gulp tasks.

PostCSS

PostCSS is a tool for transforming styles with JS plugins. Here are some useful PostCSS plugins:

• postcss-import: transform @import rules by inlining content.
• cssnext: use tomorrow’s CSS syntax, today.
• Autoprefixer: add vendor prefixes to CSS rules
• postcss-pxtorem: convert pixel units to rem (root em) units using PostCSS
• cssnano: a modern CSS compressor
• stylefmt: a tool that automatically formats CSS according to stylelint rules.

stylelint

Stylelint is a mighty, modern CSS linter.

Pagic

Pagic is a static site generator, most of Mobi.css docs are generated by it.

Lerna

Because Mobi.css is made of plugins, we use Lerna to manage mulitple packages.

mobi-util-build-css

The build css util for Mobi.css

It combines gulp, PostCSS, sourcemap and so on.

Getting Started

Installation

npm install --save-dev mobi-util-build-css

Usage

const { clean, buildCSS } = require('mobi-util-build-css');

// This will remove `dist` directory
clean('dist');

// This will compile `src/css/file.css` to `dist/css/file.css` and `dist/css/file.css.map`
buildCSS({
    src: 'src/css/file.css',
    dist: 'dist/css/file.css',
    // When enableCompress is true, your css will be compressed. Default to false
    enableCompress: false,
    // When enablePxtorem is true, your px will be transformed to rem based on 16px. Default to false
    enablePxtorem: false,
    // When prependContent is set, your css will be prepended the content. Please notice that only comments start with /*! will not be removed during compress
    prependContent: '/*! The meta message */\n',
    callback: () => { console.log('Build done') }
});