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

目录

项目结构

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.rhkb.cn/news/134884.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Git把项目上传到Gitee的详细步骤

1.到Git官网下载并安装 2.到Gitee官网进行注册,然后在Gitee中新建一个远程仓库 3.设置远程仓库的参数 4.返回Gitee查看仓库是否生成成功 5.新建一个文件夹作为你的本地仓库 6.将新建好的文件夹初始化成本地仓库 第一步:右键点击刚创建的本地仓库&#…

Tomcat 的部署和优化

目录 1、什么是Tomcat 1.1、静态页面的选择 2、Tomcat是怎么运行的 3、安装jdk & 部署jdk环境 & Tomcat 安装 1、安装jdk 2、配置jdk环境变量 3、tomcat安装 4、Tomcat启动 5.优化tomcat启动速度 6.Tomcat的主要命令 7.Tomcat 配置虚拟主机 8.Tomca…

第2章_freeRTOS入门与工程实践之单片机程序设计模式

本教程基于韦东山百问网出的 DShanMCU-F103开发板 进行编写,需要的同学可以在这里获取: https://item.taobao.com/item.htm?id724601559592 配套资料获取:https://rtos.100ask.net/zh/freeRTOS/DShanMCU-F103 freeRTOS系列教程之freeRTOS入…

AMS爆炸来袭,上线即巅峰

1.关于首发项目Antmons(AMS)空投结果 Gate.io Startup 首发项目Antmons代币AMS于Aug15th,AM 07:00开始下单,24小时内下单同等对待总共有15,950人下单,下单总价值超过1,000万美金分发系数约为0.001640495298341。根据上线规则AMS项目认购成功,…

刷一下算法

记录下自己的思路与能理解的解法,可能并不是最优解法,不定期持续更新~ 1.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容…

linux查看进程对应的线程(数)

首先,top或ps查看进程列表,确定要查看的进程pid,如下面40698 查看进程的线程情况 查看进程:top -p 40698 查看线程:top -p 40698 -d 3 -H 其中-d是刷新频率 可看到此进程共211个线程,运行中的是211个。…

QStandardItem通过setCheckable添加复选框后无法再次通过setCheckable取消复选框的问题

前言 如题所示&#xff0c;通过setCheckable添加复选框后&#xff0c;想要通过setCheckable(false)取消复选框&#xff0c;你会发现根本没有作用的。 问题复现 #include "widget.h" #include "ui_widget.h" #include <QList>Widget::Widget(QWidg…

DockerCompose

DockerCompose Docker Compose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器&#xff01; 初识DockerCompose Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。格式如下&#xff1a; version: &…

Spring注解家族介绍: @RequestMapping

前言&#xff1a; 今天我们来介绍RequestMapping这个注解&#xff0c;这个注解的内容相对来讲比较少&#xff0c;篇幅会比较短。 目录 前言&#xff1a; RequestMapping 应用场景&#xff1a; 总结&#xff1a; RequestMapping RequestMapping 是一个用于映射 HTTP 请求…

Jprofiler的使用查看oom

一、安装 idea安装插件 安装客户端 链接 IDEA配置Jprofiler执行文件 二、产生oom import java.util.ArrayList; import java.util.List;//测试代码 public class TestHeap {public static void main(String[] args) {int num 0;List<Heap> list new ArrayList&l…

超详细!魔改为中文sqlmap的使用教程

超详细&#xff01;魔改为中文sqlmap的使用教程 1.SQLMAP介绍2.Qitian基础信息3.Qitian绕过WAF 魔改了一版中文版的SQLMAP&#xff0c;如下图&#xff1a; 1.SQLMAP介绍 Sqlmap是一个自动化的sql注入工具&#xff0c;其主要功能是扫描、发现并利用给定url的SQL注入漏洞&#…

【SpringMVC】JSR303与拦截器的使用

文章目录 一、JSR3031.1 JSR303是什么1.2 JSR 303的好处包括1.3 常用注解1.4 实例1.4.1 导入JSR303依赖1.4.2 规则配置1.4.3 编写校验方法1.4.4 编写前端 二、拦截器2.1 拦截器是什么2.2 拦截器与过滤器的区别2.3.应用场景2.4 快速入门2.5.拦截器链2.6 登录拦截权限案例2.6.1 L…

Docker搭建ELK日志采集服务及Kibana可视化图表展示

架构 ES docker network create elkmkdir -p /opt/ELK/es/datachmod 777 /opt/ELK/esdocker run -d --name elasticsearch --net elk -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -v /opt/ELK/es/plugins:/usr/share/elasticsearch/plugins -v /opt/…

蓝桥杯2023年第十四届省赛真题-更小的数--题解

目录 蓝桥杯2023年第十四届省赛真题-更小的数 题目描述 输入格式 输出格式 样例输入 样例输出 提示 【思路解析】 【代码实现】 蓝桥杯2023年第十四届省赛真题-更小的数 时间限制: 3s 内存限制: 320MB 提交: 895 解决: 303 题目描述 小蓝有一个长度均为 n 且仅由数字…

RK3588 点亮imx586摄像头

一.硬件原理图 mipi摄像头硬件确认点&#xff1a; 1.供电&#xff1a;5V&#xff0c;2.8V&#xff0c;1.2V&#xff0c;1.8V&#xff0c;reset脚&#xff08;硬拉3.3&#xff0c;上电的时候从低到高&#xff09;&#xff0c;pwron脚外接 3.3V。 2,时钟&#xff1a;MCLKOUT是2…

Linux 文件创建、查看

touch、cat、more命令 ①touch命令——创建文件 ②cat命令——查看文件内容全部显示 这是txt.txt文件内容 使用cat命令查看 ③more命令——查看文件内容支持翻页 在查看的过程中&#xff0c;通过空格翻页&#xff0c;通过q退出查看

基于Xml方式Bean的配置-初始化方法和销毁方法

SpringBean的配置详解 Bean的初始化和销毁方法配置 Bean在被实例化后&#xff0c;可以执行指定的初始化方法完成一些初始化的操作&#xff0c;Bean在销毁之前也可以执行指定的销毁方法完成一些操作&#xff0c;初始化方法名称和销毁方法名称通过 <bean id"userService…

linux万字图文学习进程信号

1. 信号概念 信号是进程之间事件异步通知的一种方式&#xff0c;属于软中断。 1.1 linux中我们常用Ctrlc来杀死一个前台进程 1. Ctrl-C 产生的信号只能发给前台进程。一个命令后面加个&可以放到后台运行,这样Shell不必等待进程结束就可以接受新的命令,启动新的进程。2. S…

微服务架构介绍

系统架构的演变 1、技术架构发展历史时间轴 ①单机垂直拆分&#xff1a;应用间进行了解耦&#xff0c;系统容错提高了&#xff0c;也解决了独立应用发布的问题&#xff0c;存在单机计算能力瓶颈。 ②集群化负载均衡可有效解决单机情况下并发量不足瓶颈。 ③服务改造架构 虽然系…

解决Springboot使用Junit测试时对数据库的修改无效

现象 在使用Junit做单元测试的过程中&#xff0c;比如对mybatis的dao进行单元测试&#xff0c;发现对数据库的select操作正常&#xff0c;可以获取数据&#xff0c;但insert、update、delete操作即使运行不报错&#xff0c;仍然不能不能对数据产生修改和插入。 原因和解决 原…