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
        })
      ]
    }
  })
}