フロントエンドgulpの開発プロセスを自動化します。
一息は、フロントエンドの管理のために非常に便利になります。
インストール一気：
npm install gulp -g #将gulp安装至全局
ローカル使用する必要があるためrequireモードgulp。そのためにも、ローカルにインストールする必要があります。
npm install gulp --save-dev #将gulp安装至本地，并保存至package.json
上記--save-devインストールするパッケージに追加されるpackage.jsonの下でdevDependencies依存性。通過した後npm install、自動的にインストールします。devDependenciesこのパッケージは、パッケージは、本番環境を使用して記録する場合は、パッケージをインストールする際に使用し、開発環境の使用を記録するために使用されてnpm install xx --save記録されますpackage.jsonでdependencies、中央、dependencies本番環境での依存関係を記録するように設計されて！
ゴクゴクタスクを作成します。
使用するには、gulp合理化するための開発努力を。まず、あなたはのルートディレクトリにプロジェクトを作成する必要がありますgulpfile.jsファイル。その後、gulpfile.js次のコードを入力します。
=必要とする（ "グッ"）VaRのグッ
gulp.task（ "挨拶"、関数（）{
にconsole.log（ 'Hello Worldの'）;
}）;
require文の参照は、サードパーティの依存関係をインストールしました。これはrequire、現在のプロジェクトへの参照は、それがグローバルの下で参照することはできませんすることができます。require構文は次のとおりです。node.jsユニークでのみ可能node.jsな環境を使用しています。
gulp.taskタスクを作成するために使用されます。gulp.task最初のパラメータは、コマンドの名前で、2番目の引数は関数であり、それは何かをするコマンドを実行するための時間である、内部で書かれています。
後で実行したい場合は、上記のコードを書いた後greet、コマンドを、そしてあなただけが配置されているプロジェクトへのパスを入力し、[ターミナルを使用する必要がgulp greet実行します。
4.タスク処理のCSSファイルを作成します。
gulp唯一の私たちのためのフレームワークを提供します。我々のような、より複雑な機能のいくつかを達成したい場合はcss、圧縮を、その後、我々はまた、いくつかインストールする必要がありますgulp-cssnanoプラグインを。gulp関連したプラグインのインストールもスルーnpmコマンドインストールするには、インストールパッケージは、（グップラグイン自体は普通のパッケージである）他のと全く同じです。
するにはcss、ファイルを処理し、あなたは何をする必要がある圧縮され、その後、圧縮されたファイルは、指定されたディレクトリに配置されている（と、元のCSSファイルと一致しません）！ここでは、使用してgulp-cssnanoこの作業を処理するために：
NPM一息-cssnano --save-devのインストール
その後、gulpfile.js次のコードを記述します。
VaRの一気=必要（ "がぶ飲み" ） するvar cssnano =必要（ "飲み込む-cssnanoを"）
// CSSファイルの処理タスクが変化定義 gulp.task（ "CSS"、関数（）{ gulp.src（ "./css/*.css" ） .pipe（cssnano（）） .pipe（gulp.destを（ "./css/dist/" ）） }）。
コードの詳細な説明：
gulp.task：作成cssタスク処理を。
gulp.src：現在の検索cssディレクトリのすべてを.cssの最後にcssファイル。
pipe：パイプラインの方法。この方法は、他のプロセッサに結果を返します。上記のようなcssnano。
gulp.dest：ファイルが取り扱われ、指定したディレクトリの下に置かれています。管理が容易ではない、競合を避けるために、元のファイルと同じディレクトリに置かないでください。
5.ファイル名を変更します。
上記のタスクと同様に、完全に圧縮されたcss彼は、追加することが最善である、ファイルを.min.css1これは圧縮されたファイルの結果で知ることができるので、接尾辞を。今回は使用する必要がgulp-rename変更します。まず、もちろん、インストールする必要がありますnpm install gulp-rename --save-dev。次のようにサンプル・コードは次のとおりです。
VaRのグッ=必要とする（ "グッ" ） するvar cssnano =必要とする（ "-cssnano飲み込む" ） VaRの名前の変更を=必要とする（ "-リネーム飲み込む" ） gulp.task（ "CSS"、関数（）{ （gulp.srcを」./ 。CSS / * CSS " ） .pipe（cssnano（）） .pipe（リネーム（{ "接尾辞"："分" }）） .pipe（gulp.dest（ " ./css/dist/」）） }） ;
上記のコードでは、行を増やし.pipe(rename({"suffix":".min"}))、我々は、この使用しているrenameオブジェクトのパラメータは、ルールの変更を追加する名前を指定する方法を、およびパス.minサフィックスを。gulp-renameファイル名を指定する他の方法があり、たとえば、あなたは、ファイル名の前のように接頭辞を追加することができます。その他のチュートリアルはこれを見てすることができますhttps://www.npmjs.com/package/gulp-rename。
6.タスク処理のjsファイルを作成します。
処理jsファイルを、我々はする必要がありますgulp-uglifyプラグイン。インストールコマンドを次のように：
NPM一息-uglify --save-devのインストール
インストール後、私たちはすることができますjsファイルを処理すること。次のようにサンプル・コードは次のとおりです。
VaRの一気=必要（ "がぶ飲み" ） するvar名前変更=必要（ "飲み込む-リネーム" ） varは =は（ '飲み込む-uglify'必要uglify ）。 gulp.task（ 'スクリプト'、関数（）{ gulp.src（path.js + '*の.js' ） .pipe（uglify（）） ：.pipe（（{サフィックスリネーム」.min' }）） .pipeを（gulp.dest（ 'のJS /' ））; }）;
ここでの加算である.pipe(uglify())ため処理jsファイル圧縮と中傷（変数名を変更する）および他の治療。詳細についてはgulp-uglifyチュートリアル。テイクhttps://github.com/mishoo/UglifyJS2#minify-optionsを見て：。
7.複数のファイルをマージします：
Web開発では、順番にページのレンダリング速度をスピードアップするために、時には私たちは、それによって要求の数を減らし、単一のファイルに複数のファイルを圧縮します。スプライシングファイルのために、我々は、使用する必要があるgulp-concatプラグインを。インストールコマンドを次のように：
npm install gulp-concat --save-dev例えば、我々は今持っているnav.jsナビゲーションバーを制御するのに使用されるファイルを。あるindex.js家の内容全体を制御するために使用するファイルが。その後、我々は一つのファイルにこれらの2つのファイルに次のコードを使用することができます。
VaRの一気は=（「がぶ飲み」を必要）。 VaRの CONCATは=（ 'ゴクゴク化連結'を必要）。 VaRの uglifyは=（ '飲み込む-uglify'が必要です）。 gulp.task（ 'vendorjs'、関数（）{ gulp.src（[ './js/nav.js' 、 ' ./js/index.js' ]） .pipe（CONCAT（ 'index.min.js' ）） .pipe（uglify（）） .pipe（gulp.dest（ 'DIST / JS /' ））; }）;
8.圧縮画像：
写真は、主要な制限サイトの読み込み速度です。大きな絵、それはダウンロードにかかる長いウェブサイトから。だから、いくつかの写真のために、我々は、上記の圧縮の基本的な画質を変更しない可逆圧縮を取ることができます。でgulp真ん中我々はできるgulp-imagemin私たちが達成するために。インストールコマンドを次のように：
npm install gulp-imagemin --save-dev
仕事の比較的大きな量はいくつかの写真のために圧縮された画像の圧縮には、我々は、圧縮繰り返す必要がありません。この時点で我々は使用することができgulp-cache、それらの圧縮画像をキャッシュします。インストールコマンドを次のように：
npm install gulp-cache --save-dev
プラグインの2つのコードの組み合わせである、次のように：
VaRの imageminは=（ 'ゴクゴク-imagemin'を必要）。 VaRのキャッシュは=（「ゴクゴクキャッシュ」を必要）。 gulp.task（ '画像'、関数（）{ gulp.src（ "./images/*.*" ） .pipe（キャッシュ（imagemin（））） .pipe（gulp.dest（ 'DIST /画像/' ））; }）;
9.変更検出コード、自動化されたタスク：
上記のタスクのすべては、我々はすべての端末に手動で実行する必要があります。我々が開発しているので不便。私は、コードを変更最良の方法は、gulp自動的に適切なタスクを実行します。この作品我々は使用することができますgulp内蔵のwatch完全な私たちを助けるために方法を：
VaRの GULP =（ "GULP"が必要） するvar cssnano =必要（ "GULP-cssnano" ） VAR改名は=（ "GULP-名前の変更"が必要です） // cssファイル処理タスクが変更定義 gulp.task（ "CSS"、機能を（）{ gulp.src（ "./css/*.css" ） .pipe（cssnano（）） .pipe（リネーム（{ "サフィックス" :. "MIN" }）） .pipe（gulp.dest（ " / CSS / DIST / " ）） .pipe（connect.reload（）） }）; // リスナーのタスク定義 gulp.taskを（"」見て、機能（）{ // すべてのCSSファイルに耳を傾け、その後、このタスクCSSの実行 gulp.watch（ "./ CSS / *。 cssの"、[ 'CSS'を]） }）。
限り、端末が実行すると後gulp watchのコマンドはすべて自動的に監視するcssファイルを、その後、自動的に実行しcssたタスクを、作業を完了するために。
10.ファイル、オートリフレッシュブラウザを変更した後：
私たちは、いくつかの上記の変更を実現cssファイルは、それが自動的に処理を実行できるcssタスクを。しかし、我々はまだ手動で変更後の結果を確認するには、ブラウザを更新する必要があります。コードを変更した後、それは自動的にブラウザをリフレッシュ方法はあります。答えは、使用することですbrowser-sync。browser-sync次のようにインストールコマンドは次のとおりです。
npm install browser-sync --save-dev
browser-sync次のようにサンプル・コードは次のとおりです。
VaRの GULP =（ "GULP"が必要です） するvar =必要（ "GULP-cssnano" cssnanoを） VARのリネーム=必要（ "GULP-名前の変更" ） するvar BS =必要（ "ブラウザ同期" ）.create（） gulp.task（ "BS"、関数（）{ bs.init（{ 'サーバ' { 'BASEDIR'： './' } }）; }）; // CSSファイルの処理タスクを定義するには、変更 gulp.task（ "CSS"を、関数（）{ gulp.src（ "./css/*.css" ） .pipe（cssnano（）） .pipe（リネーム（{ "接尾辞"："分」。 接尾辞"："。分」 }）） .pipe（gulp.dest（ "./css/dist/" ）） .pipe（bs.stream（）） }）; // リスナータスク定義 gulp.task（ "時計"、関数（）{ GULPを。 （見る "./css/*.css",['css'を]） }）; // 一気サーバのオープンサーバを実行 gulp.task（"サーバー」、[ ' BS'、 '時計を']）
私たちが作成した上でbs、タスクを、タスクが開きます3000私たちが訪問した後、ポートをhtmlページは、あなたが必要なときにhttp://127.0.0.1:3000訪問する方法を。その後、次の我々は定義serverタスクを。このタスクは、実行することになるbsとwatch、タスク、限り変更などcssのファイル、それが実行するcssタスクを、それが自動的にブラウザを更新します。
browser-syncより多くのチュートリアルを参照してください：http://www.browsersync.cn/docs/gulp/。