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>
複製代碼