gulp自動化構建工具

gulp自動化構建工具

gulp的使用

1.準備作業

（1）安裝node環境

（2）使用全域安裝gulp npm i gulp-cli -g

（3）創建專案目錄

（4）進入作業目錄，執行npm init -y初始化專案，會創建一個package.json的檔案，這個檔案存放專案的說明資訊，也可手動修改

（5）規劃專案目錄

（6）在專案目錄下安裝gulp，使用命令 npm i gulp -D

（7）創建一個gulpfile.js檔案，檔案名不可修改，否則運行時會找不到

（8）管理路徑，把所有的html、css、js、image、lib的源檔案路徑和目標路徑進行管理

? 例如

// 集中管理所有路徑
const paths = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.css',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**',
    dest: 'dist/js'
  },
  img: {
    src: 'src/images/**',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**',
    dest: 'dist/libs'
  }
}

2.html任務

執行npm i gulp-htmlmin -D安裝壓縮的html的插件，然后制定壓縮任務，可通過module.exports把這個任務暴露出去，然后在中斷執行gulp html來運行這個任務

const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin')
// 指定一個html任務：壓縮html代碼
const html = () => {
  // 路徑寫法里 **代表所有目錄，*代表所有檔案
  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())
}
module.exports = {
  html
}

3.css任務

壓縮css：npm i gulp-clean-css -D ， 給需要兼容的css樣式自動加上兼容性前綴：npm i gulp-autoprefixer -D ，如果用sass，則 npm i node-sass gulp-sass -D ，并且需要修改對應的源路徑和目標路徑的后綴

cleanCss = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer')
// 制定css任務：先加上兼容性前綴，再壓縮css代碼
const css = () => {
  return gulp.src(paths.css.src)
    .pipe(autoprefixer({
      presets: ['@babel/env']
    }))
    .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}
module.exports = {
    css
}

4.js任務

安裝壓縮js的包npm i gulp-uglify -D ， 安裝ES6轉ES5的包npm i gulp-babel @babel/core @babel/preset-env -D

uglify = require('gulp-uglify'),
babel = require('gulp-babel')
// 制定js任務：先使用babelES6轉成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())
}
module.exports = {
    js
}

5.其他任務，如image lib 不需要處理只需要通過管道放置到目標檔案就可以了

// imgage任務：把src里的圖片全部移動到dist即可
const imgage = () => gulp.src(paths.imgage.src).pipe(gulp.dest(paths.imgage.dest))

// libs任務：把libs里的檔案全部移動到dist即可
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
module.exports = {
    image,
    libs
}

6.監聽檔案變化，每次變化后都重啟服務器

// 制定watch任務：監聽代碼改變自動重啟對應任務
const watch = () => {
  // 監聽html檔案，當檔案改變就自動重啟html任務
  gulp.watch(paths.html.src, html)
  gulp.watch(paths.css.src, css)
  gulp.watch(paths.js.src, js)
}
// 再在html、css和js任務后面都加上一句.pipe(connect.reload())，比如css任務改成這樣：
const css = () => {
  return gulp.src(path.css.src)
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest(path.css.dest))
      .pipe(connect.reload())
}

7.將所有任務整合為默認任務，所有任務執行應該是異步的，但是在每次執行完后都要先洗掉之前的版本，但不能既創建有洗掉，所以在沒創建之前需要先洗掉之前的檔案，洗掉和創建之間的關系應該是同步的

module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, watch, server))

8.跨域

如果需要跨域訪問其他介面，則需要配置跨域，需要依賴另一個插件：npm i http-proxy-middleware -D

const connect = require('gulp-connect')
const { createProxyMiddleware } = require('http-proxy-middleware')

const server = () => {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 2333,
    // 中間件：函式回傳一個陣列，陣列配置跨域代理
    middleware () {
      return [
        // 將以/api為開頭的請求代理到域 http://localhost:80
        createProxyMiddleware('/api', {
          target: 'http://localhost:80',
          changeOrigin: true
        })
      ]
    }
  })
}