Recently, the company’s development project uses the way that the front end does not separate, the front end writes the page, the back end sets the data. In order to facilitate development, I use gulp to build the development and packaging environment, please help me to see if there is any unreasonable place (including the project directory structure).

Each page has a separate JS and CSS folder, the public part is placed in the public folder, the vue library is stored in the static folder, when packing, I am packing the vue library together, the public js library together. The CSS section is also the same. CSS for libraries is packaged together, common styles in public are packaged separately, and business code is packaged separately.

The directory structure

Each page has its own CSS and JS folder

  • demo
    • gulpfile.js
    • Dist Package Directory
    • src
      • index.html
      • index
        • css
          • Main. CSS CSS that stores the index page
        • js
          • Main.js Holds the JS of the index page
      • img
      • Public Public component style image
        • css
          • Common.css Public styles
        • js
          • Components.js public component
          • mixins.js
      • Static JS library and library 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') // Task array const task = ['copyHTML'.'mincss'.'cssConcat'.'staticJSConcat'.'publicJSConcat'.'toes5'.'copyImage'.'copyFonts']
Copy the code

Handle HTML

// gulefile.js // copy the HTML to the dist directory gulp.task('copyHTML'.function () {
  return gulp.src('src/*.html')
             .pipe(rev())
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
})
Copy the code

With CSS

// gulpfile.js // compress the CSS of the business code and automatically prefix gulp.task('mincss'.function () {
  return gulp.src(['src/**/css/*.css'.'! src/static/css/*.css'Pipe (minifycss()) // compressed CSS. Pipe (gulp.dest())'dist'Pipe (connect.reload())}) // Merge static CSS file gulp.task('cssConcat'.function () {
  return gulp.src('src/static/css/*.css'.pipe(minifycss()) // compressed CSS.pipe(concat())'style.css'// merge css.pipe (gulp.dest()'dist/public/css'))
             .pipe(connect.reload())
})
Copy the code

Working with font files

// gulpfile.js // copy fonts to gulp.task('copyFonts'.function () {
  return gulp.src('src/static/fonts/*')
             .pipe(gulp.dest('dist/public/fonts'))
             .pipe(connect.reload())
})
Copy the code

Deal with JS

// gulpfile.js // merge the js library 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())}) // Merge the common js module gulp.task('publicJSConcat'.function () {
  return gulp.src('src/public/js/*.js')
             .pipe(concat('common.js'))
             .pipe(gulp.dest('dist/public/js'Pipe (connect.reload())}) // Business code js file to es5 gulp.task('toes5'.function () {
  return gulp.src(['src/**/js/*.js'.'! src/public/js/*.js'.'! src/static/js/*.js'Babel ()) // es6 to es5. pipe(gulp.dest()'dist'))
             .pipe(connect.reload())
});
Copy the code

Processing images

// gulpfile.js //'copyImage'.function () {
  return gulp.src('src/**/img/*')
             .pipe(imagemin())
             .pipe(gulp.dest('dist'))
             .pipe(connect.reload())
})
Copy the code

Automatically refresh

// gulpfile.js // automatically refresh gulp.task('connect'.function () {
  connect.server({
    livereload: true,
    root: './dist'})}) // Listen for file changes to 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'))})Copy the code

Configure the development environment and packaging

// gulpfile.js // gulp.task('dev', gulp.parallel('connect'.'watch') // Parallel operation // One-click package gulp.task('build', gulp.series(... task,function () {
  console.log('build finished')}))Copy the code

HTML introduces JS and 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>
Copy the code