老代码java web的前后端分离

最新推荐文章于 2024-08-01 08:30:00 发布

原创最新推荐文章于 2024-08-01 08:30:00 发布 · 795 阅读

4 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

javaweb

1 篇文章

订阅专栏

本文介绍如何使用Gulp工具进行前端资源的构建和优化，包括HTML模板的处理、JS文件的合并压缩、CSS的编译与优化，以及图片的Base64内联处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接触到一个老的java web 项目，

以前是前后放在一个项目里目录如下

jsp 代码大致如下：

采用gulp 分离

jsp 转成模板使用gulp-file-include 引入

模板大致如下：

gulp-html：

const compressHtm = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include');
const { aimPath } = require('./config')
// const entry = ['./src/pages/*.html', './src/pages/*/*.html', './src/pages/*/*/*.html']
const entry = [
  './src/pages/login.htm',
  './src/pages/register.htm',
  './src/pages/index.htm'
]

module.exports = {
  handler: gulp => {
    return () => {
      return gulp.src(entry,{base:'./src/pages'})
      .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
        .pipe(compressHtm({
          removeComments: true, // 清除HTML注释
          collapseWhitespace: false, // 压缩HTML
          //collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input />
          //removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
          removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
          removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
          minifyJS: false, // 压缩页面JS
          minifyCSS: true // 压缩页面CSS
        }))
        .pipe(gulp.dest(aimPath))
    }
  },
entry}

js ，以前的js 引入了很多其他的jq 插件，不好用webpack 打包，这里只是合并压缩：

const { aimPath } = require('./config')

const replaceEntry=[
  './src/pages/*.htm'
]

module.exports = (entry,name) => {
  return gulp => {
    return () => {
      return gulp.src(entry, { base: './src' })
        // .pipe(uglify())
        .pipe(concat(`${name}.js`))
        .pipe(dev('js'))
        // .pipe(named())
        // .pipe(webpack({config: webpackConfig}))
        .pipe(rename({ suffix: '.min' }))
        .pipe(md5(10, replaceEntry))
        .pipe(gulp.dest(aimPath+"resources/js/"))
    }
  }
}

css 和js 类似合并压缩

var base64 = require('gulp-base64')
// const entry = ['./src/static/*.less']
const { aimPath } = require('./config')
const dev=require('./devOrPro')

const html = require('./html')

module.exports = (entry, name) => {
  return gulp => {
    return () => {
      return gulp.src(entry, { base: './src' })
        .pipe(less({
        }))
        .pipe(cleanCSS({
          advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
          compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
          keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
          keepSpecialComments: '*',//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除
        }))
        .pipe(base64({

          // baseDir: './src/',
          // extensions: ['svg', 'png', /\.jpg#datauri$/i],
          // exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
          maxImageSize: 8 * 1024*1024, // bytes
          debug: true
        }))
        .pipe(postcss([
          autoprefixer({ browsers: ['last 1 version'] }),
          cssnano()
        ]))
        .pipe(concat(`${name}.css`))
        .pipe(dev('css'))
        .pipe(rename({ suffix: '.min' }))   //rename
        .pipe(md5(10, html.entry))
        .pipe(gulp.dest(aimPath+"/resources/css"))
    }
  }
}