sitetool

TODO: english translation

sitetool.config.js

module.exports = {
  // ディレクトリ設定
  directory: {
    src: 'src', // ソースファイルディレクトリの相対パス
    work: 'work', // 作業中の生成ファイルを格納＋ローカルサーバで扱うディレクトリの相対パス
    dist: 'dist' // 最終出力ディレクトリの相対パス
  },
  // ルール
  // 上から順にファイル名を正規表現で判定
  // パターンにマッチしたらそのルールを使用
  // 無視パターンにマッチしたら何もしない
  // どちらにもマッチしなければ次のルール
  rule: [
    {
      name: 'my rule', // ルール名
      pattern: [/\.html$/], // マッチするパターン
      ignore: [/^_/], // 無視するパターン
      extname: '.html', // 出力時の拡張子（変更なければ省略可）
      func: {
        // 使用する変換関数
        work: ['file-preprocess'], // 作業中の変換関数
        dist: ['file-preprocess', 'html-format'] // 最終出力の変換関数
      }
    },
    {
      pattern: /\.foo$/, // パターンが一つしかなければ配列でなくてもよい
      func: ['file-gzip'] // 作業中と最終出力で変わりなければこれでも可
    },
    {
      pattern: /\.bar$/, // パターンが一つしかなければ配列でなくてもよい
      func: 'file-gzip' // 文字列のみでも可
    }
  ],
  // オプション
  {
    'css-postcss': {
      autoprefixer: {}, // autoprefixerのオプション（browsesなどを想定）
      development: { // 作業中のみ使用するオプション
        autoprefixer: {},
      },
      production: { // 最終出力のみ使用するオプション
        autoprefixer: {},
      }
    },
    'file-preprocess': {
      foo: 'FOO', // {{NAME}} で表示する値
    },
    server: {
      port: 3000, // ローカルサーバのTCPポート番号
      // その他 BrowserSyncのオプションを使用可能
    }
  }
};

default config

module.exports = {
  directory: {
    src: '<ROOT>/src',
    work: '<ROOT>/work',
    dist: '<ROOT>/dist'
  },
  rule: [],
  option: {
    'css-postcss': {
      autoprefixer: {
        browsers: ['> 5%', 'not dead']
      }
    },
    server: {
      port: 3000
    }
  }
};

変換関数

css-postcss

以下を決め打ちで実行

• css-mqpacker
• postcss-sorting
• autoprefixer
• beautify オプション有効時のみ: prettier
• minify オプション有効時のみ: cssnano

beautify と minifiy が同時指定された場合は beautify を有線

file-gzip

ファイルを GZip 圧縮

file-preprocess

プリプロセス処理を実行

| 構文 | 役割 | | --------------------- | ------------------------- | | {{NAME}} | 変数 NAME 内容を展開 | | {{:: "NAME" "VALUE"}} | 変数 NAME に VALUE を設定 | | {{-- "PATH"}} | PATH のファイルを挿入 |

以下の変数が定義済み

• __relativeRoot__: 当該ファイルからルートディレクトリまでの相対パス
• __srcDir__: ソースディレクトリの絶対パス

html-format

prettier による整形

image-minify

画像の最適化

js-format

• beautify オプション有効時のみ: prettier による最適化 と 行コメント削除
• minify オプション有効時のみ: uglify-js による minify

sass-compile

node-sass によるコンパイル