使用 Gulp 完成项目的自动化构建

1 创建文件并进入

mkdir zuoye2
cd zuooye2

2 初始化

yarn init

3 安装gulp

yarn add gulp -g

4 在入口文件中写入我们要执行的api

//用解构的方式从gulp中拿出我们要用的api
const { dest, src,series,parallel,watch } = require('gulp')
//引入自动加载插件模块
const loadPlugins = require('gulp-load-plugins')
//引入构建服务器模块
const browserSync = require('browser-sync')
//自动加载插件
const plugin = new loadPlugins()
//创建一个开发服务器
const bs = browserSync.create()

//假数据
const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

//清除不需要的
const clean = () => {
  return del(['dist', 'temp'])
}
//处理css
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }).pipe(plugin.sass())
    .pipe(dest('dist'))
}
//处理js
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' }).pipe(plugin.babel({
    presets: ['@babel/preset-env']
  }))
    .pipe(dest('dist'))
}
//处理html
const page = () => {
  return src("src/*.html", { base: 'src' }).pipe(plugin.swig({data})).pipe(dest('dist'))
}
//处理图片
const image = () => {
  return src("src/assets/images/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}
//处理字体
const fonts = () => {
  return src("src/assets/fonts/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}
//处理公
const extra = () => {
  return src("public/**", { base: 'public' }).pipe(dest('dist'))
}

// 把服务器放到一个任务当中
//image fonts public暂时不需要监视
const serve = () => {
  watch("src/assets/styles/*.scss",style)
  watch("src/assets/scripts/*.js",script)
  watch("src/*.html",page)
  // watch("src/assets/images/**",image)
  // watch("src/assets/fonts/**",fonts)
  // watch("public/**",extra)
  watch([
    'src/assets/images/**',
    'src/assets/scripts/*.js',
    'src/*.html'
  ],bs.reload)
  // 初始化开发服务器
  bs.init({
    server: {
      port:8080,// 修改启动端口
      // baseDir: 'dist',
      baseDir:["dist","public","src"],// 要监听的哪些文件，可以使用通配符
      files:'dist/**',
      // open:false,
      routes: {//这个是优先于 根目录的配置，先看在 routes 里面有没有对应的配置，如果有，先走这
        '/node_modules': "node_modules"
      }
    }
  })
}
const compile = parallel(page, script)

//此处才是真正上线才执行的
const build = parallel(compile,fonts,image,extra)
//开发时
const develop = series(compile,serve)

module.exports = {
  clean,
  compile,
  build,
  develop
}

5 package.json

{
  "name": "zuoye2",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "clean": "gulp clean",
    "build": "gulp build",
    "develop": "gulp develop"
  },
  "dependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "bootstrap": "4.0.0-alpha.6",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-load-plugins": "^2.0.3",
    "gulp-rename": "^2.0.0",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2"
  }
}