フロントエンドエンジニアリングアプリケーションのgulp4で

序文

    UIコンポーネントライブラリを開発する準備ができて、最近ブロガーは、問題が発生し、ブロガーではなく、一緒にパッケージWebPACKのコンポーネントを使用するよりも、別のコンポーネントのスタイルSCSSファイルをパックしたいです。研究はその一口がでgulp4アプリケーションのフロントエンドエンジニアリングに師事し、その後、この問題を解決することができました。

1.はじめに

     グッを構築するフローベースの自動化ツールであり、ベースnodeJsに対してデータを読み書きするストリーム（ストリーム）イサキ直接IOが速くなり、ファイルの読み書き。
    GULPにより、我々は、自動完了することができますJS / SASS /以下/ CSSの、テストファイルをチェックし、マージ、圧縮、書式設定、およびこれらの工程を監視変更した後、指定されたファイルを繰り返しています。
    飲み込むとWebPACKの最大の違いは、一口ではなく、CSS /以下/画像リソースとのWebPACKのような他の非JSクラスモジュラーパッケージとして反射されます。
    その上、個別に包装SASS /以下/ CSS、圧縮画像、HTML形式の圧縮と：アプリケーションシナリオを飲み込みます。

2.一息をインストールします。

グローバル・インストール一息

$ NPMインストールゴクゴク-g

：依存開発プロジェクト（devDependencies）インストールとして

$ NPM一息をインストール--save-devの

ビュー一気バージョン（ 注意：より大きな差gulp4とgulp3は、記事セクション4を参照してください ）

$一気-v CLIバージョン：2.2.0 ローカルバージョン：4.0.2

新 gulpfile.js

// 定义default任务（gulp4)
gulp.task('default', async() => { 
    await ...
});
复制代码

実行GULP（デフォルトのデフォルトのタスクの実行）

$の一気

3.共通API

• gulp.src（グロブ[、オプション]）
  ディレクトリ内のファイルを読み込みます
• gulp.dest（パス[、オプション]）
  ファイルのディレクトリに書き込まれます
• gulp.task（名前、[、DEPS] FN）は、
  タスクグッを定義します
• gulp.pipe（）
  プラグイン処理によってオブジェクトファイル
• gulp.watch（グロブ【、オプト]、タスク） またはgulp.watch（グロブ[、オプト、CB ]）
  ファイルシステムを監視し、変更がファイル内に発生したときの動作を実行することができます
• gulp.series（タスク1、タスク2、TASK3） （gulp4 新）
  シリアルミッション
• gulp.parallel（タスク1、タスク2、TASK3） （gulp4 新しいの）
  タスクの並列実行

4.gulp3とglup4

gulp3および変更gulp4は、主にシステムのタスク定義および実装の変化を反映しています。

タスク定義と実行順序4.1gulp3

gulp3タスクでは、タスクシーケンスは、タスクの実行のみタスクを実行依存完成しました。

タスク定義をgulp3：

// gulpfile.js文件
const gulp = require('gulp');

// 定义task1任务
gulp.task('task1', function() {
  console.log('task1');
});

// 定义task2任务
gulp.task('task2', function() {
  console.log('task2');
});

// 定义default任务，依赖于task1任务和task2任务
gulp.task('default', ['task1', 'task2'], function() {
  console.log('done');
});
复制代码

gulp3タスクが実行：

