npm-scripts で静的サイトの制作環境を構築 (2)

yarn init --yes

yarn add pug --dev

yarn add github:pugjs/pug-cli#master --dev

yarn add postcss --dev

yarn add postcss-cli --dev

yarn add postcss-import --dev

yarn add postcss-custom-properties --dev

yarn add postcss-nesting --dev

yarn add autoprefixer --dev

yarn add postcss-csso --dev

module.exports = {
  map: {
    inline: false,
  },
  plugins: {
    "postcss-import": {},
    "postcss-custom-properties": {},
    "postcss-nesting": {},
    autoprefixer: {
      cascade: false,
      grid: true,
    },
    "postcss-csso": {},
  },
};

# Browsers that we support

> 0.5% in JP
Firefox ESR

yarn add @babel/core --dev

yarn add @babel/preset-env --dev

yarn add @babel/plugin-transform-runtime --dev

module.exports = (api) => {
  const presets = [
    [
      "@babel/preset-env",
      {
        useBuiltIns: false,
      },
    ],
  ];
  const plugins = [
    [
      "@babel/plugin-transform-runtime",
      {
        corejs: false,
        helpers: true,
        regenerator: true,
        useESModules: false,
      },
    ],
  ];

  api.cache(true);

  return {
    presets,
    plugins,
  };
};

yarn add webpack --dev

yarn add webpack-cli --dev

yarn add babel-loader --dev

const path = require("path");

module.exports = {
  mode: "production", // 'production' | 'development' | 'none'
  // Chosen mode tells webpack to use its built-in optimizations accordingly.
  entry: "./src/js/script", // string | object | array
  // defaults to './src'
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results
    path: path.resolve(__dirname, "dist/js"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    filename: "script.min.js", // string
    // the filename template for entry chunks
  },
  module: {
    // configuration regarding modules
    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.js?$/,
        loader: "babel-loader",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
        options: {
          presets: ["@babel/preset-env"],
        },
        // options for the loader
      },
    ],
  },
  devtool: "source-map", // enum
  // enhance debugging by adding meta info for the browser devtools
  // source-map most detailed at the expense of build speed.
};

yarn add chokidar --dev

yarn add chokidar-cli --dev

yarn add node-notifier --dev

/* eslint-disable import/no-extraneous-dependencies, no-console */

// モジュールを読み込む
const cpexec = require("child_process").exec; // コマンド実行
const fsmkdir = require("fs").mkdir; // ディレクトリ作成
const notifier = require("node-notifier"); // デスクトップ通知
const path = require("path"); // パス文字列操作

// 拡張子ごとに入力元の基準ディレクトリを設定
const baseDir = {
  ".js": "src/js",
  ".pcss": "src/pcss",
  ".pug": "src/pug",
};

// 拡張子ごとに出力先の基準ディレクトリを設定
const outDir = {
  ".js": "dist/js",
  ".pcss": "dist/css",
  ".pug": "dist",
};

// 引数からパスを取得
const srcPath = path.normalize(process.argv[2]);

// パスから拡張子を取得
const extStr = path.extname(srcPath);

// 出力先のディレクトリ・パスを生成
const outPath = path.join(
  outDir[extStr],
  path.relative(baseDir[extStr], path.dirname(srcPath)),
);

// コンパイル・コマンドを生成
let cmdStr = "";

switch (extStr) {
  // 拡張子.js用コンパイル・コマンド
  case ".js":
    // Usage: webpack [options]
    cmdStr = "webpack";
    break;

  // 拡張子.pcss用コンパイル・コマンド
  case ".pcss":
    // Usage: postcss [input.css] [options] [-o|--output output.css]
    cmdStr =
      "postcss src/pcss/style.pcss --map --output dist/css/style.min.css";
    break;

  // 拡張子.pug用コンパイル・コマンド
  case ".pug":
    // Usage: pug [options] [dir|file ...]
    cmdStr = `pug --out ${outPath} --basedir ${baseDir[extStr]} --pretty ${srcPath}`;
    break;

  // 登録外拡張子用メッセージ
  default:
    cmdStr = `echo Command for "${extStr}" is not registered.`;
}

// 出力先のディレクトリを作成（Node.js v10.12 以降）
fsmkdir(outPath, { recursive: true }, (err) => {
  // エラー処理
  if (err) {
    throw err;
  } else {
    // コンパイル・コマンドを実行
    cpexec(cmdStr, (error, stdout) => {
      // エラー処理
      if (error) {
        // デスクトップ通知を表示
        notifier.notify({
          title: "An error has occured",
          message: "Check the terminal for more information",
        });
        // コンソールにエラー・ログを表示
        console.log(error);
      } else {
        // コンソールにログを表示
        console.log(stdout);
      }
    });
  }
});

yarn add browser-sync --dev

yarn run browser-sync init

yarn add npm-run-all --dev