タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:mizdra の今の npm-scripts を書く時の手癖を書き連ねてみる。 基本形 { "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development", "lint": "eslint .", "test": "jest" } } 一番シンプルな npm-scripts を書く時のパターン。以下の 4 つの script を登録している。 buil
そこそこの規模があるプロジェクトで実行すべきタスクを定義するとき、初手として Makefile を使いがち。 Pros make は事実上どんな環境にもあることを期待してよい シェルで実行されるコマンドをそのまま書ける タスクの依存関係が明示できる Cons make では positional arguments が使えない 少し複雑なことをしようとすると Makefile 専用の文法を覚える必要がある 現代では、ファイルベースのタスクの依存関係は make が発明されたころほどは必要ではない Docker とか Go とか Webpack がよしなにしてくれることが多い 例: docker compose のラッパー ちょっとしたコマンドのラッパーを書きたいことがある。Makefile を書きはじめたらすべてのエントリポイントを make にしたい。ということで、以下のような Make
GitHub - egoist/dum: An npm scripts runner written in Rust.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
3 行で Node.js >= v14.14.0 であること rimraf dist は node -e 'fs.rmSync(`dist`, {recursive:true, force:true})' で置き換えられる rimraf dist/*.bundle.js みたいな glob を含むものは置き換えできない 長い説明 npm scripts で不要なキャッシュやビルドの出力ファイルを削除したい場合は rimraf というパッケージを POSIX の rm -rf の代わりに使うことが多いと思います。これは Windows で npm run の実行に使われる コマンドプロンプト (cmd.exe) に rm がないのを始めとした環境依存の問題を避けるためです。 とはいえパッケージなしではディレクトリの再帰的削除もできない、というのはちょっと困るので、v12.10.0 で fs.
で開発開始。sassファイルを更新すると処理が走ってdist/に処理結果のcssが吐き出される。 cssファイルの一時経由先として「tmpCssディレクトリ」を設けてるのがコツ。 「watch:sassToPostcss」から連なる処理から解説 まず「build:sass」でsrc/sass/内の(.scss|.sass)を、tmpCss/へトランスパイル。次にwatchを効かせる為、追加オプション「-- -w」を足して「build:sass」「build:postcss」を実行。 「tmpCssディレクトリ」が必要だった理由 直でsassからdist/に吐き出したcssを、postcssの「--replace」で上書きできればシンプルだった…。しかし、いざ実行するとpostcssが「--replace を使うと、同時に --watchが出来ないよ！」と英語で怒ってくる。しぶしぶ経由ディレ
概要 今回は、npm-scriptを使用したSassの環境構築手順を紹介します！ 説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。 1. npm-scripts での環境構築 Sassの環境構築というとGulpを使用されている例が多いかと思います。 しかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり npm-scriptsで殆どの事が解決できるのではないかという雰囲気に。 という事で今回はnpm-scriptsでの環境構築を行っていきます。 2. DartSass を使用したコンパイル 意外と知られていない事なのですが、厳密にはSassは3種類あります。 基本的な記述方法は同じですが、@import等細かな箇所で違いがあり、 独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。 1. Ruby S
概要 npm-scriptsでimgに自動でwidth/heightを付与する方法です。 Node.js上でDOM操作をするために、jsdomというモジュールを使います。 わりかし思いつきで書いたコードなので、考慮不足等々あったらご指摘ください（というか誰か最適化してくれ）。 前提 Mac環境のみ検証済み（Windowsは未検証です。適宜調整してください） ローカルにある画像が対象 参考リポジトリ 全体のコードは以下リポジトリに置いてあるので気になった方は参考にしてもらえると幸いです。 npm-scriptsの実装 大まかな流れ Node.jsでHTMLファイルを取得 jsdomを使用して、画像のパスを取得 image-sizeを使用して画像のサイズを取得 imgにwidth/heightを付与する width/heightが付与されたHTMLファイルを吐き出す 想定ディレクトリ 以下のデ
npm-scriptsで脱Gulpを目指す
脱create-react-appをするとcssコンパイル導入もしやすくなります。 しかし自動コンパイルをするには自分で設定する必要があるので、 タスクランナーの設定をしていきます。 Gulpを使ってもいいのですが、せっかくなので脱Gulpもしてしまいましょう。 npm-srciptsをタスクランナーにする 早速使いたいという方はこの項目を飛ばして2から読み始めてください。 最初にnpm-scriptsについて少し説明すると、package.jsonに記述している「scripts」の部分です。 ファイルの保存がされたらそのスクリプトを実行させることでGulpのような タスクランナーとして扱う感じですね。 Reactを使わない場合はpug / postcss / es6 の変更を監視して 変更があったらそれぞれを再コンパイルしてリロードするといった形をとっていました。 今回はcreate-r
今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。 というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、gulpfile.jsがかなり複雑になりがちです。 package.jsonにある程度まとめて記述することで、管理するファイルも少なくなり、開発環境もシンプルになります。 今回はそんなnpm-scriptsで、SCSSのコンパイル方法についてまとめておきます。 npm scriptsを使う準備gulpを使ったことがある人であれば問題ありませんが、npmを使う必要があるのでNode.jsをインストールしている必要があります。 過去にいくつか記事にしているので、まだインストールしていない人はそちらを参考にインストールしてください。 現時点では、nodenvを使ってインストールするのをオススメしています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
npm-scripts を書く時の手癖 - mizdra's blog
Makefileの代わりにnpm scripts+zxを使う - 詩と創作・思索のひろば
npm scripts で rimraf を使わずディレクトリを再帰的に削除する
npm-scriptsでdart-sass → postcssのタスクを作る。（ディレクトリ指定 & watch）
npm-scriptsでDart Sassのコンパイル環境構築
imgタグにwidth/heightをnpm-scriptsで自動付与する
npm-scriptsでSCSSをコンパイルする環境を構築する方法
anond.hatelabo.jp
reisa.lo.gob.jp
ameblo.jp/0624pooh
dexall.co.jp
www.smbcnikko.co.jp
innovatopia.jp