ついにIEのサポートが終了したので、更新しました。
Web制作向けnpm-scripts 2
Web制作向けnpm-scripts

変更点

IE対応廃止(JSのバンドル、polyfili自動追加、トランスパイル)
webp対応(JPG、PNGもwebpに変換)
ESModule化

補足

node.js v18.7.0、npm 7.7.4で作成
avif対応は時期尚早のため見送り

ファイル構成

npm-scriptsの準備

terminal

 npm init -y
 
 npm i -D npm-run-all
 npm i -D chokidar-cli

ホットリロード

Browser-Sync

インストール

terminal

　npm i -D browser-sync

npmコマンド追加

package.json

"scripts": {
  "start:server": "browser-sync start -s dist -w src/*.html src/css/*.css src/js/*.js"
}

動作確認

terminal

npm run start:server

ブラウザが立ち上がれば成功です。
まだデータが無いのでエラーで問題ありません。
Ctrl+Cで終了します。

Pug

インストール

terminal

npm i -D github:pugjs/pug-cli#master

npmコマンド追加

package.json

"scripts": {
  "compile:pug": "pug src/pug/ --hierarchy -o dist/ -P",
  "watch:pug": "pug src/pug/ --hierarchy -o dist/ -w -P",
}

動作確認

/src/pug/配下にPugファイルを設置して、変換してみてください。
Pugの記法まとめ

terminal

//1回変換
npm run compile:pug

//Pugファイルの変更を監視して変換
npm run watch:pug

/src/pug/配下のPugファイルが/dist/配下にHTMLとして変換されれば成功です。

CSS

Sass(Dart-Sass)

SCSSファイルをCSSファイルに変換します。

インストール

terminal

npm i -D sass

autoprefixer

CSSのプロパティにベンダープレフィックスを付与します。

インストール]

terminal

npm i -D postcss-cli
npm i -D autoprefixer
npm i -D postcss

対象ブラウザの指定

設定例

.browserslistrc

defaults

設定は下記URLを参考に適宜変更してください。
browserslist

.browserslistrcで対象ブラウザを指定する

.browserslistrcに設定した対象ブラウザの確認

対象ブラウザの確認

terminal

npx browserslist

npmコマンド追加

pacjage.json

"scripts": {
  "compile:css2cssprefix": "postcss dist/css/style.css -u autoprefixer -o dist/css/style.css",
  "compile:scss2css": "sass src/scss/style.scss:dist/css/style.css --style=expanded --source-map-urls=relative",
  "compile:scss2cssprefix": "run-s compile:scss2css compile:css2cssprefix",
  "watch:scss2cssprefix": "chokidar \"src/scss/\" --command \"npm run compile:scss2cssprefix\" --initial", 
}

動作確認

/src/scss/配下にSCSSファイルを設置して、変換してみてください。

Sassの記法(SCSS構文)

terminal

//SCSSファイルをベンダープレフィックス付きでCSSに変換(1回)
npm run compile:scss2cssprefix

//SCSSファイルをベンダープレフィックス付きでCSSに変換(SCSSファイルを監視して変更される度)
npm run watch:scss2cssprefix

/src/scss/配下のSCSSファイルが/dist/css/配下にCSSファイルとして変換されれば成功です。

TypeScript

JavaScriptへの変換を行います。

インストール

terminal

npm i -D typescript

設定ファイルの準備

tsconfig.jsonを作成します。

terminal

tsc --init

tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "ESnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    "outDir": "./dist/js" /* Redirect output structure to the directory. */,
    "rootDir": "./src/ts"  /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

    /* Module Resolution Options */
    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    // "types": [],                                 /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
  "exclude": ["node_modules"]
}

動作確認

/src/ts/index.ts

import { importTest } from "./sub";

const message = "TypeScriptの変換成功";

console.log(message);
console.log(importTest);

/src/ts/sub.ts

export const importTest: string = "sub.tsからのimport成功";

terminal

//TypeScriptファイルをJavsScriptファイルに変換
npm run compile:ts

//TypeScriptファイルをJavsScriptファイルに変換(TypeScriptファイルを監視して変更される度)
npm run watch:ts

/src/ts/配下のTypeScriptファイルが/dist/js/配下にJavsScriptファイルとして変換されれば成功です。

画像圧縮

