gulp:环境变量

用gulp开发的过程中,也会遇到想vue这样的需要通过环境变量来控制项目的情况,通过npm的run命令,我们可以将环境变量传递给项目中的js、html等。具体方法如下:
一:安装 cross-env
npm install cross-env -d

二:package.json中配置scripts:

  "scripts": {
    "build": "cross-env NODE_ENV=production gulp build",
    "serve": "cross-env NODE_ENV=test gulp",
    "test": "cross-env NODE_ENV=test gulp build",
    "trail": "cross-env NODE_ENV=trail gulp build"
  },

build是在gulpfile.js里面定义的方法,其中在less阶段执行的第三步中的函数set_env(process.env.NODE_ENV)

// ...
// 编译less文件
gulp.task('less', function () {
  set_env(process.env.NODE_ENV)
  // ...
})
// ...
gulp.task('build', gulp.series('less', 'cssmove', 'imagemin', 'html','js'))

三:gulpfile.js中生成环境变量文件env.js

var fs = require('fs');
var env = 'test';
function set_env(type){
    env = type || env;
    // 生成env.js文件,用于开发页面时,判断环境
    fs.writeFile("./src/js/env.js", 'function ENV (){ return "' + env + '"};', function(err){
        err && console.log(err);
    });
}
set_env(process.env.NODE_ENV)

这样就可以在js或html文件中引入并使用环境变量了。

在VSCode中出现"gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称"的错误,可能是由于gulp没有正确安装或没有在系统环境变量配置导致的。解决这个问题有几种方法: 解决方法1: 确保gulp已正确安装并配置了系统环境变量。你可以通过在终端中运行"gulp -v"命令来查看是否安装成功。如果没有安装,请确保你按照官方文档https://www.gulpjs.com.***但仍然出现错误,可能是因为VSCode不能找到gulp命令。这时,你可以尝试在VSCode的终端中运行gulp命令的完整路径,比如 "node_modules/.bin/gulp"。如果能够成功执行,说明VSCode没有正确配置系统环境变量。你可以尝试重新配置环境变量,或者在VSCode的设置中指定gulp命令的路径。 解决方法3: 如果以上方法都没有解决问题,你可以尝试在VSCode中使用gulp的全局路径来执行命令。首先,你可以通过运行"npm bin -g"命令来查看全局安装的npm模块的路径。然后,你可以将这个路径添加到VSCode的设置中,以确保能够正确执行gulp命令。 总结来说,解决"gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称"错误的方法包括确保gulp正确安装并配置了系统环境变量,检查VSCode的设置是否正确,以及使用gulp的全局路径来执行命令。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 gulp报错](https://blog.csdn.net/zoepriselife316/article/details/86700375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 。请检查名称](https://blog.csdn.net/qq_51742430/article/details/118485459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [gulp-eslint:一个Gulp插件,用于识别和报告ECMAScriptJavaScript代码中找到的模式](https://download.csdn.net/download/weixin_42161450/15541956)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mosowe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值