「Node.js」の記事一覧
2022.07.10
scss-lintのエラー回避方法
scssファイル内でscss-lintのエラーを回避します。以下はgridレイアウトで使用する「fr」が許可されていない単位としてエラーになるのを無効化していま…
2021.10.10
gulpでbrowser-syncを実行
gulpにbrowser-syncを組み込んで、gulp起動時にブラウザが立ち上がるようにします。以下のコマンドでbrowser-syncをインストールします。…
2021.10.09
gulp-sass 5.0について
2021年7月にgulp-sassのメジャーバージョンが4から5にアップデートされました。gulp-sass 5.0の動作要件はnode.jsバージョン12以上…
2021.03.22
gulp-plumberとgulp-notifyでエラーを通知
gulpのwatchメソッドでscssファイルを監視し、scssファイル更新時にsassを自動コンパイルする場合、scssファイル内に記述エラーがあるとwatc…
2021.03.22
gulpのwatchメソッドでsassを自動コンパイル
gulpのwatchメソッドでscssファイルを常時監視し、scssファイルが更新されたタイミングでsassをコンパイルします。 gulpfile.jsにwat…
2021.03.21
gulp-postcssでpostcss-sortingを実行
gulp-postcssはgulp上でPostCSSが実行できます。postcss-sortingはPostCSSのプラグインで、CSSプロパティの記述順を並べ…
2021.03.20
gulp-postcssでautoprefixerを実行
gulp-postcssはgulp上でPostCSSが実行できます。PostCSSはポストプロセッサーとして、コンパイル後のCSSに対して整形等の後処理ができま…
2021.03.19
gulp-sass実行時のエラー対処法
Node.jsのメジャーバージョンが異なる環境の場合、gulp-sass実行時にnode-sassで以下のようなエラーが発生する場合があります。 npm ls …
2021.03.18
gulpでソースマップを出力
gulpでsassコンパイル時にソースマップを出力します。gulp4は標準機能でソースマップが書き出せます。gulp3のようにgulp-sourcemapsのイ…
2021.03.17
本番環境と開発環境の処理をgulp-modeで分岐
gulpでsassコンパイル時に、開発環境はoutputStyle: 'expanded'、本番環境はoutputStyle: 'compressed'で書き出…
2021.03.17
gulp-sassによるsassコンパイル時の文字コード指定
gulp-sassでsassをコンパイルすると、scssファイル内に文字コードの指定があっても削除されます。 sassコンパイル後のlayout.css内に文字…
2021.03.16
gulp-sass-globでパーシャルファイルを読み込み
sassコンパイル時、コンポーネントごとに細分化されたパーシャルファイルは、読み込み元のscssファイルから@importを利用して読み込みます。以下の例ではl…
2021.03.16
gulp-sassの実行
gulpでsassをコンパイルします。まずnpm initでpackage.jsonを作成し、gulpとgulp-sassをインストールします。npm inst…
2021.03.10
npm run-scriptでgulpを実行
ローカルにインストールしたnpmパッケージの実行は、npxコマンドを利用するのが簡単です。以下のgulpfile.jsでテストします。各タスクのfunction…
2021.03.07
.eslintrcの設定
ESLintはJavaScriptの構文をチェックするツール（Linter）の一つで、.eslintrcはESLintの設定ファイルです。以下を記述することでE…
2021.03.06
gulp-eslintの動作要件
gulp-eslint実行時に以下のようなエラーが発生する場合があります。これはgulp-eslintがインストールされていても、parserで使用しているba…
2021.02.12
scss-lint.ymlの設定
Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成…
2021.02.07
gulp-scss-lintの動作要件
gulp-scss-lint実行時に以下のようなエラーが発生する場合があります。これはgulp-scss-lintがインストールされているにもかかわらず、scs…
2021.01.16
npm updateでパッケージのバージョンを更新
npm updateでパッケージのバージョンを更新します。更新を確認するためにまず、jqueryの古いバージョンである2.2.0をインストールします。 実行が完…
2021.01.12
gulp 4.0で導入されたseriesとparallelについて
gulp4.0から新しくseriesとparallelが導入され、タスクの処理の順番を制御できるようになりました。 seriesは直列に処理を実行する同期処理で…
2021.01.12
npm lsでインストールされているパッケージの情報を表示
プロジェクトのディレクトリでnpm lsを実行するとインストールされているパッケージの情報を表示できます。lsコマンドはlistコマンドの短縮形です。 例えばプ…
2021.01.11
パッケージのバージョン指定インストールとpackage-lock.json
パッケージインストール時にパッケージ名の後に@を付けると、パッケージのバージョンの指定ができます。以下はjqueryのバージョン3.4.1インストール時の指定で…
2021.01.11
npm initによるpackage.jsonの作成とパッケージのインストール
プロジェクトを作成するディレクトリでnpm initを実行してpackage.jsonを作成します。対話形式で作成しますが何も入力せずEnterキーで進めていく…
2021.01.10
npxでgulpを実行
npmはNode.jsインストール時に付属するパッケージ管理マネージャで、Node.jsのパッケージの管理や実行を取り扱うものです。Node.jsをインストール…