gulp自动化构建工具

时间:2021-1-18 作者:admin

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
        })
      ]
    }
  })
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。