まず、サードパーティ製のモジュールをがぶ飲み
基づいてフロントエンドノードのプラットフォームのビルドツール
機械化作業への書き込み操作、あなたは機械の操作を自動的に行うことができるタスクを実行するコマンドラインのコマンドを実行し
、開発効率を向上させるために、機械ではなく、手でします。
第二に、ガルプを何
ライン上のプロジェクト、HTML、CSS、JSファイル圧縮マージ
構文変換（ES6、あまり...）
公共ファイルが引っ張られ
、自動的にリフレッシュファイルブラウザを変更します
三、ガルプ使用
- 一気一気のダウンロードライブラリをインストールNPM使用
- プロジェクトのルートディレクトリにgulpfile.jsファイルを確立します
- ソースドキュメントの復興プロジェクトファイルのフォルダ構造は、ファイル、ディレクトリdistのSRCディレクトリに置かビルドを配置しました
- タスクgulpfile.jsファイルを書きます。
- ガルプはコマンドラインツールでタスクを実行します
第四に、ガルプ提供方法
gulp.src（）：ファイルのタスクを処理する取得
）（gulp.dest：出力ファイル
gulp.task（）：ゴクゴクタスクの確立
（gulp.watchを）：監視ファイルの変更
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});
第五に、一部ガルププラグ
一息-htmlmin：HTMLファイル圧縮
一気-csso：圧縮CSS
GULP-バベル：JavaScriptシンタックス変換
一気レス：以下の構文変換
一気-uglify：JavaScriptの混乱圧縮
GULP-FILE-ファイル公共含ん含まれ
browsersyncブラウザのリアルタイム同期が
より多くの持っています参照.npmjs.comは、ここだけでゴクゴクプラグインの操作方法を学ぶために、ウェブ、より多くの豊富なプラグインがあります。
（1）グッ-htmlmin：HTMLファイル圧縮、グッ-ファイル挙げ含有公開ファイル
実行する最初のコマンドを
npm install gulp-htmlmin
npm install gulp-file-include
コードを編集します
htmlファイルでは、公共common.html内のコードを保存します。
HTMLのプラスボディに参照する必要があります
@@include('./common/header.html')
const htmlmin = require('gulp-htmlmin');
//html任务
//1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
//抽取html文件中的公共代码
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
});
（2）グッ-csso：圧縮CSS、グッレス：構文変換少ない
最初の実行コマンド
npm install gulp-csso
npm install gulp-less
コードを編集します
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1.less语法转换
//2.css代码压缩
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
（3）一気-バベル：JavaScriptシンタックス変換、一息-uglify：圧縮混同JavaScriptの
コマンドの最初の実行
npm install --save-dev gulp-babel @babel/core @babel/preset-env
npm install --save-dev gulp-uglify
コードを編集します
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
