1. Toy模板网首页
  2. > Toy博客

VUE build:gulp打包：测试、正式环境

8月前 作者：@幻影忍者 分类：Toy博客 阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了VUE build:gulp打包：测试、正式环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

项目结构

Gulp

VUE使用Gulp

Vue安装Gulp

Vue定义Gulp.js

package.json

build文件夹

config文件夹

static-config文件夹

项目结构

VUE build:gulp打包：测试、正式环境,VUE,vue.js,前端,javascript

Gulp

    Gulp是一个自动化构建工具，可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写，可以更加灵活地管理代码以及任务流程.

   对于Vue.js前端框架，使用Gulp并不是必须的，因为Vue.js提供了Vue-cli，可以帮助前端开发者快速搭建项目以及项目的构建环境。Vue-cli是一个基于Webpack的脚手架工具，可以快速创建Vue.js应用程序，并且帮助生成项目骨架以及构建系统。其内置了webpack、Babel、ESLint等工具，可以方便地进行模块打包、ES6转换、代码检查等。使用Vue-cli，可以弹性地对项目进行管理和构建。

   但是对于一些需要个性化开发的开发者来说，Vue-cli的功能是不够的。前端开发者需要使用其他的构建工具来满足他们的需求，比如Gulp。使用Gulp可以帮助开发者扩展Vue-cli的功能，同时使构建流程更加简单，例如使用Gulp可以定制SASS/LESS文件编译、CSS文件合并压缩、JS文件压缩混淆、图片压缩等等。这样可以方便地定制应用程序及其构建流程，同时减少重复操作。

   而且，使用Gulp也可以减少构建速度。Vue-cli虽然帮助我们构建了项目骨架以及构建环境，但是在打包大规模的代码时，打包速度较慢。使用Gulp可以在webpack后处理流程中进行Sass编译、Html统一压缩等操作，并提高构建速度。

   总之，对于Vue.js前端框架，使用Gulp并不是必须的，但是它提供了扩展功能、使构建流程更加简单、加快了打包速度等优点。使用Gulp进行项目的构建可以为前端开发者节省时间、精力，并且优化构建方式。因此，个性化开发需要Gulp的前端开发者可以使用它对Vue-cli进行扩展，而其余开发者可以继续使用Vue-cli快速构建Vue.js应用程序。

VUE使用Gulp

Vue安装Gulp

   首先，我们需要安装所需的依赖。我们需要全局安装Gulp，通过npm命令安装：

  npm install -g gulp-cli

    接下来，我们需要在项目根目录下安装Gulp和其他依赖（比如babel、browserify等）：

   npm install gulp babelify browserify gulp-babel gulp-rename gulp-sourcemaps gulp-uglify vinyl-buffer vinyl-source-stream vueify --save-dev

Vue定义Gulp.js

gulpfile.js代码如下：

var gulp = require('gulp');

var $    = require('gulp-load-plugins')();

var path = require('path');

var del  = require('del');

var version     = ''; // 版本号

var versionPath = ''; // 版本号路径

// prod-运行环境  qa-测试环境

var env         = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod';

// 文件夹

var distPath    = path.resolve('./dist');

// 创建版本号(年月日时分)

(function () {

  var d = new Date();

  var yy = d.getFullYear();

  var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);

  var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();

  var h  = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();

  var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();

  version = "" + yy + MM + DD + h + mm;

  versionPath = distPath + '/' + version;

})();

// 编译

if('qa'===env){

  gulp.task('build', $.shell.task([ 'node build/build-qa.js' ]));

}else if('prod'===env){

  gulp.task('build', $.shell.task([ 'node build/build-prod.js' ]));

}

// 创建版本号目录

gulp.task('create:versionCatalog', function () {

  return gulp.src(`${distPath}/static/**/*`)

    .pipe(gulp.dest(`${versionPath}/static/`))

});

// 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量

gulp.task('replace:cdnUrl', function () {

  return gulp.src(`${versionPath}/static/js/manifest.js`)

    .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))

    .pipe(gulp.dest(`${versionPath}/static/js/`))

});

// 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量

gulp.task('replace:version', function () {

  return gulp.src(`${versionPath}/static/config/index-${env}.js`)

    .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))

    .pipe(gulp.dest(`${versionPath}/static/config/`))

});

// 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js

gulp.task('concat:config', function () {

  return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])

    .pipe($.concat('index.js'))

    .pipe(gulp.dest(`${distPath}/config/`))

});

//清除, 编译 / 处理项目中产生的文件

