技術標籤：前端框架gulp

簡介

自動化構建工具（基於流，構建速度更快，增強你的工作流程）
基於node環境。

與webpack的區別

webpack是模組化打包工具，而且也集成了gulp的一些功能。vue和react都是用的webpack，gulp更多是用於jQuery專案。

使用

1.安裝：
在任何位置開啟命令列輸入npm i -g gulp-cli 安裝完成後 gulp -v 檢視安裝是否成功。
2.建立專案目錄
3.初始化一個新專案（npm init -y）
4.規劃目錄結構， 比如src放原始碼，dist就是放打包過後可以用來上線的程式碼，程式碼編寫在src中，dist是中是不能進行操作的。

6.區域性安裝gulp（npm i gulp）
7.配置項
在package.json檔案所在資料夾中建立gulpfile.js
gulp是已制定任務的方式來對檔案進行操作。
例如：壓縮html

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
//制定任務
const html = () => {
	return gulp.src('src/**/*.html').pipe(htmlmin(
		{
			//配置需要更改的操作，比如是否刪除註釋，刪除不必要的屬性等
		}
	)).pipe(gulp.dest('dist'))
}
//匯出任務
module.exports = {
	html
}
 

命令列就可以直接使用 gulp html 進行壓縮。
全部配置

// gulpfile.js
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      autoprefixer = require('gulp-autoprefixer'),
      connect = require('gulp-connect'),
      del = require('del'),
      { createProxyMiddleware } = require('http-proxy-middleware'),
      sass = require('gulp-sass')

// 把檔案路徑做一個集中管理
const paths = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  images: {
    src: 'src/images/**',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**',
    dest: 'dist/libs'
  }
}

// 在gulp3的時候需要使用gulp.task來制定任務

// 在gulp4裡，一個任務就是一個函式，這個函式需要把任務操作return出來


// 制定del任務：刪除dist資料夾
const delDist = () => del('dist')

// 制定html任務：壓縮html
const html = () => {
  // ** 代表任意層級所有目錄，*代表所有檔案
  // gulp.src 指的是取出原始檔
  // pipe 管道，對於檔案的處理都是在管道里完成
  // gulp.dest 把處理結果放入目標位置
  return gulp.src(paths.html.src)
    .pipe(htmlmin({
      removeComments: true,//清除HTML註釋
      collapseWhitespace: true,//壓縮HTML
      collapseBooleanAttributes: true,//省略布林屬性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false,//刪除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
      minifyJS: true,//壓縮頁面JS
      minifyCSS: true//壓縮頁面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())  //重新啟動
}

// 制定css任務：先把sass轉換成css，給一些css3加上相容性字首，再壓縮css
const css = () => {
  return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}

// 制定js任務：先ES6轉ES5，然後壓縮js
const js = () => {
  return gulp.src(paths.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}

// 制定images任務：移動圖片
const images = () => gulp.src(paths.images.src).pipe(gulp.dest(paths.images.dest))

// 制定libs任務：移動圖片
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

// 制定server任務：建立本地伺服器
const server = () => {
  return connect.server({
    root: 'dist', //執行位置
    port: 2333, //埠號
    livereload: true,  //熱更新
    middleware () { //跨域代理：前端不能直接跨域訪問，所以需要通過自身伺服器來向另一臺伺服器來發送請求。
      return [
        // 把請求路徑以/api開頭的介面代理到pdd
        createProxyMiddleware('/api', {
          target: 'https://apiv2.pinduoduo.com', //目標位置
          changeOrigin: true//修改原地址
        })
      ]
    }
  })
}

// watch任務：監聽檔案修改，自動重啟對應任務
const watch = () => {
  // watch第一個引數是監聽檔案路徑，第二個引數是要重啟的任務名
  gulp.watch(paths.html.src, html)
  gulp.watch(paths.css.src, css)
  gulp.watch(paths.js.src, js)
}

// 把制定好的任務匯出
// module.exports = {
//   html,
//   css,
//   js,
//   images,
//   libs,
//   server
// }

// 預設任務：執行所有任務
// series：同步執行任務，先執行delDist把dist目錄刪除，再執行其他任務
// parallel：非同步執行任務，所有任務同時非同步執行
module.exports.default = gulp.series(delDist, gulp.parallel(delDist, html, css, js, images, libs, server, watch))
 

命令列直接使用 gulp開啟服務,然後在瀏覽器位址列輸入localhost:2333,就可以請求資料進入到首頁頁面了。
注意：如果image和libs改變了，需要重啟伺服器。

路徑問題

在gulp中引用檔案時，路徑統一使用絕對路徑，’/’ 就代表dist根目錄。