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