@aoikarasu/distme

A utility package for building and distributing frontend projects. Not the best one, but at least mine.

The purpose of this tool is to concat and minify all styles and scripts into single-file bundles, and post process the index.html file to replace .css and .js file references with .min.css and .min.js. It uses clean-css and uglify-js to get the job done.

Contents

• Installation
• Usage
  • Command Line Interface
  • API Usage
• Configuration
• AOI
• License

Installation

npm install @aoikarasu/distme --save-dev

Usage

Command Line Interface

You can use the CLI commands to run the various build utilities:

# Concatenate and minify CSS files
distme css

# Concatenate and minify JavaScript files
distme js

# Run post-distribution tasks
distme pd

API Usage

You can also use the package programmatically in your Node.js scripts:

const { concatCss, concatJs, postDist } = require('@aoikarasu/distme');

// Concatenate CSS files with custom options
concatCss({
  srcDir: 'src/styles',
  destDir: 'dist/styles',
  outputFile: 'bundle.min.css'
});

// Concatenate JavaScript files with custom options
concatJs({
  files: [
    'src/js/vendor/jquery.js',
    'src/js/main.js',
    'src/js/app.js'
  ],
  destDir: 'dist/js',
  outputFile: 'bundle.min.js'
});

// Run post-distribution tasks
postDist({
  updateVersion: true,
  addTimestamp: true
});

Configuration

Each utility function accepts a configuration object with the following options:

concatCss Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | srcDir | string | 'src/css' | Source directory for CSS files | | destDir | string | 'dist/css' | Destination directory | | tempFile | string | 'styles.temp.css' | Temporary concatenated file name | | outputFile | string | 'styles.min.css' | Final minified file name | | files | Array | null | Specific files to concatenate (if not provided, will use all CSS files) |

concatJs Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | srcDir | string | 'src/js' | Source directory for JS files | | destDir | str_ing | 'dist/js' | Destination directory | | tempFile | string | 'main.temp.js' | Temporary concatenated file name | | outputFile | string | 'main.min.js' | Final minified file name | | files | Array | null | Specific files to concatenate (if not provided, will use all JS files) |

postDist Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | distDir | string | 'dist' | Distribution directory | | updateVersion | boolean | true | Whether to update version in HTML | | addTimestamp | boolean | true | Whether to add build timestamp |

AOI

Aoi (青い) means blue in japanese. In Japanese, 青 is used to describe blue things, such as 青い空 (blue sky)、青い海 (blue ocean). Aoi (青い) can also be translated to “fresh” or “newly grown”, such as vegetation which can have a blueish green color at times. It can also be referred to as an adjective to describe someone who is “inexperienced” or “fresh to the Industry.” However, keep in mind あおい isn’t loosely interchangeable with みどり. ^1

License

MIT © Aoi Karasu