実行順序：
スタートタスク1 =>完了タスク1 =>スタートTask2の=>完了タスク2 = [スタート]> [デフォルト=>デフォルトの完了

タスク定義と実行順序4.2gulp4

gulp3タスク定義でgulp4は、もはやサポートおよび実装に依存しません。
まだgulp3方法を使用するタスクの定義を考えてみましょう：

gulp.task('task1', function() {
  console.log('task1');
});
复制代码

実行TASK1、エラーあなたは非同期完了を通知することを忘れていましたか？

解決策：使用して非同期で待つタスクを定義し、

// 定义task1任务
gulp.task('task1', async() => {
  await console.log('task1');
});
复制代码

成功したタスク1、ミッションを実行します。

gulp4タスクの実行はもはや代わりにシリアル実行を（使用する、実装依存で使用されているgulp.series）と並列実行（gulp.parallel2つの方法で）。
（1）シリアル（シーケンシャル）の実行は、異なるgulp3を実行するためには、まず、最終的にデフォルトのタスクを終了し、タスク1、タスク2タスクの順序を実行し、タスクをデフォルトに始めました。

gulp3実装依存として採用した場合、報告されますgulp4 タスク機能を指定する必要があります エラーを。

解決策：
使用 gulp.series('task1','task2') または gulp.parallel('task1','task2') gulp3で、代わり gulp.task('default', ['task1', 'task2'], function() {... }) の方法。
シリアル実行（ gulp.series ）：

const gulp = require('gulp');

// 定义任务task1
gulp.task('task1', async() => {
  await console.log('task1');
});

// 定义任务task2
gulp.task('task2', async() => {
  await console.log('task2');
});

// 串行执行task1、task2任务
gulp.task('default', gulp.series('task1', 'task2'));
复制代码

結果：

実行順序は：
デフォルト=>スタートタスク1 =>完了タスク1 =>スタートTask2の=>完了タスク2 =>デフォルトの終了を開始します

（2）最初のタスクをデフォルトし、次いで並列タスク、および終了デフォルトのタスクを実行するために同期し始め、並行して実行されます。

パラレル実行（ gulp.parallel ）：

const gulp = require('gulp');

// 定义任务task1
gulp.task('task1', async() => {
  await console.log('task1');
});

// 定义任务task2
gulp.task('task2', async() => {
  await console.log('task2');
});

// 并行执行task1、task2任务
gulp.task('default', gulp.parallel('task1', 'task2'));
复制代码

結果：

実行順序：
[スタートデフォルト=>スタートタスク1 =>スタートTask2の=>完了タスク1 =>完了タスク2 =>デフォルトの完了

重要：
非同期採用1.gulp4定義されたタスクは、タスクを定義待ちます。
（シリアルで行わ2.gulp4タスクgulp.series）と並列実行（gulp.parallel）モードでは、合理的な直列及び並列構成によって実行依存gulp3で実現することができます。

    次は一気詰めJS、CSS、画像、HTMLとどのように生産・開発環境設定でゴクゴクの記述方法を使用する方法を模索します。

5.gulp検出され、変換され、パッケージ化され、圧縮されたJS

プラグインが必要です：

• 一息-eslint：eslint検出
• 一息-バベル：バベル変換
• 一息化連結：マージされたファイル（JS / CSS / HTMLなど）
• 飲み込む-uglify：圧縮JS

機能：
ディレクトリDISTをマージするapp.min.js出力に圧縮カレントディレクトリmain.js、hello.js、検出のためのeslintをworld.js、変換バベル、

const gulp = require('gulp');
const babel = require('gulp-babel'); // babel转换
const eslint = require('gulp-eslint'); // eslint检测
const concat = require('gulp-concat'); // 合并文件
const uglify = require('gulp-uglify'); // 压缩js
const del = require('del'); // 清空目录

// 合并压缩的文件
const jsFiles = ['./main.js', './hello.js', './world.js'];

// eslint任务，实现eslint检测和代码格式化
gulp.task('eslint', async() => {
  await gulp.src(jsFiles)
            .pipe(eslint())
            .pipe(eslint.format()) // 格式化
            .pipe(eslint.failAfterError()); // 报错
});

// clean任务，清空dist文件夹
gulp.task('clean', async() => {
  await del(['./dist/']);
});

// jsCompress任务，实现js转换、合并、压缩
gulp.task('jsCompress', async() => {
  await gulp.src(jsFiles)
            .pipe(babel({
              presets: ['@babel/env'] // es6转换为es5
            }))
            .pipe(concat('app.min.js')) // 合并为app.min.js
            .pipe(uglify()) // 文件压缩
            .pipe(gulp.dest('./dist/')) // 文件写入到dist文件夹
});

// 顺序执行clean、eslint、jsCompress任务
gulp.task('default', gulp.series('clean', 'eslint', 'jsCompress'));

复制代码

一気、タスク実行の成功を実行します。app.min.jsの下に作成distのフォルダに
 

6.gulp変換、組み合わせ、SCSS / CSSを圧縮

プラグインが必要です：

• 一息-SASS：サスのコンパイル
• 飲み込む化連結：ファイルをマージ
• 飲み込む-クリーンCSS：CSSの圧縮

機能を実現する：
（1）main.scssカレントディレクトリ、style.scss変換CSSは次にscss.cssのdistディレクトリに圧縮書き込みに合わせました。
（2）現在のすべてのCSSファイルディレクトリを合わせstyle.min.cssのdistディレクトリに圧縮に書き込まれます。

const gulp = require('gulp');
const concat = require('gulp-concat'); // 合并文件
const cleanCss = require('gulp-clean-css'); // 压缩css
const sass = require('gulp-sass'); // sass编译
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
   await del(['./dist']);
});

