node.jsをインストールします
まず、node.jsをインストールする必要があります。一般的に言えば、インストールパッケージをダウンロードして、node.jsの公式Webサイトにインストールするだけです。しかし、私は恥ずかしく失敗し、次のエラーが発生しました：
だから私はbrew dafaに変更しました：
brew install nodejs
Gulpをインストールします
Gulpは、node.jsのNPMコマンドを使用してインストールされます。
NPMインストール-Global Gulp
次に、プロジェクトディレクトリにインストールします。
npmインストール - save-dev gulp
私はこのステップについてかなり困惑しています。コーダーとしての私の長年の経験により、たとえグローバルインストールがインストールされていても、それを使用する場所で利用できるはずです。しかし、ガープは明らかにそうではありません。 Project Directoryでこのステップを実行しない場合、Gulpコマンドを使用すると、次のエラーがプロンプトされます。
…地元のガルプはにありません…
…実行してみてください：NPMインストールGULP
最後に、Project DirectoryでGulpコマンドを実行します。次のコンテンツが出力されている場合、インストールが完了したことを意味します。
…gulpfileは見つかりませんでした
簡単な例
以下は、Gulpの使用を使用して静的Webサイト開発サーバーを構築し、Live Refresh（Livereload）機能をサポートしています。
まず、LiveroAd用のブラウザプラグインをインストールする必要があります。プラグインアドレスは、http：//livereload.com/extensions/で、Chrome、Firefox、およびSafariの3つの主要なブラウザーをサポートしています。プラグインがインストールされると、ブラウザにボタンが表示されます。このボタンには2つの状態があります。ソリッドドットは、プラグインが有効になっていることを示し、中空のドットはプラグインが有効になっていないことを示しています。覚えておいてください！
次に、単純なプロジェクト構造を作成します。
./gulpfile.js./public/./public/index.html
次のコマンドを使用して、Gulpおよび関連コンポーネントをインストールします。
npmインストール - save-dev gulp gulp-connect
Gulp-Connectは、静的なWebサーバー関数を提供し、Livereload関数を統合するGulpプラグインです。
次に、gulpfile.jsファイルを編集する必要があります。コンテンツは次のとおりです。
var gulp = require（ 'gulp'）、connect = require（ 'gulp-connect'）gulp.task（ 'server'、function（）{connect.server（{root： 'public'、livereload：true}）}）gulp.task（ 'html'、function（）{ gulp.src（ './ public/*。html'）。pipe（connect.reload（））}）gulp.task（ 'watch'、function（）{gulp.watch（['./ public/*。html']、['html']}）最後に、このWebサーバーを実行します。
ガルプ
ブラウザを開き、http：// localhost：4000にアクセスします。次に、index.htmlファイルのコンテンツを変更して保存してください。通常の状況では、ブラウザ側は修正されたコンテンツを自動的に更新して表示する必要があります。
ガルプとグラントの簡単な比較
例を見てみましょう。それぞれガルプでsassを構築し、うなり声を上げます。
grunt：
sass：{dist：{options：{style： 'expanded'}、files：{'dist/css/main.css'： 'src/styles/main.scss'、}}}、autoprefixer：{dist：{options：{browsers：['last 2バージョン'、 'safar 12.1 '、' iOS 6 '、' android 4 ']}、src：' dist/css/main.css '、dest：' dist/assets/css/main.css '}}、grunt.registertask（' styles '、[' sass '、' autoprexer '];Gruntは、プラグインを個別に構成し、そのソースと宛先パスを指定する必要があります。たとえば、プラグインSASSと出力結果を保存するための入力としてアーカイブを使用します。 Autoprefixerをセットアップするときは、SASSの出力を入力として使用して新しいファイルを生成する必要があります。 Gulpの同じ構成を見てみましょう。
ガープ：
gulp.task（ 'sass'、function（）{return gulp.src（ 'src/styles/main.scss'）.pipe（sass（{style： 'compressed'}}））.pipe（autoprefixer（ 'last 2バージョン'、 'safari 5'、 'ie 8'、 '' and '' and ''） '）'） '） .pipe（gulp.dest（ 'dist/assets/css'））}）;Gulpでは、ファイルを入力するだけです。プラグインSASS処理後、プラグインAutoprefixerに渡され、最後にファイルが取得されます。このプロセスにより、構築プロセスが高速化され、不要なファイルの読み取りと書き込みが排除され、最終ファイルのみが必要です。