GULP
、彼女を使用し、我々は唯一のコードを書くことは非常に幸せにすることはできません。ゴクゴクは彼女がいないだけで、ウェブサイトのリソースの最適化だけでなく、開発プロセスでは、多くの反復作業を自動化するための適切なツールを使用することができ、コードのビルドツールのフロントエンドの開発プロセスでありますだけでなく、大幅に私たちの効率を向上させます。
タスクランナー自動化一気のベースとNodejsは、彼女には、JavaScript /コーヒー/ SASS /以下/テストの自動化を完了することができた HTML /画像/ CSS およびその他の文書、検査、統合、圧縮、書式設定、ブラウザが自動的に更新、配布ファイルを生成、および指定された変更でこれらの手順を繰り返して、ファイルリッスンします。実現には、彼女が運転中に、それは非常に簡単になり、直接入力段に、UNIXオペレーティングシステムのパイプ（パイプ）の思想、前段の出力に描画します。
飲み込むとうなり声は非常に似ていますが、頻繁にIO操作が一気ストリーム操作のイサキと比べて、より簡単に速く行われる作業を構築することができます。
一息あなたがNode.jsのがインストールされていることを確認してくださいまずnote.js基づいています
オプションCNPM
ネットワークが比較的大きな変動であるため、NPMプラグインは、外部サーバ上にあります。だから我々は我々のに大きく貢献するために淘宝網に行くことができる
ウェブサイトhttp://npm.taobao.orgを
淘宝網のインストール＃1がミラー
彼のコマンドを：NPMインストール-g cnpm --registry = HTTPS ：//registry.npm.taobao.org
＃2.プロジェクト記述ファイルpackge.jsonビルドし
INITをCNMPを（初期化NPMを置き換えることができます）
（必要なプロジェクト名、バージョン番号、説明、エントリーファイル、コマンドを実行して、著者は、キーを押した証明書を入力します---十分なされています）
＃3は、グローバルGULPインストール
iは3 -g @グッCNPMを
**グローバルインストールGULPは、
選択されたバージョンの第三世代のバージョンを表す。** 3 @ **
** iをインストールしなければならない
Gは、であり、 - ** --global **
あなたがインストールされたバージョン番号を表示することができます// -v飲み込みます
＃4は、現在のディレクトリモジュール一気内に取り付けられている
私は飲み込むCNPM 3-D @。
CNPM私は飲み込む3 -S @（1単語提案選挙Sを理解して選択します）。
** - D-依存略語--save -dev開発**
** -S略語--saveプロジェクトが依存**
に開発者が依存している：開発プロセスはモジュールに依存する必要があり、プロジェクトのモジュールにはタイムラインは---コード形式チェックモジュールの
プロジェクトが依存しない：オンラインプロジェクトはまだモジュールを使用する必要が
あなたの場合私はあなたが書いたかわからない-S
＃5はGULPに配置され、ファイルgulpfile.jsを作成し、
`` `
CONST =必要とする（ 'GULPを'）グッ
`
その後、我々はグッと何かをしようとすることができます
5.1インデックスの一口完全な割り当てを使用して、HTMLインデックスの作成##、およびカレントディレクトリのディレクトリdistのためにコピーされた
`` `
gulp.task（「コピー・インデックス」、機能を（）{
gulp.src（ './のindex.html'）
.pipe（gulp.dest（ 'DIST'））
}
`` `
、コマンドライングッコピーインデックスは、ディレクトリDISTのより多くを見つけます
## 5.2コピー一気/ CSS / a.cssと一息/ CSS / b.css
DISTにコピー/ CSS飲み込むために＃5.2.1
`` `
gulp.task（ "のCoPt-CSSS"、機能（）{
gulp.src（ "/ ** / * ./ CSS"）//フォルダやCSSをコピーします。ファイルフォルダ
.pipe（gulp.dest（ "DIST / CSS"））
}）
`` `
コマンドライン一気のコピーCSS
5.2.2 CSSファイル＃は、結合
、連結モジュール-S-GULP I CNPM追加する
`
CONST =連結を必要とする（ "GULP-連結"）
gulp.task（"のCoPt-CSSS"、関数（）{
「gulp.srcを（ ./css/**/* "）
.pipe（CONCAT（"のmain.css "））//マージ
.pipe（gulp.dest（" DIST / CSS「））
`` `
＃5.2.3 CSS圧縮
モジュールGULP-縮小化-I CNPM CSS -s追加する
`
CONST = minifyCss必要とする（ "GULP-縮小化-CSS "）
gulp.task（"のCoPt-CSSS"、関数（）{
GULPを。 SRC（ "./ CSS / ** / *"）
.pipe（CONCAT（ "のmain.css"））
.pipe（minifyCss（））//圧縮
.pipe（gulp.dest（ "DIST / CSS"））
` ``
＃5.2.4また、圧縮、非圧縮取得したいしたい
、私は飲み込むリネームcnpmモジュールを追加する必要が-S
`
CONSTリネーム=必要とする（ "-リネーム飲み込む"）
gulp.task（ "のCoPt-のCSS"、関数（）{
gulp.src（」./ CSS / ** / * "）
（.pipe（連結"を主.css "））
.pipe（gulp.dest（" DIST / CSS））
.pipe（minifyCss（））
.pipe（）（ "main.min.css"をリネーム）
.pipe（gulp.dest（「DIST / CSS 「））
`` `
## 5.3コピーのjsファイル
###复制JS文件
`
gulp.task（ "コピーJS"、（）=> {
gulp.src（」./ JS / ** / * "）
.pipe（gulp.dest（" DIST / JS 「））
}）
`` `
JS DIST /マージするJSコード###
`
gulp.tast（ "コピー-JS"、（）=> {
gulp.src（」./ JS / ** / * "）
.pipe（CONCAT（"主を、JS "））
.pipe（gulp.dest（" DIST / JS「））
}）
`` `
###圧縮JS
追加モジュールcnpm I飲み込む-uglify -S
JS圧縮モジュール
`
Gulp.tast（ "JS-コピー"、（）=> {
gulp.src（」./ JS / ** / * "）
.pipe（" concat.js "）
.pipe（"主（uglify JS "））
.pipe（gulp.dest（" DIST / JS「））
}）
`` `
###とJSファイル名の変更を圧縮
`
gulp.tast（ "コピーJS"、（）=> {
gulp.src（」./ JS / ** / * "）
.pipe（"連結（」main.js「）」）
.pipe（ gulp.dest（ "DIST / JS"））
.pipe（uglify（））//压缩JS
.pipe（CONCAT（ "main.min、JS"））
.pipe（gulp.dest（ "DIST / JS"））
}）
`` `
## 5.4グッ/ロバ---图片
###复制图片到DIST /資産
`
gulp.task（ "コピーイメージ"（）=> {
gulp.src（」./資産/ ** / * "）
.pipe（gulp.dest（" DIST /資産」））
}）
`
###圧縮画像
モジュール添加
CNPM I GULP-imageminが-S
`
必要（ "GULP-imagemin"）imagemin CONST =
gulp.task（ "コピーイメージ"（）=> {
gulp.srcを（ "./assets/**/*"）
.pipe（imagemin（））//圧縮画像の
.pipe（gulp.dest（ "DIST /資産"））
}）
`` `
##プロセスデータ
それらのバックエンドインターフェースアナログデータ無し
複製
`
gulp.task（ "コピーデータ"、（）=> {
gulp.src（ "./データ/ ** / *"）
.pipe （gulp.dest（ "DIST /データ"））
}）
`` `
＃6.使い捨ての複数のタスクを実行する
タスク名は、任意の定義を独自のビルド書いていない
` ``
gulp.task（、 "ビルド・" [「のコピー-index ""コピー-CSS "" JSは、COPE ""コピーイメージ""コピーデータ「]、（）=> {
にconsole.log（成功）
}）
`` `
＃サーバ7.gulp
GULP -S I-接続CNPMの
サーバータスクは名前変更することはできません
`` `
gulp.task（ "サーバー"、（）=> {
connect.serverを（{
//サーバのルートディレクトリ説明
ルート： "DIST"を、
livereload：ライブ//真の更新
}）
}）
`` `
＃8は、htmlファイルの.css.js.dataを検出します。画像を変更、異なるタスクを実行します
` ``
gulp.task（ "時計"、（）=> {
gulp.watch（ "index.htmlを"、[ "コピーインデックス"]）
gulp.watch（ "./ CSS / ** / *"、[ "著作CSS "]）
gulp.watch（" ./ JS / ** / * "[ "コピー-JS"]）
gulp.watch（" ./資産/ ** / *」、[ "コピー画像"]）
gulp.watch（ "./データ/ ** / *"、[ "コピーデータ"]）
}）
``
＃9しばらくデフォルトの実行サーバーのタスクとタスク鑑賞
`` `
gulp.task（「デフォルト」を、[「サーバー」、「観る」]）
` ``
＃--- 10ホット・アップデートは自動的にページの更新
ページのCSS、JS写真の中のデータを後で文関連のタスクを追加し、サーバー再起動します
`` `
.pipe（connect.reloadを（））
` ``