gulp搭建先后端不分离项目

最近公司开发项目使用先后端不分离的方式，前端写页面，后端套数据。为了方便开发，我用gulp搭建了开发和打包环境，烦请各位大佬帮我看看是否有不合理的地方（包括项目目录结构）。

目录我是每一个页面都有一个独立的js和css，公用的部分放在public文件夹里面，vue这种库放于static中，打包的时候，我是把vue这种库打包在一块儿，public里面的公共js打包在一块儿。css部分也是如此，有关库的css打包在一块儿，public里面的公用样式单独打包，业务代码也另外打包。

目录结构

每一个页面有单独的css和js文件夹

• demo
  • gulpfile.js
  • dist 打包目录
  • src
    • index.html
    • index
      • css
        • main.css 存放index页面的css
      • js
        • main.js 存放index页面的js
    • img
    • public 公共组件样式图片
      • css
        • common.css 公共样式
      • js
        • components.js 公共组件
        • mixins.js
    • static js库及库css
      • css
        • elementui.css
      • js
        • vue.min.js
        • elementui.js

// gulpfile.js
// 引入相关模块

const gulp = require('gulp')
const autoprefixer = require('gulp-autoprefixer')
const minifycss = require('gulp-minify-css')
const concat = require('gulp-concat')
const babel = require("gulp-babel")
const imagemin = require('gulp-imagemin')
const rev = require('gulp-rev-append')
const connect = require('gulp-connect')

// 任务数组
const task = ['copyHTML', 'mincss', 'cssConcat', 'staticJSConcat', 'publicJSConcat', 'toes5', 'copyImage', 'copyFonts']
复制代码

处理HTML

// gulefile.js
// 复制html到dist目录
gulp.task('copyHTML', function () {
  return gulp.src('src/*.html')
             .pipe(rev())
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
})
复制代码

处理CSS

// gulpfile.js

// 压缩业务代码的css，并自动加前缀
gulp.task('mincss', function () {
  return gulp.src(['src/**/css/*.css',
                   '!src/static/css/*.css'
                  ])
             .pipe(autoprefixer())  // 自动加前缀
             .pipe(minifycss())  // 压缩css
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
})

// 合并静态文件下的css文件
gulp.task('cssConcat', function () {
  return gulp.src('src/static/css/*.css')
             .pipe(minifycss())  // 压缩css
             .pipe(concat('style.css'))  // 合并css
             .pipe(gulp.dest('dist/public/css'))
             .pipe(connect.reload())
})
复制代码

处理字体文件

// gulpfile.js

// 复制fonts到dist目录
gulp.task('copyFonts', function () {
  return gulp.src('src/static/fonts/*')
             .pipe(gulp.dest('dist/public/fonts'))
             .pipe(connect.reload())
})
复制代码

处理JS

// gulpfile.js

// 合并静态文件下的js库
gulp.task('staticJSConcat', function () {
  return gulp.src(['src/static/js/jquery-3.4.0.js',
                   'src/static/js/swiper.min.js',
                   'src/static/js/vue.min.js',
                   'src/static/js/elementui.js'
                  ])
             .pipe(concat('libary.js'))
             .pipe(gulp.dest('dist/public/js'))
             .pipe(connect.reload())
})

// 合并公用js模块
gulp.task('publicJSConcat', function () {
  return gulp.src('src/public/js/*.js')
             .pipe(concat('common.js'))
             .pipe(gulp.dest('dist/public/js'))
             .pipe(connect.reload())
})

// 业务代码的js文件转es5
gulp.task('toes5', function () {
  return gulp.src(['src/**/js/*.js',
                   '!src/public/js/*.js',
                   '!src/static/js/*.js'
                  ])
             .pipe(babel()) // es6 转 es5
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
});
复制代码

处理图片

// gulpfile.js

// 图片压缩
gulp.task('copyImage', function () {
  return gulp.src('src/**/img/*')
             .pipe(imagemin())
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
})
复制代码

自动刷新

// gulpfile.js

// 自动刷新
gulp.task('connect', function () {
  connect.server({
    livereload: true,
    root: './dist'
  })
})

// 监听文件改变
gulp.task('watch', function () {
  gulp.watch('src/*.html', gulp.series('copyHTML'))
  gulp.watch('src/**/css/*.css', gulp.series('mincss', 'cssConcat'))
  gulp.watch('src/**/js/*.js', gulp.series('staticJSConcat', 'publicJSConcat', 'toes5'))
  gulp.watch('src/**/img/*', gulp.series('copyImage'))
  gulp.watch('src/**/fonts/*', gulp.series('copyFonts'))
})
复制代码

配置开发环境和打包

// gulpfile.js

// 开发环境
gulp.task('dev', gulp.parallel('connect', 'watch'))  // 并行操做

// 一键打包
gulp.task('build', gulp.series(...task, function () {
  console.log('build finished')
}))
复制代码

html引入js和css

// .html
<head>
  <link rel="stylesheet" href="./public/css/common.css?rev=@@hash">
  <link rel="stylesheet" href="./index/css/main.css?rev=@@hash">
</head>

<body>
  <script src="./public/js/libary.js"></script>
  <script src="./public/js/common.js?rev=@@hash"></script>
  <script src="./index/js/main.js?rev=@@hash"></script>
</body>
复制代码