タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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.
更新版 Web制作向けnpm-scripts 3 npm-scriptsのWeb制作向けタスクランナー Web制作は細かいやることが多いので、少しでも自動化して手作業を減らしたいと考えました。 一人で完結する作業であれば、PreprosやKoala(開発終了)などGUIのツールや、エディタの標準、拡張機能で実現できる事も多いですが、複数人で作業を行う場合、無駄な作業やトラブルを避けるために環境を統一する、コーディング規約を遵守するなどかなり面倒です。 そこでよく使われるGulpやWebpackですが、学習コストがかかる上に、Web制作ではそこまでの機能はいらない場合が多いので、比較的入門しやすいと感じたnpm-scriptsでWeb制作向けのタスクランナーを作ってみました。 やりたい事 Web制作の効率化のため、作業の自動化を設定します。 HTML CSS JavaScript
【2020年のタスクランナーはこれ！】npm scriptsを使ってみた【脱gulp】 | 日々アップデートBLOG
これで npm run babel を実行することでトランスパイルされるというものでした。 以前までタスクランナーにgulpを使用しているのですが、できれば脱gulp、そしてnpm scriptsに移行していきたいと考えていました。 今回はnpm scriptsについて深く知って、以下を目標に進めていきます。 sassの自動コンパイル＆圧縮処理 babelを使用してjavascriptの自動トランスパイル＆圧縮処理 browser-syncでブラウザリロード npm scriptsとは npmはpackage.jsonの「scripts」箇所に記述することで、シェルスクリプトやaliasコマンドを登録・実行することができます。 Frontend Developer Roadmap 2020版でも推奨 Frontend Developer Roadmap 2020版でもGulpよりnpm s
型チェックや静的コード解析については、普段エディターや IDE で自動的に実行していると思いますが、 CI 用に定義しておくと便利です。また、これらが明示的に定義してあることでジョインしたばかりのプロジェクトメンバーがそれぞれの目的でどのツールを使うかを把握することが可能です。 スクリプト名の修飾 例えば development 環境と production 環境でビルド用の設定が異なる場合など、実行すべきスクリプトを変更したいときがあります。これは慣習的に : コロンでつないで環境名を指定することが多いです。例えば普段使う build コマンドは development 環境用とし、 build:prod コマンドに production 環境用のスクリプトを定義する、などです。 yarn における scripts プロパティの扱い yarn も同様の仕組みを持っており、 yarn ru
Web開発の際のタスク処理として、package.json内に記述して利用できるnpm-scriptsを利用しています。 またその際に、複数処理の直列化や並列化に便利なnpm-run-allを利用しています。 今回はそれを用いた用途や環境毎への記述を、明確かつ柔軟にする方法を記録します。 結果 先に結果の記述を示します。以下の通りです。 { "scripts": { "build" : "run-s build:{sass,ts}", "build:sass" : "sass input.scss output.css", "build:ts" : "tsc main.ts", "watch" : "run-s watch:{sass,ts}", "watch:sass" : "sass --watch input.scss output.css", "watch:ts" : "tsc -
gulpをやめる経緯 は、、 色々なところで書いてあるので、ここでは割愛します。 ここでは、あくまで実コードベースで書き換えるように話を進めます。 ただ、npm-scriptsのみで書き換えるのは、無理っぽい。 処理の量的に、package.jsonに全て書くのは厳しかったです。 以下をご覧ください。 私が使っているgulpタスクの一部分です。 scssのタスクですが、がっつりgulpに依存しています。 読み込んでいるモジュール名も「gulp-●●」がふんだんに入っています。 ■元ソース https://github.com/underground0930/gulp_and_webpack/blob/master/gulp/gulpfile.babel.js import gulp from 'gulp'; import watch from 'gulp-watch'; // watchタ
で開発開始。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が出来ないよ！」と英語で怒ってくる。しぶしぶ経由ディレ
Webフロントツール：「webpack」と「npm-scriptsによる個別ライブラリの実行」の比較 - Qiita
１．webpack：Webフロントのバンドルを含むタスクランナープラットフォーム (1) 概要 webpackは、以下の処理を実行できるオールインワンツール。 Javascriptのビルド、バンドル。これが基本。 プラグインの利用により、SASSのビルド、バンドル、画像の最適化、HTMLの静的ジェネレートなど。 ただし、様々なビルドをするにはnpmで別途ライブラリをインストールし、更に、それをwebpackから利用するためのpluginもnpmでインストールしないと行けない。 いわば、ビルドやバンドルに特化したタスクランナーであり、そのプラットフォームといえると思う。（バンドルタスクランナー）。 (2) webpackのメリット これを導入すればWebのフロントに関するリソースのビルド、バンドル、作成、最適化が一括でできる。 副次的・事後的な効用として、webpackを利用することで、We
概要 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ファイルを吐き出す 想定ディレクトリ 以下のデ
facebook オフィス狛 技術部のHammarです。 node.jsを使った開発を行う時に、JavaScriptライブラリのパッケージマネージャーであるnpmを使いますが、このnpmにはプロジェクトの情報管理ファイルであるpackege.jsonがあります。 基本的なpackege.jsonの記載方法については割愛しますが、このpackege.json内にscriptsという記述を設定することによって、独自のコマンドを設定することができます。 これによって、例えばローカルサーバーの起動や停止等、良く使うコマンドを設定しておけば、いろいろコマンドを打たずに済むといった感じになります。 例えばAngularの開発では、package.jsonには下記のようにscriptsの記載したりします。 "scripts": { "start": "ng serve", "test": "ng tes
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を使ってインストールするのをオススメしています。
概要 今回は、npm-scriptを使用したSassの環境構築手順を紹介します！ 説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。 1. npm-scripts での環境構築 Sassの環境構築というとGulpを使用されている例が多いかと思います。 しかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり npm-scriptsで殆どの事が解決できるのではないかという雰囲気に。 という事で今回はnpm-scriptsでの環境構築を行っていきます。 2. DartSass を使用したコンパイル 意外と知られていない事なのですが、厳密にはSassは3種類あります。 基本的な記述方法は同じですが、@import等細かな箇所で違いがあり、 独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。 1. Ruby S
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
npm-scripts を書く時の手癖 - mizdra's blog
Makefileの代わりにnpm scripts+zxを使う - 詩と創作・思索のひろば
npm scripts で rimraf を使わずディレクトリを再帰的に削除する
Web制作向けnpm-scripts - Qiita
npm-scripts でチームメンバーと共通認識を作る | DevelopersIO
npm-scriptsをnpm-run-allで用途や環境毎に書く際の小技 - Qiita
Gulpのタスクをnpm-scriptsで書き換える - Qiita
npm-scriptsでdart-sass → postcssのタスクを作る。（ディレクトリ指定 & watch）
imgタグにwidth/heightをnpm-scriptsで自動付与する
package.json内にscriptsの記述を設定する（npm-scripts）
npm-scriptsでSCSSをコンパイルする環境を構築する方法
npm-scriptsでDart Sassのコンパイル環境構築
www.iezo.net
togetter.com
www.asahi.com
gendai.media
natsumi0.ht.gob.jp
sarukichitail.hatenablog.com