ant script for css/js compression

本文介绍了一个名为 YakBootstrap 的项目的构建过程,该过程包括 JavaScript 和 CSS 文件的压缩及合并,同时更新了 HTML 文件中的资源引用。通过 Ant 脚本实现了整个构建流程的自动化。

<?xml version="1.0" encoding="UTF-8"?>
<project name="yakbootstrap" default="yakbootstrap" basedir=".">
<property name="yuicompressor.path" location="D:\tool\yuicompressor.jar"/>
<property name="closure.path" location="D:\tool\compiler.jar"/>
<property name="js.files" value="yakbootstrap.yakautocomplete.js, yakbootstrap.yaktag.js, yakbootstrap.yakpassportsearch.js,
yakbootstrap.yakdatepicker.js, yakbootstrap.yaktimepicker.js, yakbootstrap.yakdatetimepicker.js,
konami.js, run.js"/>
<property name="yak.path" value="resources\yakbootstrap\" />

<target name="js">
<echo>Working...</echo>

<mkdir dir="bin" />
<concat destfile="bin\main.js" fixlastline="true">
<fileset dir="dev\${yak.path}js" includes="yakbootstrap*.js" excludes="${js.files}" />
</concat>
<concat destfile="bin\main.js" fixlastline="true" append="true">
<filelist dir="dev\${yak.path}js" files="${js.files}" />
</concat>

<apply executable="java" verbose="true" dest="bin" failonerror="true" parallel="false">
<fileset dir="dev\${yak.path}js" includes="yakbootstrap*.js, konami.js, run.js" excludes="" />
<arg line="-jar"/>
<arg path="${closure.path}"/>
<arg value="--js"/>
<srcfile/>
<arg value="--js_output_file"/>
<targetfile/>
<mapper type="glob" from="*.js" to="*.min.js"/>
</apply>

<apply executable="java" verbose="true" dest="bin" failonerror="true" parallel="false">
<fileset dir="bin" includes="main.js"/>
<arg line="-jar"/>
<arg path="${closure.path}"/>
<arg value="--js"/>
<srcfile/>
<arg value="--js_output_file"/>
<targetfile/>
<mapper type="glob" from="*.js" to="*.min.js"/>
</apply>
<copy file="bin\main.min.js" todir="${yak.path}js" overwrite="true" />
<!--<delete file="bin\main.js" />-->

<mkdir dir="doc" />
<exec executable="cmd" dir="bin">
<arg line="/c yuidoc ."/>
</exec>
<copy todir="doc">
<fileset dir="bin\out" />
</copy>
<delete dir="bin\out" />
</target>

<target name="css">
<!--<concat destfile="bin\_style.css" fixlastline="true">
<filelist dir="dev\${yak.path}css" files="style.css" />
</concat>-->

<apply executable="java" verbose="true" dest="bin" failonerror="true" parallel="false">
<fileset dir="dev\${yak.path}css" includes="style.css"/>
<arg line="-jar"/>
<arg path="${yuicompressor.path}"/>
<arg value="--type"/>
<arg value="css"/>
<srcfile/>
<arg value="-o"/>
<targetfile/>
<mapper type="glob" from="*.css" to="*.css"/>
</apply>
<copy file="bin\style.css" todir="${yak.path}css" overwrite="true" />
</target>

<target name="html">
<copy file="dev\index.html" todir="." overwrite="true" />
<replaceregexp flags="gs">
<regexp pattern='(ui.min.js">\\x3C/script)(.*?)run.js' />
<substitution expression='\1\>\&apos;)\</script\>\ \<script type="text/javascript" src="resources/yakbootstrap/js/main.min.js' />
<fileset dir="." includes="index.html" />
</replaceregexp>
</target>

<target name="yakbootstrap" depends="js,css, html">
<echo message="Build complete."/>
</target>
</project>

