タスクランナーにgulpではなくnpm scriptsを使う
目次
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でいいかと思いますが、選択肢の一つとして覚えておくといいと思いました。
Read next
- 2021年10月17日CSSプリプロセッサについて(SassやPostCSS)
- 2021年10月17日フロントエンド・コーダーが知っておきたい画像の知識
- 2021年10月31日アニメーションライブラリGSAPについて