npm-scriptsで静的サイトの制作環境を構築 (2) package.jsonファイルの生成~npm-run-allのインストール

投稿日:

WindowsVisual Studio CodeYarnnpm-scriptsPugPostCSSBabelwebpackで静的サイトの制作環境を構築した際のメモ。

長くなったので、(1) コンパイラのインストール~.gitignoreファイルの生成(2) package.jsonファイルの生成~npm-run-allのインストール(3) 構文ハイライトのインストール~ファイル保存時に自動整形、の3つに分けました。

目次

package.jsonファイルの生成

npmプロジェクトの情報が格納されるpackage.jsonファイルを生成します。

yarn init --yes

Pugのインストール

Pugをインストール

HTMLのコーディングにはPugを使いたいので、pug - npmをインストールします。

yarn add pug --dev

pug-cliをインストール

pug-cliで_がついたファイル(_header.pug)やディレクトリ(_include)もコンパイルされてしまう問題を解決する - Qiitaを参考に、pug-cli - npmはインストールせずに、GitHub - pugjs/pug-cli: Pug's CLI interfaceをインストールします。

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

コマンド・エイリアスを定義

package.jsonのscriptsにcompile-pugというコマンド・エイリアスを設定します。

{
  "scripts": {
    "compile-pug": "pug --out dist --basedir src/pug --pretty src/pug"
  }
}

コマンド・オプションは--out distで出力フォルダを指定、--basedir src/pugで階層の基準フォルダを指定、--prettyで出力コードを整形、src/pugで入力フォルダを指定しました。

PostCSSのインストール

PostCSSをインストール

CSSのコーディングにはSassを使うのが一般的かと思いますが、Sassに拘りがある訳ではないので、お目当てのAutoprefixerに必要なPostCSSだけで済ませることにし、postcss - npmをインストールします。

yarn add postcss --dev

PostCSS CLIをインストール

postcss-cli - npmをインストールします。

yarn add postcss-cli --dev

postcss-importをインストール

別ファイルの読み込みにpostcss-import - npmをインストールします。

yarn add postcss-import --dev

PostCSS Custom Propertiesをインストール

変数の定義にpostcss-custom-properties - npmをインストールします。

yarn add postcss-custom-properties --dev

PostCSS Nestingをインストール

入れ子記法にpostcss-nesting - npmをインストールします。

yarn add postcss-nesting --dev

Autoprefixerをインストール

ベンダープリフィックスの自動付与にautoprefixer - npmをインストールします。

yarn add autoprefixer --dev

postcss-cssoをインストール

CSSの圧縮はcss-minification-benchmark resultsを参考にCSSOに決め、postcss-csso - npmをインストールします。

yarn add postcss-csso --dev

PostCSSの設定ファイルを作成

プロジェクト・ルートにpostcss.config.jsファイルを作成します。

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

map: { inline: false }でソース・マップを埋め込みから外部ファイルへ変更、plugins: { }にプラグインを適用する順に記述、autoprefixer: { cascade: false, grid: true }で出力コードの整形を抑止、CSS GridのIE 11対応を設定しました。

対象ブラウザの設定ファイルを作成

プロジェクト・ルートに.browserslistrcファイルを作成します。

# Browsers that we support

> 0.5% in JP
Firefox ESR

> 0.5% in JPで日本国内のシェアが0.5%より多く、Firefox ESRでFirefox 延長サポート版を設定しました。

コマンド・エイリアスを定義

package.jsonのscriptsにcompile-pcssというコマンド・エイリアスを設定します。

{
  "scripts": {
    "compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css"
  }
}

コマンド・オプションはsrc/pcss/style.pcssで入力ファイルを指定、--mapでソース・マップを作成、--output dist/css/style.min.cssで出力ファイルを指定しました。

Babelのインストール

@babel/coreをインストール

JavaScriptのトランスパイルにはBabelを使いたいので、@babel/core - npmをインストールします。

