一気のビルド・ツールは、自動化されたノードに基づいています
一息をやってすることができますか？オートリフレッシュのブラウザ1.圧縮JS、CSSファイル2. 3.マージファイルは自動的にSASS4をコンパイルします。5.保存を自動的に画像を圧縮
NPMは、init ---->ファイルpackage.json作成、ゴクゴク環境を初期化
package.jsonの中に格納されている情報：--save
--dev：package.jsonでdevDependenciesノードの情報を
もちろん、それを一息それとの位置を与えるために！gulpfile.jsは通常のJSファイルのルートディレクトリに配置されてゴクゴクプロジェクトの設定ファイルである
通常gulpfile pakageが一緒に3つのファイルをnode_modulesです。
展開ファイルを追加します。
1の入力ソース
入力ソース（ファイルパス操作）gulp.src（ファイルパス）
、処理対象のパスを指定してSRCソースファイル、参照GULP Unixオペレーティングシステムのパイプ（管）思考、前段の出力、現在のファイルを返すgulp.src直接に入力され、後にプラグ流に利用可能である
ファイルパス設定：
、単一のフォルダ：「SRC / JS / index.js」;
B、一致するすべてのドキュメント：「*」の例： 。SRC / * JS --->すべて下記のsrcが、ファイルJS
、Cをゼロまたはそれ以上のサブフォルダに一致します。/ ** / * jsの"**"たとえば:. SCR ---> SRC または0を下記サブフォルダのJSファイル複数の
D、一致する複数の属性：{}例：SRC / {A、B}の.js ---> SRC 、以下a.js b.js SRC / * {JPG、PNG 、。 GIF} ---> SRC gifファイルをPNG形式以下のjpgのすべて
の電子を、ファイルを除外し:! 例えば:! Scr.a.js ---> a.js文書下に除外SRC
2、導管を介して入力
パイプ：パイプ（）
。3、ソース出力：出力パラメータはファイルである
DEST（）
栗：
コピー:. Gulp.src（ "SRC / ** / *"）、パイプ（gulp.dest（ "DIST / JS"））
合并：gulp.task（ "addDate"、関数（）{
gulp.src（[ "SRC / JSON / ** / *"、 "SRC / XML / ** / *"]）
.pipe（gulp.dest（」 DIST /データ"））
}）
高度を飲み込む：--->もちろん、あなたがプラグインをロードする必要があります！！！！！
---画像圧縮1.プラグインストールGULP-imagemin --save CNPM DEV-
VAR = imgmin（ "GULP-imagemin"）が必要; --->画像圧縮モジュールに組み込ま
gulp.task（ "imgmin"、関数（ ）{
//すべての画像の圧縮
gulp.srcを（ "SRC / IMGS / ** / *"）
//第1パイプラインの圧縮を通じて、その後、INFO_PRINT_COMMANDを通じてdistのフォルダ
.pipe（imgmin（））
。パイプ（gulp.dest（ "DIST / IMGS"））
}）
---圧縮は、インストールコマンドラインインストールGULP-uglify --save CNPM DEV- 2.Js
--->のJS圧縮モジュールに組み込ま; VAR = JSMin（ "GULP-uglify"）が必要
gulp.task（ "Jsmin"、機能を（）{
//全てのJS圧縮
gulp.src（ "SRC / JS / JS *の.js"）
//最初の圧縮によって導管、及び導管を介しDISTフォルダに出力さ
.pipe（jsMin（））
.pipe（gulp.dest（ "DIST / JS / JS"））
}）
3.コンパイルおよび圧縮SASS ---- CSS> CNPMインストールGULP-SASS中国--save-DEV-
VAR =必要とCSS（ "GULP-SASS-中国"）//導入SASSコンパイルされたモジュール
//オープンタスクを
飲み込みます。タスク（ "cssmin"、関数（）{
// SCSSのSCSSのSASS以下のすべてのファイルがコンパイルされ
gulp.src（ "SCSS / ** / *。{SCSS、サス}"）
//パイプを介してコンパイルし、次いでパイプで連結されたが、SRC / CSSのフォルダ内にある
転送したい場合は、CSSのコンパクトな形式で圧縮された圧縮パラメータ、その後、//
.pipe（CSS（{
： "圧縮" outputStyle
）}）
.pipe（gulp.dest（ " SRC / CSS「））
}）
4.リスナーに
あなたが変更SASS内のファイル、CSSファイルを書き込む場合は、上記のコンパイルとSASS圧縮ではなく、することができますが！そして、両方の端末を毎回実行する必要があります。特に面倒。まず一人での作業と併せて使用することができますが存在しません聞いて！
/ *
リスナー：gulp.watch（）
の二つの引数：ファイルがどのタスクを実行するために変更されたとき「（の集合）---変更されたものをファイル1. 2.モニター
* /
gulp.task（」SCSS」 、関数（）{
gulp.task（ "SCSS / ** / *。{SCSS、サス}"、[ "cssmin"]）
}）
サーバー---> cnpm一気-接続--saveインストール
-devの ：パラメータを
ディレクトリに設定：ルートの
ポート：ポート番号
livereloadを：trueに設定すると、自動的に変更がファイルを飲み込むと、自動的にソースを構築検出し、
/ *ローカルサーバ* /設定する
; VAR =必要とする（ "GULPコネクト"）を接続
gulp.task（ "サーバ"、関数（）{
connect.sercer（{
"SRC"、//パス：ルート
ポート：123、//ポート数
livereload：真、//ファイル変更検出
}）
}）
6.オートリフレッシュ
/ *ローカルサーバ* /セットアップ
VAR =）を必要とする（ "GULPコネクト"を接続し、
gulp.task（ "サーバ"、関数（）{
接続.server（{
ルート： "SRC"、
ポート：123、
livereload：trueに、
}）
}）
/ *自動更新* /
//サーバー+サービスへの注意を払って時計は一つだけリスナーことができる
ので、我々はリフレッシュする必要があり、2つの部分に開いたサーバー//
gulp.task（「サーバー・ウォッチ」、 funcion（） {
gulp.watch（ "SRC / index.htmlを"関数（）{
gulp.src（ "SRC / index.htmlを"）、パイプ（connect.reload（））
}）
gulp.task（ "タスクサーバ"、 [ "サーバ"、 "サーバ-ウォッチ"]）
7.转义ES6グッ-バベル---> cnpmインストール--save-DEVグッ-バベルする@バベル/コアする@バベル/プリセットのenv
CONSTのグッ=必要とする（ 'グッ'）。
CONSTバベルは=（「グッ-バベル」）を必要とします。
gulp.task（ 'バベル'、（）=>
gulp.src（ 'SRC / es6.js'）
.pipe（バベル（{
プリセット：[ '@のバベル/ ENV']
}））
.pipe（gulp.dest（ 'DIST'））
）;
}）
この記事では、基準華の弟のためにある、理由コードは、システムを体験するのは簡単ですが、また覚えやすいです！！