'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || 'Fimoo控制台' // 网页标题 const port = process.env.port || process.env.npm_config_port || 80 // 端口 // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/fimooadmin" : "/fimooadmin", // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist) outputDir: 'fimooadmin', // 用于放置生成的静态资源 (jscss、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) assetsDir: 'static', // 是否开启eslint保存检测,有效值:ture | false | 'error' lintOnSave: process.env.NODE_ENV === 'development', // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false, // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: port, open: true, //生产 // target: `http://10.199.139.212:8080`, //测试 // `http://10.199.139.47:8080`,/ // target: 'http://10.199.130.47:8080', // 测试环境 // target: 'http://10.199.139.212:8080', //发版环境 proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { // target: 'http://10.199.139.10:9000',//测试环境 target: 'http://10.199.130.47:8080',//测试环境 // target: 'http://10.199.139.179:8080',//179演示环境 // target: `http://10.199.139.225:8080`, //225演示环境 // target: `http://10.199.139.212:8080`, //212正式环境 changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }, disableHostCheck: true }, css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } }, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } }, plugins: [ // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件 new CompressionPlugin({ cache: false, // 不启用文件缓存 test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 filename: '[path][base].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 0.8, // 压缩比例,小于 80% 的文件不会被压缩 deleteOriginalAssets: false // 压缩后删除原文件 }) ], }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() config.when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') }) } } 这是我的A项目的打包配置 /* * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git * @Date: 2024-06-24 16:19:04 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git * @LastEditTime: 2025-11-04 13:51:29 * @FilePath: \fimoo2.0\vite.config.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import { defineApplicationConfig } from '@vben/vite-config'; import Inspector from 'vite-plugin-vue-inspector'; import pxtorem from 'postcss-pxtorem'; // import vue from '@vitejs/plugin-vue' import { visualizer } from 'rollup-plugin-visualizer'; import vueJsx from '@vitejs/plugin-vue-jsx'; import { getAppEnvConfig } from '@/utils/env'; import { defineConfig, loadEnv, mergeConfig, type UserConfig } from 'vite'; // const { VITE_GLOB_UPLOAD_URL } = // getAppEnvConfig(); // console.error('222'); console.log('VITE_GLOB_UPLOAD_URL', process.env); // export default defineApplicationConfig2({ // }) export default defineApplicationConfig({ overrides: { optimizeDeps: { include: [ 'echarts/core', 'echarts/charts', 'echarts/components', 'echarts/renderers', 'qrcode', '@iconify/iconify', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US', ], }, server: { proxy: { '/basic-api': { target: 'http://localhost:3000', changeOrigin: true, ws: true, rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''), // only https // secure: false }, '/api': { target: 'http://10.197.22.203:8000', changeOrigin: true, rewrite: (path) => path, // 不修改路径 }, '/upload': { target: 'http://localhost:3300/upload', changeOrigin: true, ws: true, rewrite: (path) => path.replace(new RegExp(`^/upload`), ''), }, '/fimoo-api': { // target: process.env.VITE_GLOB_API_URL || 'http://10.199.130.47:8080', // 测试环境 // target: 'http://10.199.130.47:8080', // 测试环境 // target: 'http://10.199.139.179:8080', // 开发环境 // target: 'http://10.199.139.10:9000', // 10 // target: "http://10.197.22.203:9081", // 明明的环境 // target: "http://10.197.22.210:8080", // 测试环境 // target: 'http://10.199.139.225:8080', //演示环境 // target: 'http://10.199.139.212:8080', //发版环境 // target: 'http://10.199.134.59:9000', //发版环境 target: 'http://10.199.137.4:10000', //137.4环境 changeOrigin: true, ws: true, rewrite: (path) => path.replace(new RegExp(`^/fimoo-api`), ''), // only https // secure: false }, // 1. 报表 直接搜索 return fimooHttp.post<LoginResultModel>( //发布用的报表 // 2. home跳转ai 直接搜索 window.open('http://47.101.63.105/fimooai#/intelligentchat/index');//外网的 }, open: true, // 项目启动后,自动打开 warmup: { clientFiles: ['./index.html', './src/{views,components}/*'], }, }, // base: '/#',// 换成 /fimoo base: '/fimoo', // 去除哈希模式 fimoo 换成/# base是为了跟后端做桥接转发 build: { outDir: 'fimoo', rollupOptions: { // output: { // manualChunks(id) { // if (id.includes('node_modules')) { // return id.toString().split('node_modules/')[1].split('/')[0].toString(); // } // }, // }, minify: 'terser', // 使用 Terser 进行压缩 terserOptions: { compress: { drop_console: true, // 移除 console.log drop_debugger: true, // 移除 debugger 语句 }, }, }, }, plugins: [ // Inspector({ // openInEditorHost: 'http://localhost:5173', // }), visualizer({ open: true, // 打开报告 gzipSize: true, // 显示 gzip 压缩后的大小 brotliSize: true, // 显示 brotli 压缩后的大小 }), // vueJsx(), ], // css: { // postcss: { // plugins: [ // pxtorem({ // rootValue: 192, // 这里写设计稿的宽度/10即可,例如设计稿宽度是750px就写75 // propList: ['*'], // 需要转换的属性,默认转换所有属性 // selectorBlackList: ['.vben', '.ant'], // CSS选择器黑名单,防止部分选择器被转换.ant .el // // exclude: /node_modules\/(?!element-plus|ant-design-vue|windicss)/, // 忽略element-plus和ant-design-vue相关的文件 // exclude: /node_modules\/(?!vben|ant-design|windicss)/, // 忽略element-plus和ant-design-vue相关的文件 // }), // ], // }, // }, }, }); 这是我B项目的打包配置 现在A项目中 有.gz文件 B项目中没用 请问我现在如何把B项目也开启.gz文件压缩
最新发布
11-05
结合下面两个文件(vue.config.js 和 package.json )内容,如何在 vscode 中启动和调试此项目,输出详细步骤 vue.config.js: const path = require('path'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); // 这里引入`这个CopyWebpackPlugin`插件 function resolve(dir) { return path.join(__dirname, dir); } console.log('process.env.VUE_APP_IS_DEV_ENV: ' + process.env.VUE_APP_IS_DEV_ENV) const isProd = process.env.NODE_ENV === 'production'; /*const { VueCDN, AxiosCDN, VueRouterCDN, VuexCDN } = require('./src/plugins/cdn'); const cdn = { css: [], js: [VueCDN, AxiosCDN, VueRouterCDN, VuexCDN], externals: { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios' } };*/ module.exports = { productionSourceMap: false, outputDir: 'dist', publicPath: './', lintOnSave: !isProd, devServer: { port: 9866, open: true, overlay: { warnings: false, errors: true }, proxy: { // '/api': { // target: 'http://10.2.219.131:8761', //测试环境 // // target: 'http://10.2.219.133:8761', //开发环境 // // target: 'http://10.7.77.107:8761', //演示环境 // changeOrigin: true, // ws: true, // secure: true, // pathRewrite: { // '^/api': '/' // } // } '/api/auth': { // target: 'http://10.2.219.131:8762', //测试环境 target: 'http://10.2.219.133:8762', //开发环境 // target: 'http://localhost:8762', //本地环境 changeOrigin: true, ws: true, secure: true, pathRewrite: { '^/api/auth': '/' } }, '/api/schedule': { // target: 'http://10.2.219.131:8763', //测试环境 target: 'http://10.2.219.133:8763', //开发环境 // target: 'http://localhost:8763', //本地环境 changeOrigin: true, ws: true, secure: true, pathRewrite: { '^/api/schedule': '/' } } } }, css: { loaderOptions: { sass: { prependData: `@import "~@/styles/variables.scss";` } } }, configureWebpack: { name: process.env.VUE_APP_BASE_NAME, resolve: { alias: { '@': resolve('src') } }, //externals: isProd ? cdn.externals : {} externals: {}, plugins: [ ] }, chainWebpack(config) { config.plugins.delete('prefetch'); config.plugins.delete('preload'); // 设置svg config.module .rule('svg') .exclude.add(resolve('src/icons')) .end(); config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end(); //设置开发环境sourceMap config.when(!isProd, config => config.devtool('cheap-source-map')); //生产环境 config.when(isProd, config => { config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' }, commons: { name: 'chunk-commons', test: /[\\/]src[\\/]js[\\/]/, minChunks: 2, // minimum common number priority: 5, reuseExistingChunk: true } } }); /*config.plugin('html').tap(args => { args[0].cdn = cdn; return args; });*/ config.optimization.runtimeChunk('single'); //去除生产环境debugger 和console config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.warnings = false; args[0].terserOptions.compress.drop_console = true; args[0].terserOptions.compress.drop_debugger = true; args[0].terserOptions.compress.pure_funcs = ['console.*']; return args; }); //g-zip开启 config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [ { filename: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.css/, //匹配文件名 threshold: 10240, //对超过10k的数据压缩 minRatio: 0.8 } ]); //打包大小分析 if (process.env.npm_config_report) { config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin); } }); } }; package.json: { "name": "yhl-vue-antd", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production", "build-report": "vue-cli-service build --report", "test:unit": "vue-cli-service test:unit ", "lint": "vue-cli-service lint" }, "dependencies": { "ansi_up": "^5.2.1", "ant-design-vue": "^1.6.5", "axios": "^0.19.2", "clipboard": "^2.0.6", "copy-webpack-plugin": "4.6.0", "core-js": "^3.6.5", "crypto-js": "^4.0.0", "crypto.js": "^2.0.2", "echarts": "^4.8.0", "echarts-liquidfill": "^2.0.6", "echarts-wordcloud": "^1.1.3", "element-ui": "^2.15.10", "esri-loader": "^2.16.0", "file-saver": "^2.0.5", "js-cookie": "^3.0.1", "lodash": "^4.17.21", "mockjs": "^1.1.0", "moment": "^2.29.1", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "ol": "^6.1.1", "photo-sphere-viewer": "^4.0.7", "pubsub-js": "^1.9.4", "screenfull": "^5.0.2", "vue": "^2.6.11", "vue-count-to": "^1.0.13", "vue-cropper": "^0.5.6", "vue-grid-layout": "file:vue-grid-layout-2.3.7-sp1.tgz", "vue-grid-layout-cus": "file:vue-grid-layout-cus-2.3.72.tgz", "vue-i18n": "^8.28.2", "vue-json-viewer": "^2.2.19", "vue-router": "^3.2.0", "vue-seamless-scroll": "^1.1.21", "vuedraggable": "^2.24.3", "vuex": "^3.4.0", "xlsx": "^0.16.0", "yhlcomponents": "file:yhlcomponents-1.3.2-sp9.tgz", "yhlcomponents-codemirror": "file:yhlcomponents-codemirror-1.1.0.tgz", "yhlcomponents-gantt": "file:yhlcomponents-gantt-1.1.0.tgz", "yhlcomponents-lowcode": "file:yhlcomponents-lowcode-1.0.0-sp5.tgz" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.4.0", "@vue/cli-plugin-eslint": "^4.4.0", "@vue/cli-plugin-router": "^4.4.0", "@vue/cli-plugin-unit-jest": "^4.4.0", "@vue/cli-plugin-vuex": "^4.4.0", "@vue/cli-service": "^4.4.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/test-utils": "^1.0.3", "babel-eslint": "^10.1.0", "chalk": "^4.1.0", "compression-webpack-plugin": "^6.1.1", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^6.2.2", "node-sass": "^4.12.0", "prettier": "^1.19.1", "sass-loader": "^8.0.2", "script-loader": "^0.7.2", "svg-sprite-loader": "^5.0.0", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.11", "webpack-bundle-analyzer": "^4.2.0" } }
10-30
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值