// sass任务，实现scss文件编译、合并、压缩
gulp.task('sass', async() => {
  await gulp.src(['./main.scss', './style.scss'])
            .pipe(sass()) // sass编译
            .pipe(concat('scss.css')) // 合并为scss.css
            .pipe(cleanCss()) // 压缩css文件
            .pipe(gulp.dest('./dist'));
});

// css任务，实现css合并、压缩
gulp.task('css', async() => {
  await gulp.src(['./*.css'])
            .pipe(concat('style.min.css')) // 合并为style.min.css
            .pipe(cleanCss()) // 压缩
            .pipe(gulp.dest('./dist'));
});

// 先执行clean任务，再并行执行sass和css任务
gulp.task('default', gulp.series('clean', gulp.parallel('sass', 'css')));
复制代码

一気、タスク実行の成功を実行し

scss.cssとstyle.min.cssファイルの下に作成distのディレクトリに。
 

7.gulp圧縮HTML、画像

プラグインが必要です：

• 一息-htmlmin：HTML形式の圧縮
• 一息-imagemin：画像圧縮

機能を実現する：
（1）distディレクトリで圧縮出力を現在のHTMLディレクトリを実装する
（2）distディレクトリにPNG画像出力の電流頭を達成します

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin'); // html压缩
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
  await del('./dist');
});

// html任务，压缩html文件代码
gulp.task('html', async() => {
  await gulp.src('./*.html')
            .pipe(htmlmin({ collapseWhitespace: true })) // 压缩去除空格
            .pipe(gulp.dest('dist'));
});

// image任务，压缩图片
gulp.task('image', async() => {
  await gulp.src('./*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist'));
})

// 先串行执行clean任务，后并行执行html和image任务
gulp.task('default', gulp.series('clean', gulp.parallel('html', 'image')));
复制代码

ゴクゴクを実行し、タスクの成功の実装は

distのディレクトリに圧縮されるようになったHTMLファイルや画像を膨潤
 

生産・開発環境でのアプリケーション8.gulp

開発環境と本番環境のためのフロントエンドの開発プロセスは、多くの場合、異なる設定されている：
開発環境：ローカルサービス、デバッグのサポート、ホット・アップデートから。
生産：展開ライン環境用のマージコードを圧縮。
プラグインが必要です：

• デル：空のディレクトリ
• 一息-eslint：eslintコード検出
• グッ-バベル：バベル変換、コードES6のES5に
• 飲み込む化連結：ファイルをマージ
• 飲み込む-uglify：JS圧縮
• 一息-SASS：サスのコンパイル
• 飲み込む-クリーンCSS：CSSの圧縮
• 一息-htmlmin：HTML形式の圧縮
• 一息-imagemin：画像圧縮
• gulp.connect：サーバーからサービスを試運転

機能を実現する：
（1）JS eslint検出、バベル変換、合成、圧縮を達成
（2）結合及び圧縮SASSコンパイルおよびCSSを達成するために、
（3）HTML圧縮を実装
（4）画像圧縮を実現
（5）開発環境プレビュー、ホット更新
（ 6）個々のファイルの生産は、環境を詰め

const gulp = require('gulp');
const babel = require('gulp-babel'); // es6转为es5语法
const eslint = require('gulp-eslint'); // eslint代码检测
const concat = require('gulp-concat'); // 文件合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass'); // sass编译
const htmlmin = require('gulp-htmlmin'); // html压缩
const connect = require('gulp-connect'); // 起server服务
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录
const cleanCss = require('gulp-clean-css'); // css压缩

