轉自  華哥https://www.cnblogs.com/nanianqiming/p/8028536.html

什麼是gulp？

基於node的自動化構建工具   擴充套件：開發的時候分為2個節點一個是開發階段  另一個是部署階段        開發階段：原始檔不會被壓縮            部署階段：所有檔案需要壓縮

002、gulp能幹什麼？

1  自動壓縮JS檔案 2  自動壓縮CSS檔案 3  自動合併檔案 4  自動編譯sass 5  自動壓縮圖片 6  自動重新整理瀏覽器 ...........

003、怎麼安裝gulp？

  因為它基於nodeJS，因此需要先安裝node環境   安裝完成後，開啟你的命令列視窗   輸入： node -v   檢測一下node是否安裝好了

004、npm

npm:      nodejs的包管理器   使用npm安裝外掛命令      ：npm install <name> -g  全域性安裝      ：npm install <name> --save-dev：區域性安裝   由於網路經常不好，考慮把npm換成cnpm，可以使用淘寶提供的映象伺服器   npm install -g cnpm --registry=https://registry.npm.taobao.org   裝完檢視版本，驗證是否安裝正確 cnpm -v

005、初始化資料夾

　　npm init   　　作用：初始化一個gulp環境   建立一個package.json檔案

006、區域性安裝gulp

　　　　npm install <name> --save-dev：區域性安裝        --save：將儲存配置資訊至package.json            -dev：儲存至package.json的devDependencies節點         這個過程需要等待一小會。可以先喝口水解解渴

007、新建gulpfile檔案(重要)

　　gulpfile.js是gulp專案的配置檔案，是位於專案根目錄的普通js檔案   　　gulpfile   package   node_modules 三個檔案一般放在一起

008、新增部署檔案

1、輸入源      輸入源(操作的檔案路徑)  gulp.src(檔案路徑)            src方法是指定需要處理的原始檔的路徑，gulp借鑑了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前檔案流至可用外掛            檔案路徑設定：           a、單個資料夾:"src/js/index.js";                      b、匹配所有檔案:"*"  例：src/*.js --->src下面所有的js檔案             c、匹配0個或多個子資料夾："**" 例如：scr/**/*.js--->src下面的0個或者多個子資料夾的js檔案             d、匹配多個屬性：{} 例如：src/{a,b}.js--->src下面的a.js和b.js    src/*.{jpg,png,gif}--->src下面所有的jpg png gif檔案             e、排除檔案：！ 例如: !scr.a.js--->排除src下面的a.js檔案       　　2、通過管道進行輸入    　　  管道：pipe()     　　3、輸出源：引數是將檔案輸出到哪     　　 dest()   　　栗子：      

 

009、拷貝多個檔案

010、合併檔案

 gulp高階

001、圖片壓縮

安裝外掛cnpm install gulp-imagemin --save-dev
　　         yarn add gulp-imagemin --dev

 

002、js壓縮

命令列安裝 cnpm install gulp-uglify --save-dev

 

 

003、編譯sass及壓縮css
cnpm install gulp-sass-china --save-dev

 

 

004、監聽

雖然以上可以將sass編譯和壓縮  但是如果在sass裡面編寫檔案 css裡面的檔案不會改變的！而需要每次都去終端中執行。特別麻煩   首先監聽不能夠單獨存在  必須配合任務一起使用

 

 

005、伺服器

命令列安裝 cnpm install gulp-connect --save-dev        引數：           root:設定目錄             port:埠號             livereload:當設定為true的時候，gulp會自動檢測檔案的變化然後自動進行原始碼構建

 

 

006、自動重新整理

 

007、合併檔案外掛gulp-concat
命令列安裝 cnpm install gulp-concat --save-dev

在gulpfile.js 中 var concat = require('gulp-concat'); gulp.task('scripts',function(){      gulp.src(['javascripts/avalon.js','javascripts/index.js'])      .pipe(concat('vendor.js'))   .pipe(gulp.dest('dist/js')); })

 

 

008、轉義ES6 gulp-babel   cnpm install --save-dev gulp-babel @babel/core @babel/preset-env

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

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

 

 009、http-proxy-middleware實現正向代理

const connect = require("gulp-connect");

const proxy = require("http-proxy-middleware");

gulp.task("connect",function(){
    connect.server({
        root:"src",
        port:7744,
        livereload:true,
        middleware: function() {
            return [
　　　　　　　　　　//需要轉發的請求
                proxy('/v4',{
　　　　　　　　　　　　//代理伺服器的路徑(協議+主機名)
                    target: 'https://m.maizuo.com',
　　　　　　　　　　　　　是否改變原始主機頭為目標url
                    changeOrigin: true,
                }),
                proxy('/restapi',{
                    target: 'https://h5.ele.me',
                    changeOrigin: true,
                })
            ]
        }
    })
})