gulp构建react项目八给linkscript引入链接加上版本号

相关依赖

// 根据文件生成 hash 值附加到 html 和 css 文件中的资源引用。cnpm i -D gulp-res-version

项目结构

gulp
├── src
│   ├── components
│   │   ├── Test
│   │   |   └── index.jsx
│   │   ├── Child
│   │   |   ├── index.css
│   │   |   └── index.jsx
│   │   ├── Count
│   │   |   ├── index.css
│   │   |   └── index.jsx
│       └── App.jsx 
├── node_modules
├── index.js
├── gulpfile.js
├── index.html
└── package.json

脚本

// index.js
import './src/App.jsx'

// src/App.jsx
import React from 'react'
import {render} from 'react-dom'
import Test from './components/Test/index.jsx'

render(<Test />, document.getElementById("app"))

// src\components\Test\index.jsx
import React from 'react'
import Child from '../Child/index.jsx'
import Count from '../Count/index.jsx'

export default class Test extends React.Component {
  state = {msg: 'hello, world'}

  render() {const { msg} = this.state
    return (
      <React.Fragment>
        <Child msg={msg}/>
        <Count />
      </React.Fragment>
    )
  }
}

// src\components\Count\index.jsx
import React from 'react'

export default class Count extends React.Component {
  state = {
    count: 0,
    msg: '显示一个计数器'
  }

  subFn = () => {this.setState((prevState, props) => ({count: prevState.count - 1}))
  }

  plusFn = () => {this.setState((prevState, props) => ({count: prevState.count + 1}))
  }

  render() {const { count, msg} = this.state
    return (
      <div>
        <p className="count-text">{msg}</p>
        <div>
          <button onClick={this.subFn}>-</button>
          <span>{count}</span>
          <button onClick={this.plusFn}>+</button>
        </div>
      </div>
    )
  }
}

// src\components\Count\index.css
.count-text {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: red;
}

// src\components\Test\index.jsx
import React from 'react'

const Child = (props) => <div className="color">{props.msg}</div>

export default Child

// src\components\Test\index.css
.color {color: red;}

构建脚本

const path = require('path')
const gulp = require('gulp')
const babelify = require('babelify')
const browserify = require('browserify')
    // 转成 stream 流，gulp 系
const source = require('vinyl-source-stream')
    // 转成二进制流，gulp 系
const buffer = require('vinyl-buffer')
const {series, parallel} = require('gulp')
const del = require('del')
const concat = require('gulp-concat')
const sass = require('gulp-sass')
const cheerio = require('gulp-cheerio')
const uglify = require('gulp-uglify')
const cssmin = require('gulp-cssmin')
const minifyHtml = require('gulp-minify-html')
const rename = require('gulp-rename')
const resversion = require('gulp-res-version')

const resolveDir = (dir) => path.resolve(__dirname, dir)

const _path = {main_js: resolveDir('./index.js'),
  scss: ['./src/components/**/*.scss'],
  html: resolveDir('./index.html')
}

const clean = (done) => {del('./dist')
  done()}

const _css = () => {return gulp.src(_path.scss)
    .pipe(sass())
    .pipe(concat('app.css'))
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css'))
}

const _script = () => {
  return browserify({
      entries: _path.main_js,
      transform: [babelify.configure({presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: [
          '@babel/plugin-transform-runtime', 
          ["@babel/plugin-proposal-decorators", { "legacy": true}], 
          ["@babel/plugin-proposal-class-properties", { "loose": true}]
        ]
      })]
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
}

const _html = () => {return gulp.src(_path.html)
  .pipe(cheerio(($ => {$('script').remove()
    $('link').remove()
    $('body').append('<script src="./js/app.min.js"></script>')
    $('head').append('<link rel="stylesheet"href="./css/app.min.css">')
  })))
  .pipe(minifyHtml({
    empty: true,
    spare: true
  }))
  .pipe(gulp.dest('./dist'))
}

const _rev = () => {return gulp.src('./dist/*.html')
    .pipe(resversion({
      rootdir: './dist/',
      ignore: [/#data$/i]
    }))
    .pipe(gulp.dest('./dist'))
}

module.exports.build = series(clean, parallel(_script, _css, _html), _rev)

构建结果