web

タスクランナーにgulpではなくnpm scriptsを使う

公開日:2021年11月20日
最終更新日:2021年11月21日

npm scriptsで開発環境する手順です

やってみること

最低限で以下をやってみます。

  • htmlをdistへコピー（ejsやpugは使わないです）
  • SassをCSSへコンパイルしdistへ
  • BabelでJSをトランスパイルしてdistへ
  • browser-syncでブラウザを立ち上げる
  • 各ファイルの更新を監視


ディレクトリ

こんな感じになります。

├── babel.config.json
├── dist
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── index.js
├── package.json
├── src
│   ├── html
│   │   └── index.html
│   ├── js
│   │   └── index.js
│   └── sass
│       ├── base.scss
│       └── style.scss
└── yarn.lock

npm-run-all

まず、npm-run-allというモジュールをインストールしておき、タスクをまとめて実行できるようにしておきます。

yarn add npm-run-all -D

html

htmlはejsやpugを使わずにそのままdistへコピーします。 コピーするには cpx というモジュールを使います。Macだと cp コマンドでもいいのですが、Windowsでは copy というコマンドらしく異なるため、どちらの環境でも動作するようにしてみます。

cpx

yarn add cpx -D


ファイル作成

適当にhtmlのファイルを作ります。ディレクトリは冒頭の構成を参考にしてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script type="text/javascript" src="./js/index.js"></script>
  </head>
  <body>
    <h1>タイトル</h1>
    <section>
      <h2>セクションタイトル</h2>
    </section>
  </body>
</html>

package.json

以下をscriptsに追加します。最初にインストールした npm-run-all を使い html:* このような指定をすることで html: がついた処理をまとめて行います。htmlに関してはタスクが一つですが、後述のタスクで役に立ちます。

"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
},

以下のコマンドを打つとhtmlをコピーしてくれます

yarn run html


CSS

SassをCSSにコンパイルします。 ほぼ必須といってもいい autoprefixer でプレフィックスも付くようにします。

modules

yarn add sass postcss postcss-cli autoprefixer -D

postcss は autoprefixer を使うためですが、ブログによっては postcss-cli だけしか使っていない記事もあります。その記事が間違っているわけではなくて、postcss-cli のバージョンによるみたいです。詳しくは以下を参考にしてください。今回はv8系を使ってるので postcss も入れています。
postcss-cliをインストールすると Cannot find module postcss とエラーが出てしまう - RX100で撮り歩くブログ

ファイル作成

Sassのファイルを作ります（中身は本当に適当です）。ディレクトリは冒頭の構成を参考にしてください。

body {
  background-color: #fff;
}

h1 {
  font-size: 48px;
  user-select: none;

  span {
    color: blue;
  }
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

package.json

CSSに関するタスクを追加します。browserslistも追加します。どのブラウザに対応したいかは書き方を調べてみてください。package.jsonに追記するのではなく、.browserslistrc というファイルを作成して書いてもいいです。

"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
},
"browserslist": [
  ">0.25% in JP",
  "not ie <= 10",
  "not op_mini all"
],

以下のコマンドを打つと css: で始まるタスクを実行してくれます

yarn run css

JavaScript

BabelでJavaScriptをトランスパイルします。もうサポート終了予定の発表がされましたが、一応IE11対応してみます。この辺りの設定は必要に応じて変えてみてください。 uglify-js で圧縮もします

modules

yarn add @babel/cli @babel/core @babel/preset-env uglify-js -D

ファイル作成

JavaScript

const test = () => {
  console.log("test2");
};

test();

babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

package.json

JavaScriptのタスクを追加します。 yarn run js で動くはずです

"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
},

browser-syncでブラウザ立ち上げ、ファイルの更新を監視

それぞれのタスクを登録できたので、browser-syncでブラウザを立ち上げて、ファイルを変更したら自動的にブラウザに反映するようにします。ここまでできたら最低限のコーディング作業はできますよね

modules

browser-syncと監視用のwatchを入れます。

yarn add browser-sync watch -D


package.json

watchとbrowser-syncのタスクを追加します。

"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
  "watch:html": "watch 'npm run html' ./src/html",
  "watch:css": "watch 'npm run css' ./src/sass",
  "watch:js": "watch 'npm run js' ./src/js",
  "watch:server": "browser-sync start --server dist --files 'dist, **/*.html, !node_modules/**/*'",
  "watch": "npm-run-all -p watch:*"
},

yarn run watch でブラウザが立ち上がります。html、Sass、JavaScriptを更新するとブラウザがリロードされて変更が反映されます。

さいごに

最低限の環境は簡単に作ることができました。 gulpもnpm scriptsも一長一短で好きな方を使えばいいと思いますが、いろいろと変遷しているタスクランナーに依存しないのはいいところですね。
とはいえgulp使ってる人多いし、gulpでいいかと思いますが、選択肢の一つとして覚えておくといいと思いました。

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記