gulp.task('cleanBuild', function () {

  return del([`${distPath}/static`, `${versionPath}/static/config`])

});

// 清空

gulp.task('clean', function () {

  return del([versionPath])

});

//gulp.series|4.0 依赖

//gulp.parallel|4.0 多个依赖嵌套

gulp.task('default',gulp.series(gulp.series('build','create:versionCatalog','replace:cdnUrl','replace:version','concat:config','cleanBuild')));

package.json

VUE build:gulp打包：测试、正式环境,VUE,vue.js,前端,javascript

build------打包正式环境

build:qa----打包测试环境

build文件夹

VUE build:gulp打包：测试、正式环境,VUE,vue.js,前端,javascript

build-prod 、webpack.prod.confi.js 正式

build-qa  、webpack.qa.conf.js       测试

build-prod.js代码

'use strict'

require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')

spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

  if (err) throw err

  webpack(webpackConfig, (err, stats) => {

    spinner.stop()

    if (err) throw err

    process.stdout.write(stats.toString({

      colors: true,

      modules: false,

      children: false,

      chunks: false,

      chunkModules: false

    }) + '\n\n')

    if (stats.hasErrors()) {

      console.log(chalk.red('  Build failed with errors.\n'))

      process.exit(1)

    }

    console.log(chalk.cyan('  Build complete.\n'))

    console.log(chalk.yellow(

      '  Tip: built files are meant to be served over an HTTP server.\n' +

      '  Opening index.html over file:// won\'t work.\n'

    ))

  })

})

build-qa.js代码

'use strict'

require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.qa.conf')

const spinner = ora('building for production...')

spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

  if (err) throw err

  webpack(webpackConfig, (err, stats) => {

    spinner.stop()

    if (err) throw err

    process.stdout.write(stats.toString({

      colors: true,

      modules: false,

      children: false,

      chunks: false,

      chunkModules: false

    }) + '\n\n')

    if (stats.hasErrors()) {

      console.log(chalk.red('  Build failed with errors.\n'))

      process.exit(1)

    }

    console.log(chalk.cyan('  Build complete.\n'))

    console.log(chalk.yellow(

      '  Tip: built files are meant to be served over an HTTP server.\n' +

      '  Opening index.html over file:// won\'t work.\n'

    ))

  })

})

webpack.prod.conf.js

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env =require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].js'),

    chunkFilename: utils.assetsPath('js/[id].js')

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': env

    }),

    new UglifyJsPlugin({

      uglifyOptions: {

        compress: {

          warnings: false

        }

      },

      sourceMap: config.build.productionSourceMap,

      parallel: true

    }),

    // extract css into its own file

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].css'),

      allChunks: false,

    }),

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

        ? { safe: true, map: { inline: false } }

        : { safe: true }

    }),

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'? 'index.html' : config.build.index,

      template: 'index.html',

      inject: false,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

      },

      chunksSortMode: 'dependency'

    }),

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.ModuleConcatenationPlugin(),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks (module) {

        // any required modules inside node_modules are extracted to vendor

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

})

if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

  )

}

if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))

}

module.exports = webpackConfig

webpack.qa.conf.js代码

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env =require('../config/qa.env')

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].js'),

    chunkFilename: utils.assetsPath('js/[id].js')

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': env

    }),

    new UglifyJsPlugin({

      uglifyOptions: {

        compress: {

          warnings: false

        }

      },

      sourceMap: config.build.productionSourceMap,

      parallel: true

    }),

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].css'),

      allChunks: false,

    }),

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

        ? { safe: true, map: { inline: false } }

        : { safe: true }

    }),

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'

        ? 'index.html'

        : config.build.index,

      template: 'index.html',

      inject: false,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

      },

      chunksSortMode: 'dependency'

    }),

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.ModuleConcatenationPlugin(),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks (module) {

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

})

if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

  )

}

if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))

}

module.exports = webpackConfig

config文件夹

VUE build:gulp打包：测试、正式环境,VUE,vue.js,前端,javascript

prod.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

qa.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

static-config文件夹

VUE build:gulp打包：测试、正式环境,VUE,vue.js,前端,javascript

index-prod.js代码

/**

 * 生产环境

 */

; (function () {

  window.SITE_CONFIG = {};

  // api接口请求地址

  window.SITE_CONFIG['baseUrl'] = 'xxxxxx';

  // cdn地址 = 域名 + 版本号

  window.SITE_CONFIG['domain'] = './'; // 域名

  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)

  window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain +      window.SITE_CONFIG.version;

})();

