gulp-preprocess自定义上下文或环境配置预处理 HTML、JavaScript 和其他文件

于 2021-07-07 14:29:11 发布
阅读量752 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_wade/article/details/118545876
版权

gulpfile.js 

var preprocess = require("gulp-preprocess"),
gulp = require('gulp');
gulp.task("html", function () {
  return gulp
    .src("app/*.html")
    .pipe(preprocess({ context: { NODE_ENV: "production",add:"123", DEBUG: false } }))
    .pipe(gulp.dest("dist/"));
});

gulp.task("scripts", function () {
  return  gulp
    .src(["./app/*.js"])
    .pipe(preprocess({ context: { NODE_ENV: "production",add:"123", DEBUG: false } }))
    .pipe(gulp.dest("./dist/"));
});

html:根据需要通过配置在编译打包过程处理HTML代码  可使用js中逻辑关系

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Your App</title>
    <!-- @if NODE_ENV='production'-->
    <script src="some/production/lib/like/analytics.js"></script>
    <!-- @endif -->
  
  </head>
  <body>
    <!-- @ifdef DEBUG -->
    <h1>Debugging mode - dddd </h1>
    <!-- @endif -->
    <p>
    </p>
  </body>
</html>

js:根据需要通过配置在编译打包过程处理js代码  可使用js中逻辑关系

// @ifdef DEBUG
someDebuggingCall();
// @endif


//@if NODE_ENV ='production'
 var $abc = '789';
//@endif


//@if NODE_ENV ='production' || add ='123'
var $abc = '78989';
//@endif


//@if NODE_ENV ='production' && NODE_ENV =''
var $abc = '78989';
//@endif

function  ddd(){
//@if add.indexOf('prod')>-1
var str = '456';
console.log(str)
var std = '456888';
//@else 
 var gg='oooo';
 var gggg='22222';
 console.log(gg)
//@endif
}

