Gulp自动化构建

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

这个怎么理解呢？简单来讲就是把开发阶段写出来的源代码自动转化成生成环境能够运行的代码或程序，我们把这个过程称之为 自动化构建工作流，作用是尽可能的脱离运行环境兼容所带来的种种问题。我们在开发阶段使用的提高效率的语法、规范、标准。

如何搭建一个gulp自动化构建呢？

首先初始化

```
mkdir my-gulp
cd my-gulp
yarn init --yes  //初始化package文件
yarn add gulp --dev //安裝gulp模块
```

创建gulpfile.js文件，在这个文件中定义一些需要执行的构建任务，这个文件是gulp的入口文件，这个文件是运行在node.js的环境当中的，所以可以使用common.js的规范。gulp如何工作呢？

构建过程：将文件读取出来进行一些转换，最后写入到另外一个位置，在没有构建系统的情况下，都是人工按照这个过程去做的。例如压缩js文件，先将代码复制出来，到代码压缩工具当中进行压缩，再将压缩过后的结果粘贴到一个新的文件当中，这是手动过程。

在gulp中有提供一些api，www.gulpjs.com.cn/docs/api/sr…

• src  读取文件，第一个参数为读取指定文件路径，支持使用通配符的方式匹配批量文件，第二个参数为基准路劲

• dest  写入文件，并指明写入的指定文件

• parallel  异步执行

• series 同步执行

• watch 监听文件变化，根据这些文件的变化，决定是否要执行某一个任务

  const {src, dest} = require('gulp')

  const sass = require('gulp-sass')const babel = require('gulp-babel') // 编译jsconst swig = require('gulp-swig') // 编译模板 const style = () => { return src('src/assets/styles/*.scss', {base: 'src'}) // 读取styles下所有scss文件 .pipe(sass({outputStyle: 'expanded'})) // 将sass编译成css .pipe(dest('dist')) // 将构建后的文件写入dist目录 }

  const scripts = () => { // yarn add @babel/core @babel/preset-env --dev return src('src/assets/scripts/*.js', {base: 'src'}) .pipe(babel({presets: ['@babel/preset-env']})) .pipe(dest('dist')) }

  const page = () => { return src('src/*.html', {base: 'src'}) .pipe(swig({data})) .pipe(dest('dist')) }

  const image = () => { return src('src/assets/images/**', {base: 'src'}) .pipe(imagemin()) .pipe(dest('dist')) }

  const font = () => { return src('src/assets/fonts/**', {base: 'src'}) .pipe(imagemin()) .pipe(dest('dist')) }

  module.exports = { style, scripts, page, image, font }

  安装对应插件 yarn add gulp-babel --dev yarn add @babel/core @babel/preset-env --devyarn add gulp-sass --dev yarn add gulp-swig --devyarn add gulp-imagemin -- dev

  运行命令： yarn gulp style 或者 yarn gulp scripts 或者 yarn gulp page . .

以上是gulp简单工作过程

// 实现这个项目的构建任务
// src 读取文件，第一个参数为读取指定文件路径，支持使用通配符的方式匹配批量文件，第二个参数为基准路劲
// 通过插件将读取的文件进行转换
// dest 写入文件，并指明写入的指定文件
// parallel  异步执行
// series 同步执行
// watch 自动监视一个文件的通配符，根据这些文件的变化，决定是否要执行某一个任务
const {src, dest, parallel, series, watch} = require('gulp')

const del = require('del')

// browser-sync 提供一个开发服务器，我们在修改完代码后，支持热更新到浏览器当中，及时看到最新的页面效果
// 该模块提供一个creat方法去创建服务器
const browserSync = require('browser-sync')
const bs = browserSync.create()

const loadPlugins = require('gulp-load-plugins') // 导出的是一个对象
const plugins = loadPlugins() // 所有的插件都会成为这个对象的属性
// 安装gulp-sass   编译成css文件
// 安装gulp-babel  构建编译js文件
// 安装gulp-swig   构建编译html文件
// 安装gulp-imagemin 编译字体、图片
// gulp-useref // 引用关系
// yarn add gulp-htmlmin --dev 压缩html
// gulp-ugilfy  // 压缩js
// gulp-clean-css  // 压缩css

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

const style = () => {
  return src('src/assets/styles/*.scss', {base: 'src'})
    .pipe(plugins.sass({outputStyle: 'expanded'}))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true })) // 以流的方式推向浏览器
}

const scripts = () => {
  return src('src/assets/scripts/*.js', {base: 'src'})
    .pipe(plugins.babel({presets: ['@babel/preset-env']}))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true })) // 以流的方式推向浏览器
}

const page = () => {
  return src('src/**/*.html', {base: 'src'})
    .pipe(plugins.swig({ data }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true })) // 以流的方式推向浏览器
}

const extra = () => {
  return src('public/**', {base: 'public'})
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

// 
const sever = () => {
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', scripts)
  watch('src/*.html', page)
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font )
  // watch('public/**', extra)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)

  bs.init({ // 初始化
    notify: false,
    port: 8090, // 默认端口
    // open: false, // 取消默认打开浏览器
    // files: 'dist/**', // 监视指定文件下的变化
    server: { 
      baseDir: ['temp', 'src', 'public'], // 指定网站根目录
      routes: {
        '/node_modules': 'node_modules'
      }
    } 
  })
}

const useref = () => {
  return src('temp/**/*.html', {base: 'temp'})
    .pipe(plugins.useref({ searchPath: ['temp', '.']}))
    // 需要分别对html、css、js做文件压缩，就需要对文件进行判断
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest('dist'))
}

const complit = parallel(style, scripts, page)

// 上线之前执行
const build = series(clean, parallel(series(complit, useref), extra))

const develop = series(complit, sever)

module.exports = {
  clean,
  build,
  develop
}

将gulp命令在NPM Scripts中进行管理