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

news2025/1/12 1:09:46

目录

项目结构

Gulp

VUE使用Gulp

Vue安装Gulp

Vue定义Gulp.js

package.json

build文件夹

config文件夹

static-config文件夹


项目结构

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

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

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

build文件夹

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文件夹

prod.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

qa.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

static-config文件夹

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 打包的代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1017132.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

go初识iris框架(五) -MVC包的使用

在Iris框架中,封装了mvc包作为对mvc架构的支持,方便开发者遵循mvc的开发原则进行开发。 iis框架支持请求数据、模型、持久数据分层处理,并支持各层级模块代码绑定执行。 MVC即:model、view、controller三个部分,分别代…

【微信小程序】swiper的使用

1.swiper的基本使用 <jxz-header></jxz-header> <view class"banner"><swiperprevious-margin"30rpx"autoplayinterval"2000"indicator-dotsindicator-color"rgba(0,0,0,0.3)"indicator-active-color"#bda…

数字化管理平台建设实践

在勘察设计行业&#xff0c;各企业加速推进数字化转型。通过管理要素数字化&#xff0c;不断优化内部组织运营效率&#xff1b;通过生产手段数字化、技术产品数字化&#xff0c;提升服务质量&#xff0c;改善客户体验&#xff1b;通过数字化营销&#xff0c;精准对接市场需求&a…

Linux下的系统编程——信号(十一)

前言&#xff1a; 信号在我们的生活中随处可见&#xff0c; 如&#xff1a;古代战争中摔杯为号&#xff1b;现代战争中的信号弹&#xff1b;体育比赛中使用的信号枪...... 他们都有共性&#xff0c;信号是信息的载体&#xff0c;Linux/UNIX 环境下&#xff0c;古老、经典的通信…

基于Java+SpringBoot+Vue的图书借还小程序的设计与实现(亮点:多角色、点赞评论、借书还书、在线支付)

图书借还管理小程序 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1 小…

.NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core的重要改进!

这是我们计划在今年晚些时候发布的最终.NET 8版本之前的两个候选版本中的第一个。大部分计划中的功能和变更都包含在这个候选版本中&#xff0c;可以供您尝试使用。您可以在文档中找到完整的ASP.NET Core在.NET 8中的新功能列表。一些领域&#xff08;尤其是Blazor&#xff09;…

SpringMvc第六战-【SpringMvcJSON返回异常处理机制】

前言&#xff1a; 小编讲述了&#xff1a;JSR303的概念&#xff0c;应用场景和在具体实例的使用&#xff1b;和拦截器的应用 今天小编来讲述的为cJSON返回&异常处理机制&#xff0c;json返回就不用多说&#xff0c;毕竟大部分数据都是通过Json来传递数据的&#xff0c;异…

elasticsearch4-文档操作

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

VSCode 安装使用教程 环境安装配置 保姆级教程

一个好用的 IDE 不仅能提升我们的开发效率&#xff0c;还能让我们保持愉悦的心情&#xff0c;这样才是非常 Nice 的状态 ^_^ 那么&#xff0c;什么是 IDE 呢 &#xff1f; what IDE&#xff08;Integrated Development Environment&#xff0c;集成开发环境&#xff09;是含代码…

Python实现四维图像绘制系统

文章目录 动图绘制系统的实现播放控制接口优化总结 Python绘图系统&#xff1a; 源码地址&#xff1a;Python打造动态绘图系统&#x1f4c8;从0开始的3D绘图系统&#x1f4c9;一套3D坐标&#xff0c;多个函数&#x1f4ca;散点图、极坐标和子图自定义控件&#xff1a;绘图风格…

Modbus协议介绍及Modbus TCP

这里写目录标题 一、Modbus起源1.起源2.分类3.优势4.应用场景5.ModbusTCP特点⭐⭐⭐ 二、Modbus TCP协议格式1.报文头2.寄存器3.功能码4.协议包书写模板总结 一、Modbus起源 1.起源 Modbus由Modicon公司于1979年开发&#xff0c;是一种工业现场总线协议标准。 Modbus通信协议…

网络存储解决方案:选择与配置

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

03MyBatis-Plus中的常用注解

常用注解 TableName MyBatis-Plus根据BaseMapper中指定的泛型(实体类型名)确定数据库中操作的表,如果根据实体类型名找不到数据库中对应的表则会报表不存在异常 //向表中插入一条数据 Test public void testInsert(){User user new User(null, "张三", 23, "…

基于Java+SpringBoot+Vue+uniapp点餐小程序(亮点:协同过滤算法、会员系统,购物车结算、在线聊天)

校园点餐小程序 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 系统功能结构设计4.2 主要功能描述 五…

【操作系统】深入浅出死锁问题

死锁的概念 在多线程编程中&#xff0c;我们为了防止多线程竞争共享资源而导致数据错乱&#xff0c;都会在操作共享资源而导致数据错乱&#xff0c;都会在操作共享资源之前加上互斥锁&#xff0c;只有成功获得到锁的线程&#xff0c;才能操作共享资源&#xff0c;获取不到锁的…

Python新手入门

文章目录 概要python代码运行结果小结 概要 以下内容为python各种输出语句的语法&#xff01; python代码 # 标准化输出 print("这是标准化输出&#xff01;")# 格式化输出 print("这是第1种%s"%"格式化输出&#xff01;") print("这是第…

牛客小白月赛 78

比赛地址 : 牛客小白月赛78 A.几何糕手 题目链接 : 几何糕手 题面 : 思路 : 数学模拟题; 最大面积就是在a与b成一条直线的情况下&#xff1b; so : 输出pi * (ab) * (ab)即可 注意 : 注意精度!!! 代码 : #include<iostream> #include<algorithm> u…

STM32--PWR电源控制

文章目录 PWR电源电源管理器上电复位&#xff08;POR&#xff09;和掉电复位&#xff08;PDR&#xff09; 可编程电压监测器&#xff08;PVD&#xff09;低功耗模式睡眠模式停止模式待机模式 睡眠模式工程停止模式待机模式 PWR STM32的PWR模块是其电源管理系统的核心部分&…

JDK12特性

文章目录 JAVA12概述语法层次的改变switch 表达式(预览) API层次的改变支持数字压缩格式化String新方法Files新增mismatch方法 关于GC的特性Shenandoah GC可中断的 G1 Mixed GC增强G1 JAVA12概述 2019年3月19日&#xff0c;java12正式发布了&#xff0c;总共有8个新的JEP(JDK …

005-第一代光电小工具(一)

第一代光电小工具(一) 文章目录 第一代光电小工具(一)项目介绍大致原理描述核心控件QCustomPlot关于QCustomPlot 播放音频软件截图 关键字&#xff1a; Qt、 Qml、 QCustomPlot、 曲线、 SQLite 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&…