yarn add @babel/core --dev

@babel/preset-envをインストール

@babel/preset-env - npmをインストールします。

yarn add @babel/preset-env --dev

@babel/plugin-transform-runtimeをインストール

@babel/plugin-transform-runtime - npmをインストールします。

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

Babelの設定ファイルを作成

プロジェクト・ルートにbabel.config.jsファイルを作成します。

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,
  };
};

対象ブラウザはPostCSSで設定した.browserslistrcファイルを参照させるのでtargets: { }では指定せず、ポリフィルは@babel/plugin-transform-runtimeに任せました。

webpackのインストール

webpackをインストール

JavaScriptのビルドにはwebpackを使いたいので、webpack - npmをインストールします。

yarn add webpack --dev

webpack CLIをインストール

webpack-cli - npmをインストールします。

yarn add webpack-cli --dev

Babel Loaderをインストール

babel-loader - npmをインストールします。

yarn add babel-loader --dev

webpackの設定ファイルを作成

プロジェクト・ルートにwebpack.config.jsファイルを作成します。

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.
};

mode: 'production'で出力ファイルを最適化、entry: './src/js/script'で入力ファイルを指定、output: { }で出力ファイルを指定、loader: 'babel-loader'でBabelを使用、devtool: 'source-map'でソース・マップ作成を設定しました。

コマンド・エイリアスを定義

package.jsonのscriptsにcompile-jsというコマンド・エイリアスを設定します。

{
  "scripts": {
    "compile-js": "webpack"
  }
}

コマンド・オプションはwebpack.config.jsファイルで設定したのでありません。

ファイルの変更を監視するスクリプトの作成

Chokidarをインストール

pug-cli、postcss-cli、webpack-cliの何れにもファイルの変更を監視するコマンド・オプションがありますが、監視の開始時に対象ファイルの全てに対してコンパイルやビルドを行ってしまうのが嫌なので、chokidar - npmをインストールします。

yarn add chokidar --dev

Chokidar CLIをインストール

chokidar-cli - npmをインストールします。

yarn add chokidar-cli --dev

mkdirpをインストール

pug-cli、postcss-cli、webpack-cliの何れも再帰的にディレクトリの作成を行ってくれるようですが、作成してくれない物に変更した場合に備えてmkdirp - npmをインストールします。

yarn add mkdirp --dev

node-notifierをインストール

エラーの発生時にデスクトップ通知を表示したいので、node-notifier - npmをインストールします。

yarn add node-notifier --dev

スクリプト・ファイルを作成

プロジェクト・ルートに変更を検出したファイルのコンパイルやビルドを行うcompile.jsファイルを作成します。

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