L_wade
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十分钟读懂gulp——前端进阶之路
AIGC大前端小王子
12-24 637
本文主要介绍笔者对gulp的相关学习 一、什么是gulp，为什么要使用它 1.1自动化 - gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。 1.2与平台无关 - 集成内置于所有主要IDE中，人们正在使用gulp与PHP，.NET，Node.js，Java和其他平台。 1.3强大的生态系统 - 使用npm模块做任何你想做的事情+超过2000个用于流文件转换的策划插件 1...
gulp-simple-preprocess:根据环境配置预处理 html、js 和 css
06-03
吞咽简单预处理 使用基于环境配置对 html、js 和 css 应在 simple-preprocess上报告输出。 安装 $ npm install --save-dev gulp-simple-preprocess 用法 var gulp = require ( 'gulp' ) ; var simplePreprocess = require ( 'gulp-simple-preprocess' ) ; gulp . task ( 'default' , function ( ) { return gulp . src ( 'src/*.html' ) . pipe ( simplePreprocess ( { env : 'prod' } ) ) . pipe ( gulp . dest ( 'dist' ) ) ; } ) ; 执照
gulp-preprocess:原始https
04-30
口香糖预处理 插件可基于自定义上下文或环境配置对HTML，JavaScript和其他文件进行预处理 信息 包裹 口水预处理 节点版本 > = 14 Gulp版本 > = 4 用法 安装 npm install gulp-preprocess --save-dev 例子 Gulp文件 var preprocess = require ( "gulp-preprocess" ) ; gulp . task ( "html" , function ( ) { gulp . src ( "./app/*.html" ) . pipe ( preprocess ( { context : { NODE_ENV : "production" , DEBUG : true } } ) ) // To set environment variables in-line .
Gulp执行预处理
weixin_30628077的博客
03-27 57
1. 在项目中安装gulp-sass插件来编译Sass npm install gulp-sass --save-dev 2. 在gulpfile.js中编写 var gulp = require('gulp'); var sass = require('gulp-sass'); //引入插件 gulp.task('sass', function(){ re...
gulp-recipe-preprocess:预处理源文件的接收
05-31
gulp recipe-预处理 用于预处理索引文件的接收。 配置 配方特定 预处理文件 默认值：{上下文：{目标：'开发'}} 预处理开发配置。 预处理文件 默认值：{上下文：{目标：'开发'}} 预处理构建配置。 命令 config.order.preprocess 默认值：10 应用程序接口 二手挂钩 管道.preDevBuild 在开发中的索引文件上应用预处理]。 管道预构建 在构建中的索引文件上应用预处理]。
gulp中的gulpfile配置
08-10
gulp中的gulpfile配置
gulp-rev-delete-original：删除由gulp-rev重写的原始文件
02-04
删除由或重写的原始文件。 安装 npm install --save-dev gulp-rev-delete-original 用法 var gulp = require ( 'gulp' ) ; var rev = require ( 'gulp-rev' ) ; var revcss = require ( 'gulp-rev-css-url' ) ; var ...
gulp-sort：按路径或任何自定义排序比较器对流中的文件进行排序
02-02
排序按路径或任何自定义排序比较器对流中的文件进行排序安装$ npm install gulp-sort --save-dev 用法var sort = require ( 'gulp-sort' ) ;// default sortgulp . src ( './src/js/**/*.js' ) . pipe ( sort ( ) ) ...
浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
热门推荐
huangfuyk.的博客
03-24 1万+
写在前面： 因为gulp是一个基于node的工具，所以我们需要先安装node，具体可见【node的安装及配置】 目录一、gulp简介二、gulp基本使用1. 创建项目2. gulp的安装3. gulp配置文件4. 定义指令三、gulp常用插件四、gulp常用项目流程操作及部分插件使用方法 一、gulp简介 gulp 是一个基于node的自动化打包构建工具，前端开发者可以使用它来处理常见任务： ...
Gulp：插件编写入门
dengrong8117的博客
07-24 146
之前挖了个坑，准备写篇gulp插件编写入门的科普文，之后迟迟没有动笔，因为不知道该肿么讲清楚Stream这货，毕竟，gulp插件的实现不像grunt插件的实现那么直观。 好吧，于是决定单刀直入了。文中插件示例可在这里找到：https://github.com/chyingp/gulp-preprocess 写在前面 我们来看看下面的gruntfile，里面用到了笔者刚写的一个gul...
一个基于Gulp高效可定制的Web前端工作流
08-07
这是一个基于 Gulp 4 的前端工作流，包含：完善的自动化流程，快捷的调试部署工具，强大的 Web 解决方案等
gulp修改了的node_modules.zip
06-10
https://blog.csdn.net/qq_33769914/article/details/105412505按照这篇文章把gulp的配置文件修改了。
gulp变量导入html,javascript – 如何将变量值从GULP注入JS文件
weixin_39955355的博客
06-22 364
你在使用任何一种模块吗？ ES6模块,AMD,CommonJS,……？如果是这样,您可以使用Gulp生成配置模块,您可以在其中注入所需的任何变量.它看起来像这样：config.tmpl.jsmodule.exports = 配置gulp任务var gulp = require('gulp');var template = require('gulp-template');var rename = ...
基于gulp的一个简单的处理多个api域名环境的开发工作流
weixin_33963189的博客
07-27 271
gulp-simple-workflow-multi-host github 简单的工作流 基于Gulp 利用 gulp-preprocess 进行多环境（api域名）开发、打包 sass转css css&js&html压缩 前言 最近苦于搬砖，我们有三个开发环境，不同的环境的api的域名不一样，像我这么懒的人只能一键...
Gulp详解
asd940726的博客
07-16 889
Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。 调用方法也相同（通过传递文件对象流给它）What Is Gulp?是一个构建系统， Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaSc
gulp的自动化开发环境配置
weixin_33725722的博客
05-27 97
2019独角兽企业重金招聘Python工程师标准>>> ...
Gulp环境搭建
Hguzilideaoqi的博客
06-02 154
https://www.gulpjs.com.cn/ 一、      Gulp简介 gulp是前端开发过程中自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；gulp是基于Nodejs的。 Gulp能完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
使用gulp进行简单的分环境配置
loshirleyve的博客
09-19 2925
https://segmentfault.com/a/1190000004138375?_ea=503865出发点 通常我们在测试开发，正式运行等不同环境中，代码所使用的某些配置，如请求的api地址，文件存放位置等是不同的，实现这些配置信息的统一管理和快速配置可以减少我们手动更改的麻烦。解决方案 将不同环境下的配置信息以json形式统一存储在config.json文件中 添加constants
gulp教程，只要你不是傻子就能学会的gulp！！！搭建生产环境和开发环境！全程图解！绝对最详细！
09-04 856
gulp新手指南文章中如果出现任何问题，请不吝提出大家既然搜到gulp，想必是享用到gulp，我就不说gulp是什么东西，有些什么作用之类的废话了，直接教大家怎么使用 首先你得有个下个node，利用node的npm下载gulp，或者用bower，然后手上有个小项目，好了，开始开干吧。 有git的用git,没git的用cmd,现在我用cmd安装gulp（1）打开命令行工具，查看是否安装node，输入n
Cannot find module gulp-preprocess
最新发布
09-09
在你的描述中，你遇到了一个错误：Cannot find module gulp-preprocess。这个错误是由于找不到gulp-preprocess模块导致的。根据你提供的引用内容，你已经安装了gulp和相关插件，并在gulpfile.js中创建了任务，但是在运行gulp时出现了该错误。 要解决这个问题，你需要确保已经正确安装了gulp-preprocess模块。你可以在终端中使用npm install gulp-preprocess命令来安装该模块。确保在安装之前你已经在终端中切换到了项目的根目录。 另外，你还可以检查一下gulpfile.js文件中是否有正确引入gulp-preprocess模块。在文件中的引入部分，你可以添加以下代码：var preprocess = require('gulp-preprocess')。确保引入的路径是正确的。 如果你已经安装了gulp-preprocess模块并且正确引入了它，但是仍然遇到了Cannot find module gulp-preprocess的错误，可能是由于模块的路径问题。你可以尝试删除node_modules目录，并重新运行npm install命令来重新安装所有的依赖模块。 希望这些提示能帮助到你解决问题。如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值