一口紹介と使い方

環境はじめに：

プロの環境：本番環境、インターネット環境の公式訪問に接続する外部ユーザーのための環境。

事前環境：外に灰色の環境にアクセスできるが、サーバーの構成が比較的低く、及びその製造他。

テスト環境：テスト環境、外部ユーザーがアクセスすることはできません、テスターに​​専用のは、バージョンが比較的安定しています。

DEV環境：開発環境は、外部ユーザーがアクセス、開発者は、バージョンが大幅に変更することはできません。

展開プロジェクトファイル

--|src (dev环境 开发环境)
    --| html 
    --| css
    --| images
    --| js
          --| js (直接写js代码的文件)
          --| lib(类库 jquery)
          --| plug(插件)
    --| data

--| dist  (pro)
    --| html
    --| css
    --| images
    --| js

一気の目的

プロジェクトをパッケージング

一気の役割

• 自動的に圧縮JSファイル
• 自動的に圧縮されたCSSファイル
• 自動的にファイルをマージ
• 自動的にコンパイルSASS ES6
• 自動的に圧縮写真
• オートリフレッシュブラウザ

使用の一口

• 一気は、ノードの環境に依存します
• あなたがマシン上で実行できることを示している地球環境でのインストールゴクゴク、ゴクゴク
  • [email protected] -gをインストールcnpm
• 各一気一気プロジェクトへの依存
• cnpmのinit -y（グローバルがインストールされている）：プロジェクトはpackage.jsonファイル、コマンドを初期化するようになった前に、
  • 注：[パケッ​​ト]依存生産手段をインストールcnpm --save
  • 注：インストールcnpm [パケット] --save-devのマウント依存の開発環境

一気の設定

• プロジェクトのルートディレクトリ内のjsファイル、ファイル名gulpfile.jsゴクゴクプロファイルを作成します。

  //引入模块
  const gulp = require('gulp');
  
  
  //异步执行：文件的转存 ： 把src/html里面的index.html 转存到 dist/html/
  gulp.task('copyfile',() => {
      //文件的转存
      //找到文件所在的路径
      gulp
   //执行命令 ： gulp copyfile   
   .src('./src/html/index.html')
          //转存
          .pipe(gulp.dest('./dist/html'))
  })

一気命令

ゴクゴクタスクを作成するタスク（）

参数1 ; 任务的名称
参数2 : 当前任务依赖的其他任务 ['任务1','任务2']
参数3 : 回调函数 当前任务所执行的代码

ファイルのパスを見つけるためのSRC（）

パイプ（）関数パイプライン

DEST（）ダンプファイル

（）リッスンを見ます

参数1 : 监听哪些文件发生变化
参数2 : 文件变化的时候执行哪些任务 ['任务1','任务2]

监测

拡張のsrc一致

1. 単一のファイル：「./src/js/1.js」

2. すべてのファイルにマッチします：「*」すべてのjsファイル./src/*.js SRC

3. 「**」ゼロ個以上のサブフォルダにマッチします

   src/**/*.js  src下面的0个或者多个子文件夹里的js文件

4. 属性マッチングの複数：{}

src/*.{jpg,png,gif}  src下面所有的jpg png gif

一息にはファイルをコピーします

 const gulp = require('gulp');
 
 文件的转存 ： 把src/html里面的index.html 转存到 dist/html/
    gulp.task('marge',() => {
        //文件的转存
        //找到文件所在的路径
        gulp
            .src('./dist/css/*')
            //转存
            .pipe(gulp.dest('./dist/marge'))
    })

一気の画像圧縮

const imgmin = require('gulp-imagemin');

第一次压缩的命令：cnpm install gulp-imagemin --save-dev

gulp.task('imgMin',() => {
    gulp
        //路径的查找
        .src('./src/images/*.png')
        .pipe(imgmin())  //执行压缩
        .pipe(gulp.dest('./dist/images'))
})

添加浏览器前缀
npm install --save-dev gulp-autoprefixer

一気のjsファイル圧縮

const jsmin = require('gulp-uglify');

第一次压缩：cnpm install gulp-uglify --save-dev

//js压缩
gulp.task('jsMin',() => {
    gulp
        .src('./src/js/js/*.js')
        .pipe(jsmin())  //js压缩
        .pipe(gulp.dest('./dist/js'))
})

一気のCSSファイル圧縮

const cssmin = require('gulp-clean-css');

第一次命令：cnpm install gulp-clean-css --save-dev

//css文件的压缩
gulp.task('cssMin',() => {
    gulp
        .src('./src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})

組み合わせ一気ファイル

const concat = require('gulp-concat');

第一次命令 : cnpm install gulp-concat --save-dev

//文件的合并
gulp.task('conCat',() => {
    gulp
        .src('./src/js/js/{demo1,demo2}.js')
        .pipe(concat('all.js')) //并的文件的名称
        .pipe(jsmin())
        .pipe(gulp.dest('./dist/js'))
})

ES6エスケープ

es6代码不能直接压缩 要先转义 再压缩

const es6 = require('gulp-babel');

第一次命令 : cnpm install --save-dev gulp-babel @babel/core @babel/preset-env

//es6编译
gulp.task('ES6',() => {
    gulp
        .src('./src/js/js/demo1.js')
        .pipe(es6({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./dist/js'))
})

ブラウザプレフィックスを追加ゴクゴク

const autofixer = require('gulp-autoprefixer');

第一次命令 : cnpm install gulp-autoprefixer --save-dev 

var gulp = require("gulp");  //引入gulp
var autoprefixer = require("gulp-autoprefixer");  //引入插件

//gulp autoFx 自动添加css浏览器兼容前缀，并将添加后的最终.css文档保存在dist文件夹中
gulp.task("autoFx",function(){
    gulp.src("*.css")
        .pipe(autoprefixer())
        .pipe(gulp.dest("dist/"))
})

オープンサービスを飲み込みます

gulp.task('server',() => {
    serverstart.server({
        //路径
        root : './',
        port : 8888,
        livereload : true
    })
})

npm install --save-dev gulp-webserver
gulp.task('webserver',() => {
    gulp.src('./src')
    .pipe(webserver({
        livereload : true,
        proxies:[
            {
            source : ''
            target : ""
          }
        ]
    }))
})

エクスポートタスク

 gulp.task('default',['imgmin','jsmin','cssmin'])

パッケージを見ます

gulp.task('ddd',() => {
    // return watch('./src/css/style.css',() => {
    //     gulp.start('cssMin');
    // })
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
})
//监听多个文件的变化，执行多个任务
//封装起来

function gulpWatch(src,task){
    return watch(src,() => {
        gulp.start(task)
    })
}