gulp.jsを使用してCSSタスクを自動化する方法

この記事では、gulp.jsが繰り返しのCSS開発タスクをどのように合理化し、ワークフロー効率を高める方法を調べます。テキストエディターはWeb開発に十分であるが、最新のWebサイトにとって繰り返しのタスクと最適なパフォーマンスはしばしばイライラすることがわかっています。 これらには、さまざまなサーバー全体での伝達、ファイルの連結、生産コードの縮小、および展開が含まれます。 これらのタスクは、変更ごとに繰り返され、ますます負担になる可能性があります。

幸いなことに、gulp.jsはこれらのプロセスを自動化します。 この記事では、画像の最適化、SASSコンピレーション、資産処理とインランス、自動ベンダーのプレフィックス、未使用のCSSセレクターの削除、CSS模倣者の削除、ファイルサイズレポート、ブラウザーDevtoolsのファイルサイズレポート、ソースマップ生成、ライブブラウザーリロードリングのさまざまなCSSタスクの自動化におけるアプリケーションを示しています。ソースファイルの変更時。

gulp.jsを使用することの重要な利点：

オートメーション：
• 画像最適化、SASSコンピレーション、CSSの模倣などの繰り返しタスクを自動化します。 柔軟性：
タスク構成にjavaScriptを使用し、環境に基づいて簡単に変更できます（開発/生産）。
• 拡張可能性：機能を強化するために、多数のプラグイン（例：
、
• ）を活用します。 ライブリロード：gulp-imagemin複数のブラウザとデバイスにわたってリアルタイムアップデートのためにbrowsersyncと統合。gulp-sass
• 効率的なタスク管理：最適化されたビルド時間に対して、シリアルまたは並行してタスクを処理します。
• なぜgulp？を選択するのか
多くのタスクランナーが存在します（Grunt、Webpack、Parcel、NPM Scripts）が、その安定性、速度、広範なプラグインサポート、およびJavaScriptベースの構成により、Gulpは際立っています。このコードベースのアプローチは利点を提供し、条件付き出力変更を可能にします。たとえば、最終展開中にSourcemapsを削除します。

始めましょう：

このチュートリアルでは、Gulp 4を使用しています。Gitとnode.jsがインストールされていることを確認してください。 Github：

のプロジェクトのサンプルをクローンします

ブラウザ内の（または表示されている外部URL）に移動します。

または、新しいプロジェクトを作成します：

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

node.js.

をインストールします http://localhost:8000/Gulpをグローバルにインストールする：

プロジェクトフォルダー（例：

）を作成します NPMを初期化：
2. ソースファイル（画像、scss）用のnpm i gulp-cli -gサブフォルダーを作成します。
3. コンパイルされたファイル用のmy-gulp-projectフォルダーを作成します。
4. テスト用にnpm initファイルを作成します
5. srcモジュールのインストール：
6. build必要なモジュールをインストールしてください：

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

gulpfile.js構成（例）：

gulpfile.jsファイルはタスクを定義します。 単純化された例では、画像の最適化とCSS処理に焦点を当てています：

npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev

この例は、マイニフィスとオートフィックスを備えた基本的な画像の最適化とSASSコンパイルを示しています。 より包括的なgulpfile.jsには、SourceMaps、BrowserSync、より洗練されたPostCSSプラグインなどの機能が含まれます。 完全な例については、元のテキストを参照してください。

プロジェクト構造に合わせてファイルパスを適応させることを忘れないでください。 ターミナルでgulpを実行して、タスクを実行します。 元の記事では、完全な、詳細なgulpfile.jsおよびさらなる説明を入手できます。

以上がgulp.jsを使用してCSSタスクを自動化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。