対応するファイル形式

jpg
png
webp
gif
svg
(jpgとpngはwebpに変換します)

インストール

terminal

npm i -D imagemin-cli
npm i -D imagemin-keep-folder
npm i -D imagemin-gifsicle
npm i -D imagemin-svgo
npm i -D imagemin-webp

npmコマンド追加

package.json

"scripts": {
 "watch:img": "chokidar \"src/img/**/*\" --command \"node imagemin.js\" --initial"
}

設定ファイル

imagemin.js

import keepfolder from "imagemin-keep-folder";
import gifsicle from "imagemin-gifsicle";
import svgo from "imagemin-svgo";
import webp from "imagemin-webp";
 
keepfolder(["src/img/**/*.{jpg,png,gif,svg,webp}"], {
  plugins: [
    gifsicle(),
    svgo(),
    webp({
      quality: 50,
    }),
  ],
  replaceOutputDir: (output) => {
    return output.replace(/img\//, "../dist/img/");
  },
});

package.json

//追加
"type": "module",

動作確認

/src/img/配下に画像を格納します。(jpg、png、gif、svg、webp)

terminal

npm run watch:img

/src/img/配下の画像が圧縮されて/dist/img/配下にコピーされれば成功です。

distディレクトリの削除

以前の作業で生成したファイルがdistに残っているとトラブルにつながる恐れがあるため、削除します。

インストール

terminal

npm i rimraf -D

npmコマンド追加

package.json

"scripts": {
 "delete:dist": "rimraf dist"
}

動作確認

terminal

npm run delete:dist

distディレクトリが削除されれば成功です。

ファイルのコピー

今回は、sitemap.xml、robots.txt、humans.txt、manifest.json、favicon.ico、apple-touch-icon.pngをコピーするようにします。
あまり変更が入らないファイルのコピーを想定しているので、-w オプションは付けません。

インストール

terminal

npm i -D cpx

npmコマンド追加

package.json

"scripts": {
  "copy:sitemapxml": "cpx \"src/sitemap.xml\" dist/",
  "copy:robotstxt": "cpx \"src/robots.txt\" dist/",
  "copy:humanstxt": "cpx \"src/humans.txt\" dist/",
  "copy:manifestjson": "cpx \"src/manifest.json\" dist/",
  "copy:faviconico": "cpx \"src/favicon.ico\" dist/",
  "copy:apple-touch-iconpng": "cpx \"src/apple-touch-icon.png\" dist/"
}

動作確認

terminal

 npm run copy:sitemapxml

/src/sitemap.xmlが/dist/sitemap.xmlにコピーされれば成功です。

タスクの連携

これまで作ってきたタスクを連携して、コマンド1つで実行できるようにします。

npmコマンドの追加

package.json

"scripts": {
  "prewatch:all": "run-s delete:dist copy:sitemapxml copy:robotstxt copy:humanstxt copy:manifestjson copy:faviconico copy:apple-touch-iconpng",
  "watch:all": "run-p watch:pug watch:scss2cssprefix watch:ts watch:img start:server"
}

動作確認

terminal

npm run watch:all

HTML、CSS、JavaScriptのコンパイルを並列処理しているので、表示が崩れている場合は完了タイミングが異なっているのが原因と思われますので、リロードしてみてください。

コード整形

prettier

インストール

terminal

npm i -D prettier

.prettierrc.json

{
  "semi": true,
  "trailingComma": "all",
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "proseWrap": "preserve",
  "endOfLine": "auto"
}

設定は下記URLを参考に適宜変更してください。

.prettierrc

stylelint

インストール

terminal

npm i -D stylelint
npm i -D stylelint-config-recommended-scss
npm i -D stylelint-config-prettier

npm i -D stylelint-scss
npm i -D stylelint-order
npm i -D stylelint-prettier

npmコマンド追加

package.json

"scripts": {
  "lint:scss": "stylelint \"**/*.scss\"",
  "format:scss": "stylelint --fix \"**/*.scss\""
}

設定ファイル

.stylelintrc.json

{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-prettier"
  ],
  "rules": {
    "prettier/prettier": true,
    "indentation": 2,
    "declaration-colon-newline-after": null,
    "value-list-comma-newline-after": "never-multi-line",
    "order/properties-alphabetical-order": true
  }
}

