「gulp」の記事一覧
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.06
gulp-eslintの動作要件
gulp-eslint実行時に以下のようなエラーが発生する場合があります。これはgulp-eslintがインストールされていても、parserで使用しているba…
2021.02.07
gulp-scss-lintの動作要件
gulp-scss-lint実行時に以下のようなエラーが発生する場合があります。これはgulp-scss-lintがインストールされているにもかかわらず、scs…
2021.01.12
gulp 4.0で導入されたseriesとparallelについて
gulp4.0から新しくseriesとparallelが導入され、タスクの処理の順番を制御できるようになりました。 seriesは直列に処理を実行する同期処理で…
2021.01.10
npxでgulpを実行
npmはNode.jsインストール時に付属するパッケージ管理マネージャで、Node.jsのパッケージの管理や実行を取り扱うものです。Node.jsをインストール…