index-qa.js

/**

 * 测试环境

 */

; (function () {

  window.SITE_CONFIG = {};

  // api接口请求地址

  window.SITE_CONFIG['baseUrl'] = 'xxxxxxxx';

  // cdn地址 = 域名 + 版本号

  window.SITE_CONFIG['domain'] = './'; // 域名

  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)

  window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;

})();

以上是gulf 打包的代码。文章来源地址https://www.toymoban.com/news/detail-733254.html

到了这里，关于VUE build:gulp打包：测试、正式环境的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue纯前端实现下载excel文件，本地和测试环境都可正常下载

    vue纯前端实现下载excel文件，本地和测试环境都可正常下载

    vue2纯前端实现下载excel文件，本地和测试环境都可正常下载。 1、把后端给的excel文件放到本地项目文件夹中，位置如图所示： 2、在需要展示下载功能的页面中引入该excel文件，如图所示： 3、使用a链接，href绑定引入的excel文件路径，并添加download属性，download属性值就是下载

    2024年02月13日
    浏览(35)

  • 已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错，接口调不通 配置proxy代理解决跨域问题的原理是： 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(49)

  • js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。

    问题描述 ： 代码： 测试环境下可以正常复制 ，但放到线上会报错：找不到 .writeText 百度分析： 在 Chrome 的 DevTools 控制台下执行  navigator.clipboard  返回  undefined ，经查找资料发现是浏览器禁用了非安全域的  navigator.clipboard  对象，哪些地址是安全的呢？ 安全域包括本地访

    2024年02月13日
    浏览(29)

  • 搭建vue项目环境之二（完成基础环境的搭建之后开始正式安装）

            由于工作太忙了，一直都是东奔西跑的，好多知识都是零散的，最近刚好有空，就计划利用这个空闲时间认真的整理以前学过的知识，帮助自己回顾过往，中间也难免有很多错误，欢迎指正挑刺。一直以来都是万金油，最后就是啥都会，但是也都是啥都会一点也都不

    2024年02月11日
    浏览(33)

  • vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失

    问题：vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失 解决办法及原因： elementui在2.12版本中icon数量较之2.4.9版本的扩展2倍不止。原来webpack中对于字体loader的限制是limit10000，就会将字体转换为base64，2.12版本中字节已经超过

    2024年02月16日
    浏览(45)

  • vue项目发布有缓存，正式环境不更新（解决方案）

    前言：每次测试构建或者打包更新版本发到服务器上，导致偶尔会出现不能及时更新到最新代码，浏览器存在缓存的问题。 定义版本变量： const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，实际上不用加时间戳，webpack内部还自动变化hash值 方法1、 Linux服务器设

    2024年02月08日
    浏览(31)
  • electron打包Vue前端

    electron打包Vue前端

    效果：electronforge可将前端静态页面打包成.exe、.deb和.rpm等，能适配各种平台 示例：Windows环境下将前端 Vue 项目打包成exe文件 打包后的 exe 文件 运行 exe 文件 一、项目准备 开源项目 RouYi 下载 本地环境 安装依赖 报错 3.1 原因：Node版本高了 3.2 修改 package.json 3.3 修改后的 pack

    2024年04月26日
    浏览(27)
  • IIS部署vue前端过程（含IIS及相关配置和安装），部署遇到的问题及报错（承接vueconfig.js全局配置环境变量，跨域问题）

    IIS部署vue前端过程（含IIS及相关配置和安装），部署遇到的问题及报错（承接vueconfig.js全局配置环境变量，跨域问题）

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端（以vue为主） 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步，打开“ 控制面板 ”，点击“ 网络和Internet ”。 第二步，点击左侧“ 程序 ”，然后点击

    2024年02月08日
    浏览(49)

  • idea编译打包前端vue项目

    网上download了一个前端vue项目 第一次接触前端记录一下编译打包遇到的问题 1、idea前端项目打包一般是依赖                 groupIdorg.codehaus.mojo/groupId                 artifactIdexec-maven-plugin/artifactId                 version3.0.0/version 这个maven插件 里面可以定义要执行的打包步

    2024年01月23日
    浏览(33)

  • vue项目报错：Module build failed (from ./node_modules/vue-loader/index.js)

    运行项目报错 Module build failed (from ./node_modules/vue-loader/index.js):TypeError: Cannot read properties of undefined (reading ‘vue’) 解决方法：提高vue-loader版本 参考===

    2024年02月17日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包