Gulp が Sass をコンパイルする方法

Gulp は、フロントエンド開発者が一般的なタスクを処理するために使用できる自動化ツールです。

1. Web サーバーを構築します

2. ファイルを保存するときにブラウザを自動的にリロードします

3. Sass や LESS などのプリプロセッサを使用します。

4. CSS、JavaScript、画像の圧縮などのリソースを最適化します

もちろん、Gulp はそれ以外のこともできます。十分に夢中であれば、これを使用して静的ページ ジェネレーターを構築することもできます。 Gulp は非常に強力ですが、それを活用する方法を学ぶ必要があります。

これがこの記事の主な目的です。 Gulp の基本的な使用法を理解し、世界を統一するという大きな目標をできるだけ早く達成するのに役立ちます。

これからやること

この記事の最後には、簡単なワークフローが表示されます:

Sassをコンパイルする

さらに、簡単なコマンドチェーンを使用して複数のタスクを呼び出す方法も学びます。

Gulp をインストールする

Gulp をインストールする前に Node.js をインストールする必要があります。

Node をまだインストールしていない場合は、ここからダウンロードできます。

Node.jsをインストールした後、ターミナル(winのターミナル、cmd)を使用して次のコマンドでGulpをインストールします

$ sudo npm install gulp -g

Macユーザーのみがsudoコマンドを必要とし、 $ 記号 それもコピーしてください。これはあなたのお茶ではありません。

npm install は、Node Package Manager からインストールするために指定されるコマンドです (npm は心配です)。

-g はグローバル インストールを意味するため、コンピューター上のどこでも gulp コマンドを使用できます。

Mac ユーザーがグローバルにインストールするには管理者権限が必要なので、sudo が必要です。

次に、Gulp を使用してプロジェクトを作成します。

Gulp プロジェクトを作成します

まず、新しいプロジェクト フォルダーを作成し、このディレクトリで npm init コマンドを実行します:

$ npm init

npm init コマンドは package.json ファイルを作成します。このファイルには、このプロジェクトに関連する情報が含まれています。たとえば、使用するさまざまな依存関係 (ここでは主にプラグイン) (次の内容がターミナルに自動的に表示されます。ここで何気なく入力するだけです)

作成後、次のコマンドを実行します:

$ npm install gulp - -save-dev

今回はGulpをローカルにインストールします。 --save-dev を使用すると、package.json に gulp 依存関係を追加するようにコンピューターに通知されます。

ディレクトリ構造は次のとおりです

この構造では、appフォルダーを開発ディレクトリとして使用し（すべてのソースファイルはこの下に配置されます）、distフォルダーはコンテンツを保存するために使用されます本番環境。

これらのファイルには任意の名前を付けることができますが、ディレクトリ構造を必ず覚えておいてください。 gulpfile.jsを作成し、以下のように入力してみましょう。

次に、gulp-sass プラグインをインストールして sass ファイルをコンパイルします

1. アプリの下にコマンドラインを入力します:

$ npm install gulp-sass --save-dev

このとき、.json ファイルは自動的に更新されます。依存関係パッケージです。
2. gulpfile.jsにプラグインを導入します

3. gulpfile.js内のタスクタスクをgulpに指示します

このとき、コマンドラインが実行されます

は dist/css/

内のすべての CSS を自動的にコンパイルして生成します