// モジュールを読み込む
const cpexec = require('child_process').exec; // コマンド実行
const mkdirp = require('mkdirp'); // ディレクトリ作成
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.`;
}

// 出力先のディレクトリを作成
mkdirp(outPath, (err) => {
  // エラー処理
  if (err) {
    // デスクトップ通知を表示
    notifier.notify({
      title: 'An error has occured',
      message: 'Check the terminal for more information',
    });
    // コンソールにエラー・ログを表示
    console.log(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);
      }
    });
  }
});

複数ファイルの同時変更は想定していないので、エディタで [すべて保存] はしないことにします。

コマンド・エイリアスを定義

package.jsonのscriptsにwatch-compileというコマンド・エイリアスを設定します。

{
  "scripts": {
    "watch-compile": "chokidar src/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pug --ignore src/**/_*.* --command \"node compile.js {path}\""
  }
}

コマンド・オプションはsrc/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pugで監視するファイルを指定、--ignore src/**/_*.*で除外するファイルを指定、--command \"node compile.js {path}\"で実行するコマンドを指定しました。

Browsersyncのインストール

Browsersyncをインストール

静的サイトのブラウザでの確認にはwebpack-dev-serverよりBrowsersyncの方が向いていると思うので、browser-sync - npmをインストールします。

yarn add browser-sync --dev

Browsersyncの設定ファイルを生成

プロジェクト・ルートにbs-config.jsファイルを生成します。

yarn run browser-sync init

生成したbs-config.jsファイルを編集します。

/*
 |--------------------------------------------------------------------------
 | Browser-sync config file
 |--------------------------------------------------------------------------
 |
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 |
 | There are more options than you see here, these are just the ones that are
 | set internally. See the website for more info.
 |
 |
 */
module.exports = {
  ui: {
    port: 3001,
  },
  // files: false,
  files: ['dist/**/*.html', 'dist/css/**/*.css', 'dist/js/**/*.js'],
  watchEvents: ['change'],
  watch: false,
  ignore: [],
  single: false,
  watchOptions: {
    ignoreInitial: true,
  },
  // server: false,
  server: {
    baseDir: 'dist',
    directory: true,
  },
  proxy: false,
  port: 3000,
  middleware: false,
  serveStatic: [],
  ghostMode: {
    clicks: true,
    scroll: true,
    location: true,
    forms: {
      submit: true,
      inputs: true,
      toggles: true,
    },
  },
  logLevel: 'info',
  logPrefix: 'Browsersync',
  logConnections: false,
  logFileChanges: true,
  logSnippet: true,
  rewriteRules: [],
  open: 'local',
  browser: 'default',
  cors: false,
  xip: false,
  hostnameSuffix: false,
  reloadOnRestart: false,
  notify: true,
  scrollProportionally: true,
  scrollThrottle: 0,
  scrollRestoreTechnique: 'window.name',
  scrollElements: [],
  scrollElementMapping: [],
  reloadDelay: 0,
  reloadDebounce: 500,
  reloadThrottle: 0,
  plugins: [],
  injectChanges: true,
  startPath: null,
  minify: true,
  host: null,
  localOnly: false,
  codeSync: true,
  timestamps: true,
  clientEvents: [
    'scroll',
    'scroll:element',
    'input:text',
    'input:toggles',
    'form:submit',
    'form:reset',
    'click',
  ],
  socket: {
    socketIoOptions: {
      log: false,
    },
    socketIoClientConfig: {
      reconnectionAttempts: 50,
    },
    path: '/browser-sync/socket.io',
    clientPath: '/browser-sync',
    namespace: '/browser-sync',
    clients: {
      heartbeatTimeout: 5000,
    },
  },
  tagNames: {
    less: 'link',
    scss: 'link',
    css: 'link',
    jpg: 'img',
    jpeg: 'img',
    png: 'img',
    svg: 'img',
    gif: 'img',
    js: 'script',
  },
  injectNotification: false,
};

files: ['dist/**/*.html', 'dist/css/**/*.css', 'dist/js/**/*.js']で監視するファイルを指定、server: { baseDir: 'dist', directory: true }でルート・ディレクトリを指定、ディレクトリ・リスティングを有効にしました。

コマンド・エイリアスを定義

package.jsonのscriptsにwatch-serverというコマンド・エイリアスを設定します。

{
  "scripts": {
    "watch-server": "browser-sync start --config bs-config.js"
  }
}

コマンド・オプションはstartでBrowsersyncを開始、--config bs-config.jsで設定ファイルを指定しました。

npm-run-allのインストール

npm-run-allをインストール

複数のnpm-scriptsを実行するnpm-run-all - npmをインストールします。

yarn add npm-run-all --dev

コマンド・エイリアスを定義

package.jsonのscriptsにstartというコマンド・エイリアスを設定します。

{
  "scripts": {
    "start": "npm-run-all --parallel watch-*"
  }
}

コマンド・オプションは--parallel watch-*でwatch-compileとwatch-serverの並列実行を指定しました。

The following two tabs change content below.

isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。今どきのフロントエンドエンジニアより昔ながらのコーダーの方が近いと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です