Gulp は、フロントエンド開発プロセスにおけるフローベースのコード構築ツールです。これは、Web サイトのリソースを最適化するだけでなく、テスト、検査、マージ、圧縮、フォーマットを自動的に完了することができます。フロントエンド コードの変更後、ブラウザを自動的に更新し、展開ファイルを生成し、ファイルを監視して、変更後に指定された手順を繰り返します。これを使用すると、楽しくコードを書くことができるだけでなく、作業効率も大幅に向上します。
このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 16、DELL G3 コンピューター。
1. ガルプとは何ですか?
Gulp は、フロントエンド開発プロセスにおけるフローベースのコード構築ツールであり、Web サイトのリソースを最適化するだけでなく、開発プロセス中の多くの繰り返しタスクを適切なツールを使用して自動的に完了できます。ツールを使用すると、楽しくコードを書くことができるだけでなく、作業効率も大幅に向上します。
Gulp は、Nodejs に基づく自動タスク ランナーで、テスト、検査、マージ、圧縮、フロントエンド コードのフォーマット、ブラウザーの自動更新、デプロイメント ファイルの生成、変更後に指定された手順を繰り返すファイルの監視を自動的に実行できます。
2. フローとは何ですか?
フロー、フロー、ファイルをリバーと比較し、1 つのリバーが流出し、別のリバーが流入します。これが、gulp がファイル ストリームに対して動作する方法です。次のように、ある操作の出力が別の操作の入力として使用されます。
この操作は jQuery のチェーン操作に似ています。 $("").html("gg").css({}).parent().find("a")....; ストリームを使用する場合, gulp は中間ファイルを削除し、最終出力のみをディスクに書き込むため、プロセス全体が高速化されます。
3.gulpのインストール
Gulp はノード環境に基づいています。まず、ノードがインストールされていることを確認します。
ノードのインストール後、ノードのプラグイン管理 (インストール、アンインストール、依存関係管理などを含む) に使用される npm [(ノード パッケージ マネージャー) nodejs パッケージ マネージャー] も自動的にインストールされます。
npm インストール プラグインは海外サーバーからダウンロードされるため、ネットワークの影響を大きく受け、異常が発生する可能性があるため、タオバオが提供する cnpm を使用してノード プラグインをインストールするのが最適です。
cnpm をインストールします: http://npm.taobao.org/
インストール後、cnpm バージョンをチェックして、インストールが成功したことを確認します。
次に、gulp をインストールします。まず、cnpm install -g gulp をグローバルにインストールします。
次に、デスクトップのデモ/bbs2.0/src に移動し、bash 環境に入り、cnpm install gulp を使用して gulp を現在のディレクトリにインストールします。
インストールが成功すると、node_modules フォルダーが表示されるので、cnpm init で package.json を作成します (ノードプロジェクト構成ファイル: ノードプラグインパッケージは比較的大きいため、バージョン管理は含まれていません。構成情報をパッケージに書き込みます) .json をバージョン管理に追加すると、他の開発者はそれに応じてダウンロードできます)
最後まで入力すると、現在のフォルダーに package.json ファイルが生成されます。このとき、gulp を使用して gulp を起動しようとすると、エラーが報告されます。
エラー メッセージによると、gulpfile.js ファイルを作成する必要があります。
次に、gulp を実行します
必要な「ok」が表示されており、ここでは gulp が基本的に正常に動作することがわかります。
4. gulpでよく使われるプラグインの利用
1) 結合されたファイルを圧縮する
新しいindex.htmlファイルを作成します。
js ディレクトリに 2 つの新しい js ファイルを作成します。
gulpfile ファイルを編集します。次のように：
gulp-uglify と gulp-concat という 2 つのプラグインを使用するため、まずこれら 2 つのプラグインを現在のディレクトリにインストールする必要があります。
プラグインをインストールするときに、--save-dev を使用して package.json に追加すると、ファイルが package.json に正常に書き込まれたかどうかを確認できます。
はい、引き続き gulp-concat をディレクトリにインストールします。インストールが完了したら、node_modules をクリックすると、プラグインが正常にインストールされたことがわかります。
OK、エラーが報告されなければ、成功したことを意味します。次に、ファイルをチェックして、圧縮してマージする必要のある all.min.js ファイルが src の下にあることを確認します。
2) ガクガク
Sass をインストールするには、まず Ruby をインストールし、Sass チュートリアルに入る必要があります
「インストール」をクリックすると、sass と Ruby のインストール方法が表示されます。
Rubyが正常にインストールされたら、Rubyのバージョンを確認します
成功したら、gem 経由で sass をインストールします
compass を使用する必要がある場合 (compass と sass の関係は jQuery と js に相当します)、ついでに compass もインストールしてください。
ここで注意する必要があるのは、Gem ソースに問題があるため、インストールが失敗するということです。エラーが報告されます: SSL_connect returns=1 errno=0 state=SSLv3 read servercertificate B: certificate verify failed 。 gem のソースを https://ruby.taabao.org/ に変更しても動作しない場合は、http://gems.ruby-china.org/ に変更してください。性格の問題。
次に compass create を使用して Sass プロジェクトを作成します
作成が成功すると、sass、stylesheets、config.rb の 3 つのファイルが自動的に生成されます。
Sass で任意のファイルを開いて編集します
次にgulpfileを編集します
次に、gulp-sass と gulp-compass を現在のディレクトリにインストールします。
gulpを起動後、スタイルシート内の該当ファイルを確認してください
OK、sass は css に正常にコンパイルされました
3) gulp-minify-css を通じて CSS を圧縮する
ガルプ開始後
4) gulp-load-plugins を使用してプラグインをロードします。
gulp-load-plugins プラグインは、package.json ファイル内の gulp プラグインを自動的にロードできます。
gulpfile で require('gulp-load-plugins')(); だけを必要とします。
以下の plugin.** を使用してください (複数の単語はキャメルケースで名前が付けられています)
5) gulp-imagemin および imagemin-pngquant は画像を圧縮します
6) gulp-livereload による Web ページの自動更新
まず gulp-livereload をインストールします。 cnpm install gulp gulp-livereload、ここでの列は圧縮された HTML とコンパイルされ圧縮された Sass です。
次に、gulpfile内で
リフレッシュなしを正常に実現するには
1. Chrome プラグイン livereload のサポートも必要なので、壁を乗り越えてください。
2.サーバー環境でWebページを開きます。