npmインストールgulp - save-dev
ガープとは何ですか？
Gulpは、新世代のフロントエンドプロジェクトビルディングツールです。 Gulpとそのプラグインを使用してプロジェクトコード（Less、SASS）をコンパイルし、JSおよびCSSコードを圧縮したり、画像を圧縮することもできます。 Gulpには少量のAPIしかないため、学習が非常に簡単です。 Gulpはストリームを使用してコンテンツを処理します。 Nodeは、Bower、Yeoman、Gruntなど、多くの自動化ツールを生み出しました。
ガルプとグラントの類似点と相違点
使いやすい：Code Over Configuration Strategiesを使用して、Gulpはシンプルなものを管理しやすく保ちます。
効率的：node.jsの強力なストリームを活用することにより、中間ファイルをディスクに書き込むことなく、構造をより速く完了できます。
高品質：Gulpの厳格なプラグインガイドラインでは、プラグインがシンプルであることを確認し、期待どおりに機能します。
学習しやすい：APIを最小限に抑えることで、非常に短い時間でGulpを学ぶことができます。ビルド作業は、あなたが想像したようなものです。それは一連のフローパイプラインです。
Gulpはnode.jsで書かれているため、端末にNPMをインストールする必要があります。 NPMはnode.jsパッケージマネージャーなので、最初にマシンにnode.jsをインストールします。
GULPインストールコマンド
sudo npm install -g gulp
ルートディレクトリに新しいpackage.jsonファイルを作成します
npm init。
Gulpパッケージをインストールします
インストール後、Gulp -Vをもう一度入力して、次の図に示すようにバージョン番号を表示します。成功します。
プラグインをインストールします
一般的に使用されるプラグインをインストールします。
SASSの編集（Gulp-Ruby-Sass）
CSSプレフィックス（gulp-autoprefixer）を自動的に追加する
圧縮CSS（Gulp-Minify-CSS）
JSコード検証（gulp-jshint）
JSファイルをマージ（Gulp-Concat）
圧縮されたJSコード（gulp-uglify）
圧縮画像（gulp-imagemin）
ページを自動的に更新します（Gulp-Livereload）
画像キャッシュ、画像が交換された場合のみ（gulp-cache）
リマインダーを変更する（gulp-notify）
ファイルをクリアする（del）
これらのプラグインをインストールするには、次のコマンドを実行する必要があります。
コードコピーは次のとおりです。
$ npm install install install gulp-autoprefixer gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify
-saveおよび-save -devは、package.jsonファイルを手動で変更する手順を保存できます。
npmインストールモジュール名-save
依存関係セクションにモジュールとバージョン番号を自動的に追加します
npmインストールモジュール - ゼーブデフ
モジュールとバージョン番号をDevDependenciesセクションに自動的に追加します
ガルプコマンド
5つのガルプコマンドを知る必要があります
gulp.task（name [、deps]、fn）タスク名を定義：タスク名Deps：依存関係タスク名fn：コールバック関数
gulp.run（タスク...）：できるだけ並行して複数のタスクを実行する
Gulp.Watch（GLOB、FN）：GLOBコンテンツが変更されたら、FNを実行します
gulp.src（glob）：処理されるファイルへのパスを設定します。これは、配列の形で複数のファイルにすることができます。
gulp.dest（path [、options]）：パスを設定してファイルを生成します
グローブ：直接ファイルパスにすることができます。彼の意味はパターンマッチングです。
Pipeline（Pipe（））APIを介して、Gulp Guides関連のプラグインによって処理されるファイル。プラグインを介してファイル処理タスクを実行します。
gulp.task（ 'default'、function（）{...}）;Gulp.Task APIは、タスクを作成するために使用されます。コマンドライン（ブラケットのオプション）に$ gulp [デフォルト]を入力して、上記のタスクを実行できます。
GULP公式APIドキュメント：https：//github.com/gulpjs/gulp/blob/master/docs/api.md
ガルププラグインコレクション：http：//gulpjs.com/plugins/
プロジェクトの構築を開始します
プロジェクトルートディレクトリに新しいgulpfile.jsファイルを作成し、次のコードを貼り付けます。
//Introduce gulp and uglify plugins in the project root directory var gulp = require('gulp');var uglify = require('gulp-uglify');gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(gulp.dest('dist'));});注：gulpfile.jsファイル名は変更できません。
プロジェクトは、プラグインを使用してプラグインを変更し、次のコマンドを実行してインストールする必要があります。
npmインストール - save-dev gulp-uglifynpmインストール - save-dev gulp-rename
私の例を見て、gulpfile.jsが配置されているディレクトリを入力してください。
CD/USERS/TRIGKIT4/GULP-TEST
次に、以下を入力します。
var gulp = require（ 'gulp'）; var uglify = require（ 'gulp-uglify'）; var rename = require（ 'gulp-rename'）; gulp.task（ 'compress'、function（）{return gulp.src（ 'script/*。js'）.pipe（ ''）.pipe（ ''）.pipe（ 'js） .pipe（gulp.dest（ 'dist'））;}）;このコマンドは、次の図に示すように、すべての依存関係をpackage.jsonにインストールします。
完全なgulpfile.js
//プラグインvar gulp = require（ 'gulp'）、sass = require（ 'gulp-ruby-sass'）、autoprefixer = require（ 'gulp-autoprefixer'）、minifycss = require（ 'gulp-minify-css'）、jshint = require = 'gulp-julifie'）、uglify '）、uglify（' gglify（ = require（ 'gulp-imagemin'）、name = require（ 'gulp-rename'）、clean = require（ 'gulp-clean'）、concat = reques（ 'gulp-notify'）、requify（ 'gulp-notify'）、cache = require（ 'gulp-cache'）、livereload = require（ 'gulp-lireload'）; // Style gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4 '））.pipe（gulp.dest（' dist/styles '））.pipe（rename（{suffix：' .min '}}））.pipe（minifycss（））.pipe（gulp.dest（' dist/styles '））.pipe（notify（{メッセージ：' styles complete}）;}）; // script gulp.task（ 'scripts'、function（）{return gulp.src（ 'src/scripts/**/*。js'）.pipe（jshint（ '。js'））.pipe（jshint（ '。js'））.pipe（jshintrc '））.pipe（jshintrc'））.pipe（ 'shintrc'））.pipe（ 'shintrc'））。 .pipe（concat（ 'main.js'））.pipe（gulp.dest（ 'dist/scripts'））.pipe（rename（{suffix： '.min'}}））.pipe（uglify（））.pipe（gulp.dest（gulp.dest（ 'dist/scripts'））.pipe（{messice completer '}）; // image gulp.task（ 'image'、function（）{return gulp.src（ 'src/mages/**/*'）.pipe（cache（{optimationelevel：3、progressive：true、interlaced：true}）））））））））））））） }））;}）; // cleangulp.task（ 'clean'、function（）{return gulp.src（['dist/styles'、 'dist/scripts'、 'dist/images']、{read：false}）.pipe（clean（））;}）; //プリセットタスクgulp.task（ 'default'、['clean']、function（）{gulp.start（ 'styles'、 'scripts'、 'images'）;}）; // Guldgulp.task（ 'watch'、function（）{//すべての.scssファイルgulp.watch（ 'src/styles/**/*。scss'、['styles']）; //すべての.js files gulp.watch（ 'src/scripts/**/*。 gulp.watch（ 'src/*。js'、['scripts']）; gulp.watch（['dist/**']）。 }）;注：pipe（）は、ストリームモジュールにデータストリームを渡す方法です。最初のパラメーターはプラグインメソッドです。プラグインは、上流から流れるファイルを受信し、プロセスしてから下に流れます。
gulp.task（ 'task name'、function（）{return gulp.src（ 'file path'）.pipe（...）.pipe（...）// task.pipe（...）;}）;Gulpプラグイン
Gulp-Gh-Pages：Gulpを使用してMarkdownによってHTMLドキュメントを生成し、Gitページにアップロードします
https://github.com/shinnn/gulp-gh-pages
var gulp = require（ 'gulp'）; var ghpages = require（ 'gulp-gh-pages'）; gulp.task（ 'deploy'、function（）{return gulp.src（ './ dist/**/*'）.pipe（ghpages（））;}）;Gulp-Jadeプラグイン：JadeをHTMLファイルにコンパイルします
gulp-lessプラグイン：CSSファイルへのコンパイルを減らします
var less = require（ 'gulp-less'）; var path = require（ 'path'）; gulp.task（ 'less'、function（）{return gulp.src（ './ less/**/*。less'）.pipe（{paths：[path.join（__ dirname、 'less'、 'include'）}））））））））））;サーバーvar gulp = require（ 'gulp'）; var gls = require（ 'gulp-live-server'）; gulp.task（ 'serve'、function（）{// 1。デフォルト設定でサーブvar server = gls.static（）; // gls.static（ 'public'、3000）; server.start（）; // 2。 '.tmp']）; start（）;Gulp-Livereloadはリアルタイムで保存して更新できるため、F5を押してインターフェイスを切り替える必要はありません
gulp-load-plugins：package.jsonファイルに任意のgulpプラグインを自動的にロードする
$ npmインストール-Save-Dev Gulp-Load-Plugins
たとえば、特定のpackage.jsonファイルは次のとおりです。
{"依存関係"：{"gulp-jshint"： "*"、 "gulp-concat"： "*"}}gulpfile.jsに次のコードを追加します。
var gulp = require（ 'gulp'）; var gulploadplugins = require（ 'gulp-load-plugins'）; var plugins = gulploadplugins（）; plugins.jshint = require（ 'gulp-jshint'）; plugins.concat = require（ 'gulp-concat'）;
Gulp-Babel：GulpのBabelプラグイン、
$ npmインストール-Save-Dev Gulp-Babel Babel-PreSet-ES2015
使い方：
const gulp = require（ 'gulp'）; const babel = require（ 'gulp-babel'）; gulp.task（ 'default'、（）=> {return gulp.src（ 'src/app.js'）。公式github：https：//github.com/gulpjs/gulp