設定は下記URLを参考に適宜変更してください。
.stylelintrc

動作確認

terminal

//SCSSファイルのリント
npm run lint:scss

//SCSSファイルの整形
npm run format:scss

Eslint

インストール

terminal

npm i -D eslint
npm i -D @typescript-eslint/parser
npm i -D eslint-config-prettier

npmコマンド追加

package.json

"scripts": {
  "lint:ts": "eslint src/ts/**/*.ts",
  "format:ts": "eslint src/ts/**/*.ts --fix"
}

設定ファイル

envの設定値	内容
"browser": true	無いとdocumentやconsoleなどでエラーが出てしまう
"node":true	無いとwebpack.config.jsonのdirname、module、requireでエラーが出てしまう

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "parserOptions":  {
    "ecmaVersion": "latest",
    "sourceType":  "module"
  },
  "env": {
    "browser": true,
    "node": true
  },
  "root": true,
  "rules": {
    "quotes": ["error", "double"], //クォーテーションがシングルのときエラー
    "indent": ["error", 2]
  }
}

設定は下記URLを参考に適宜変更してください。
Configuring ESLint

動作確認

terminal

//TypeScriptファイルのリント
npm run lint:ts

//TypeScriptファイルの整形
npm run format:ts

SCSS、TypeScript一括整形

package.json

"scripts": {
"format:all":"run-p format:scss format:ts"
}

動作確認

terminal

//TypeScriptファイル、SCSSファイルの整形
npm run format:all

commit前にコード整形

インストール

terminal

npm i -D simple-git-hooks
npm i -D lint-staged

コマンド	内容
pre-commit	コミット前に実行
pre-push	プッシュ前に実行

package.json

"simple-git-hooks": {
  "pre-commit": "npx lint-staged"
},
 
"lint-staged": {
 "src/ts/*.ts": [
   "prettier --write",
   "eslint --fix --quiet"
 ],
 "src/scss/*.scss": [
   "prettier --write",
   "stylelint --fix --quiet"
 ]
}

pre-commit、pre-pushの有効化

terminal

npx simple-git-hooks
git/hooks/pre-commit、.git/hooks/pre-pushというファイルが作られます。
git commitを行うと、lint-stagedに指定したコマンドが実行されます。

テスト

Jestを使えるようにします。

インストール

terminal

npm i -D jest
npm i -D ts-jest
npm i -D @types/jest

npmコマンド追加

package.json

"scripts": {
  "test": "jest"
}

設定ファイル

jest.config.js

export default {
  roots: ["<rootDir>/src/ts/"],
  testMatch: ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
};

eslintrc.jsonの変更

Eslintでテストコードにエラーが出ないように、jestを追加

.eslintrc.json

"env": {
  "browser": true,
  "node":true,
  "jest": true
},

コードのサンプル

テスト用サンプルコード

src\ts\test_for_jest.ts

export const calc = (x: number, y: number) => {
  return x + y;
}

テストコード

src\ts__tests__\test_for_jest.spec.ts

import { calc } from "../test_for_jest";

describe("関数calcの動作確認", () => {
 it("3+4=7になる", () => {
   expect(calc(1, 8)).toBe(9);
 });
});

.spec.tsを変換しないようにtsconfigの設定変更

tsconfig.json

  "exclude": ["node_modules"]
  ↓
  "exclude": ["node_modules", "**/*.spec.ts"]

動作確認

terminal

npm run test

本番公開対応

/dist/配下のCSS、JavaScriptのminifyを行います。

インストール

terinal

npm i -D uglify-es
npm i -D clean-css-cli

npmコマンド追加

package.json

"scripts": {
  "min:css":"cleancss -o dist/css/style.css dist/css/style.css",
  "min:js": "uglifyjs dist/js/main.js -o dist/js/main.js",
  "prepare:all":"run-p min:js min:css"
}

動作確認

terminal

npm run prepare:all

/dist/配下のファイルをアップロードします

まとめ

使用時準備

termina;

git clone https://github.com/takeshisakuma/testament.git
cd testament
npm ci
npx simple-git-hooks

制作時

terminal

npm run watch:all

コード整形時

terminal

npm run format:all

テスト

terminal

npm run test

minify

terminal

npm run prepare:all

dist配下のファイルをそのままアップロードします