// 清空dist目录
gulp.task('clean', async() => {
 await del(['./dist']);
});

// html压缩公共函数
const htmlMin = () => {
 return gulp.src('./index.html')
            .pipe(htmlmin(
                 {collapseWhitespace: true}
                 ))
            .pipe(gulp.dest('dist'));
};

// html:dev task，用于开发环境下，浏览器自动刷新
gulp.task('html:dev', async() => {
 await htmlMin().pipe(connect.reload());
});
// html:build task，用于生产环境
gulp.task('html:build', async() => {
 await htmlMin();
});

// sass转换、合并、压缩css公共函数
const cssMin = () => {
 return gulp.src(['./css/style.scss', './css/*.css'])
            .pipe(sass())
            .pipe(concat('style.min.css'))
            .pipe(cleanCss())
            .pipe(gulp.dest('./dist/css'))
};

// css:dev任务，用于开发环境
gulp.task('css:dev', async() => {
 await cssMin().pipe(connect.reload());
});
// css:dev任务，用于生产环境
gulp.task('css:build', async() => {
 await cssMin();
});

// js eslint检测、babel转换、合并、压缩公共函数
const jsMin = () => {
 return gulp.src('./js/*.js')
            .pipe(eslint())
            .pipe(eslint.format())
            .pipe(eslint.failAfterError())
            .pipe(babel({
               presets: ['@babel/env']
             }))
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'));
};

// js:dev任务，用于开发环境
gulp.task('js:dev', async() => {
 await jsMin().pipe(connect.reload());
});
// js:build，用于生产环境
gulp.task('js:build', async() => {
 await jsMin();
});

// 图片压缩公共函数
const imageMin = () => {
 return gulp.src('./img/*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/img'));
};

// image:dev任务，用于开发环境
gulp.task('image:dev', async() => {
 await imageMin().pipe(connect.reload());
});
// image:build任务，用于生产环境
gulp.task('image:build', async() => {
 await imageMin();
});

// server任务，目录为dist，入口文件为dist/index.html，port 8080
gulp.task('server', () => {
  connect.server(
   {
     root: './dist',
     port: 8080,
     livereload: true
   }
 )
});

// watch任务，监听源文件变化，执行对应开发任务
gulp.task('watch', () => {
 gulp.watch(['./css/*.css', './css/*.scss'], gulp.series('css:dev'));
 gulp.watch('./js/*.js', gulp.series('js:dev'));
 gulp.watch('./index.html', gulp.series('html:dev'));
 gulp.watch('./img/*.png', gulp.series('image:dev'));
});

// dev任务，启动开发环境
gulp.task('dev', gulp.series(gulp.parallel('watch', 'server')));

// build任务，用于生产环境下打包压缩源代码
gulp.task('build', gulp.series('clean', gulp.parallel('html:build', 'js:build', 'css:build', 'image:build')))
复制代码

カレントディレクトリでDEVを追加して、コマンドを構築するためのスクリプトをpackage.json：

"scripts": {
   "dev": "gulp dev",
   "build": "gulp build"
 },
复制代码

実行はnpm run dev、あなたが開発モードを起動することができ、我々はソースHTML、CSS、JSおよびその他の文書を変更すると、対応するタスク再パッケージ化パッケージ、自動的に更新ブラウザを実行します。


実行npm run buildソースコードディレクトリパッキングで、。
HTMLはdistのフォルダ内のパッキングプロセス、CSS、JS、画像やその他のリソースが含まれています。
 

    これらは、ブロガーは、フロントエンドエンジニアリングのgulp4の適用を検討しています。記事を読んだ後、私は少しフォロー興味パートナーはまた、WebPACKの構成に統合がぶ飲みを検討することができ、より良い開発効率を向上させるために、我々は予備的な理解ゴクゴクを持つべきであると考えています。

送信元アドレス

中国のネットワークを飲み込む：www.gulpjs.com.cn

（おかげで、多くの場合、グレー、素敵な小さなパートナーは、この記事のようなポイントだけでなく、githubのスターの外観を与えることができると思います^ _ ^）

ます。https：//juejin.im/post/5ce92417f265da1ba328a0e0で再現