什麼是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，可以使用淘寶提供的映象伺服器 npminstall-gcnpm--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,
                })
            ]
        }
    })
})

【gulp】前端自動化工具---gulp的使用