首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Solved gulp :为网站构建多个dist,每个dist都有自己的自定义js

问题:Solved gulp :为网站构建多个dist,每个dist都有自己的自定义js

回答: 在网站开发中,使用Gulp可以帮助我们自动化构建任务,包括编译、压缩、合并等操作。针对构建多个dist(distribution)的需求,可以通过以下步骤解决:

  1. 在项目根目录下创建一个gulpfile.js文件,用于定义Gulp任务。
  2. 首先,需要安装Gulp及相关插件。在命令行中执行以下命令:
  3. 首先,需要安装Gulp及相关插件。在命令行中执行以下命令:
  4. 在gulpfile.js中引入所需的插件:
  5. 在gulpfile.js中引入所需的插件:
  6. 定义一个名为"dist"的Gulp任务,用于构建多个dist:
  7. 定义一个名为"dist"的Gulp任务,用于构建多个dist:
  8. 在命令行中执行以下命令,运行"dist"任务:
  9. 在命令行中执行以下命令,运行"dist"任务:

以上步骤中,我们通过定义一个名为"dist"的Gulp任务,遍历每个dist并进行构建。在构建过程中,我们使用了gulp-concat插件将自定义js文件合并为一个文件,使用gulp-uglify插件压缩js文件,使用gulp-rename插件重命名文件。最终,构建结果将输出到对应的dist目录中。

推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款支持前后端一体化开发的云原生应用托管平台。通过腾讯云云开发,您可以快速搭建网站、小程序、移动App等应用,并且无需关心服务器运维、数据库配置等繁琐工作。了解更多信息,请访问腾讯云云开发官网:腾讯云云开发

注意:本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如需了解更多相关产品和服务,请自行搜索相关品牌商的官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Gulp 在金蝶云平台项目中使用经验

gulp 初试用 在用了 Grunt 一段时间内,越来越觉得自己离不开构建工具。但是,Grunt 构建速度让我有点苦恼,即使是编译 sass 也需要花上一段时间。...下面代码是使用 gulp 初次来编译 sass,由于一直都有点习惯了 Grunt 那编译速度单位秒级别的速度,刚输入命令还没反应过来,就已经以毫秒级速度编译完了。...如果想多个浏览器都可以自动刷新,只需要打开其它浏览器,把刚刚链接输入即可。...# 打包上线 开发阶段 执行 gulp dev 命令,gulp 会进行一系列构建操作,最后在 dist 目录下生成可运行文件,并实时监听源文件,一旦源文件改动会执行相应操作。...,最终每个页面都打包一个 js 文件单入口。

1.7K00

给初学者Gulp教程(译)

如果你足够疯狂,你甚至可以使用Gulp创造一个静态页面生成器(我已经做到了!)。所以,Gulp是非常强大,但是如果你想创建你自己构建流程,你就要去学习如何使用Gulp。...为什么选择Gulp? 类似Gulp工具通常被人称作“构建工具”,因为它们是运行任务来构建网页工具。两个最流行构建工具是Gulp和Grunt(Chris 有一篇文章关于学习Grunt)。...-- endbuild --> 可以为js,css 或者remove。最好设置type你试图连接文件类型。...完成后,Gulp同时运行第二个参数里每个任务。...我们也构建了第二个任务,build,创建一个dist文件夹给生产用网页。我们编译SassCSS,压缩我们所有的资源文件以及复制必要文件夹到dist文件夹。

4.3K20
  • npm、npm scripts

    每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。...webpack可以将代码拆分成多个区块,每个区块包含一个或多个模块,它们可以按需异步加载,极大地减少了页面初次加载时间。...使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器 gulp不仅能对网站资源进行优化,而且在开发过程中很多重复任务能够使用正确工具自动完成...('dist/css/')); }) //js合并压缩 gulp.task('build:js', function() { gulp.src('src/js/*.js')...dist/js/')); }) //图片压缩 gulp.task('build:image', function() { gulp.src('src/imgs/*')

    2.2K41

    9012教你如何使用gulp4开发项目脚手架

    脚手架用到第三方插件介绍 gulp-jshint ——js语法检测 gulp-util ——终端控制台打印自定义错误信息 http-proxy-middleware ——设置代理,配合gulp-connect...还有很多常用插件可以更好我们项目服务,大家也可以整合自己插件让项目更加完善。...项目目录设计 1.src目录,即我们开发项目时源目录,具体结构如下: 我们定义views是我们视图层,即页面文件目录,js目录业务逻辑脚本文件,lib存放第三方框架,include目录公共部分存放目录.../dist/static', // 配置构建目录 } 复制代码 gulp.dev.js const gulp = require('gulp'); // js const Jshint = require...更多推荐 如何用不到200行代码写一款属于自己js类库) 让你瞬间提高工作效率常用js函数汇总(持续更新) 一张图教你快速玩转vue-cli3 3分钟教你用原生js实现具有进度监听文件上传预览组件

    1.4K10

    使用Gulp

    为什么要使用Gulp 在前端开发中通常需要做,预处理语言编译、js文件压缩、css文件压缩、图片压缩等一系列工作,而使用Gulp可以自动化完成这些工作,从而提高网站开发效率,在我博客使用Less...中介绍了将Less文件编译成CSS文件方法,仔细观察可以看到如果按照博客中介绍方法,在编译多个Less文件或者编译不同文件夹下Less文件时需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作...Gulp特性 易于使用 通过代码优于配置策略,Gulp 让简单任务简单,复杂任务可管理 构建快速 利用 Node.js威力,你可以快速构建项目并减少频繁 IO 操作 插件高质 Gulp...严格插件指南确保插件如你期望那样简洁高质得工作 易于学习 通过最少 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道 Gulp常用网站 Gulp官方网站:http://gulpjs.com...创建一个code文件夹,并进入到code文件夹下 下面的命令是在Git bash中运行,运行这几条命令,需要安装Git,没有安装Git可以在电脑上自己手动创建一个code文件夹,并且进入code文件夹下

    57230

    使用Gulp压缩静态资源

    Gulp是什么 Gulp是一个用于对静态Web资源进行打包工具,可以实现对静态资源压缩,本质上是一个npm模块。 在正式使用Gulp之前,需要先安装并配置好Node.js环境。...: 4.0.2 如何使用Gulp Gulp是一个流式构建工具,具体要执行任务可以在项目根目录下新建一个名叫“gulpfile.js文件,并在其中进行配置。.../dist')); }) // 明确指定默认构建操作包含任务,如果不指定默认构建任务,则需要以参数形式指定任务,如:gulp minscript mincss minhtml copy module.exports.default...,将相应资源打包到项目根目录下dist目录中。...//www.cnblogs.com/zlf1914/p/13144381.html gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

    73520

    基于 gulp fancybox 源码压缩

    那么,下面摘录 segmentfault 前端分享专栏中《gulp前端构建工具白话讲解,也包含自己使用一些心得体》一些回答,让大家直观了解一下。...那么 gulpfile.js 就是起到了这样一个作用。 接下来,我们以 fancybox 源码例,简单了解一下 Gulp 安装和使用。 5....dist/jquery.fancybox.min.js 文件应用到博客或者其他网站页面,完成最后设置。...参考资料 panw3i,《npm --save-dev --save 区别》,简书 小丑皇,《gulp前端构建工具白话讲解,也包含自己使用一些心得体会》,SegmentFault 十年踪迹博客,《...使用Gulp构建网站小白教程》,十年踪迹博客 bibichuan,《fancybox3使用总结》,bibichuan 底盘 - Github 个人博客

    1.3K30

    前端工作流

    摩登时代 在 Node.js 出现以前,以往前端开发工作属于石器时代。而随着前端技术大爆炸来临,我们需要赶上这一次潮流,加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。...$ npm init 导入包 这个我构建json文件,将devDependencies下所有节点复制过去。...$ npm install 构建项目 在当前目录下创建source文件夹同时其创建子目录,如下结构, 其中views目录下layouts用于视图模版,application用于视图文件 + node_modules.../dist/') gulp.task 'clean', -> del ['./dist/css','./dist/js','./dist/gallery', './dist/img', '....监听文件,当发生改动时调用相应任务 build用于构建编译文件 default默认任务,使用gulp命令执行任务 browser-sync用于开发环境实时更新页面,免去手动刷新烦恼 rebuild

    62010

    放弃webpack,拥抱gulp

    gulp定义是:用自动化构建工具增强你工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本,或者升级历史传统项目,解放你重复打包,压缩,解压之类操作。...个人理解gulp是一种命令式编程体验,更注重构建过程,所有的任务需要你自己手动创建,你会对构建流程会非常清楚,这点不像webpack,webpack就是一个开箱即用声明式方式,webpack是一个模块化打包工具...中,任务之间依赖关系需要我们自己手动写一些执行任务流,现在一些打包后dist文件并不会自动注入html中。...,所有的自动化工作流操作都牢牢掌握在自己手上,你可以用gulp写一些自动化脚本,比如,文件上传,打包,压缩,或者改造传统前端应用。...用gulp写了一个简单应用,但是发现中途需要找好多gulp插件,gulp生态还算可以,3w多个star,生态相对丰富,但是有些插件常年不更新,或者版本更新不支持,比如gulp-image,当你按照官方文档使用最新包时

    91010

    使用Electron开发桌面级程序——J.A.R.V.I.S诞生记

    这里选择环境选择是需要打包项目的根目录中构建命令,比如我小程序项目使用gulp构建,gulpfile中定义了四种打包命令,那么在点击开始项目构建后,程序会自动切换到黑盒中项目根目录下执行对应命令并打包...dist electron输出目录 通过webpack将项目打包一个electron标准项目,输出到dist目录下,package.json将会以此目录下mian.js作为入口文件进行运行。...webpack编译输出到输出目录下——dist/electron/main.js render负责前端页面的可视化渲染,使用vue+element可以快速构建出一套现代化界面,某些情况下也可能会与原生...示例(实现分环境打包接口) 这里需要注意一下,这个接口实现是非常灵活,需要根据你当前项目的编译文件进行配置,比如我项目开发时使用gulp打包编译环境到dist,其编译命令分别为: gulp build...项目管理器功能,可配置多个不同项目分别进行打包上传。 高度自定义配置信息:gitlabtoken、钉钉机器人token、不同项目的打包执行脚本、不同环境配置。

    2.3K40

    基于 gulp fancybox 源码压缩

    Gulp 简单介绍 Gulp 在官网 title 是:用自动化构建工具增强你工作流程,即一款基于流前端自动化构建工具。作为前端菜鸟,第一次听到这样描述,是不是跟小编一样满头雾水?...那么,下面摘录 segmentfault 前端分享专栏中《gulp前端构建工具白话讲解,也包含自己使用一些心得体》一些回答,让大家直观了解一下。...现在请大家思考这样一个问题 倘若我让线上网站(不论 PC 还是移动端)使用 css 文件,JS 文件,images 文件等静态资源,JS 是压缩过,css 是压缩过,images(主要针对雪碧图...那么 gulpfile.js 就是起到了这样一个作用。 接下来,我们以 fancybox 源码例,简单了解一下 Gulp 安装和使用。...压缩 fancybox 源码 最后,把编译后dist/jquery.fancybox.min.js文件应用到博客或者其他网站页面,完成最后设置。

    1.1K10

    node.js 使用教程-2.Gulp 打包构建入门与使用

    前言 gulp 是一个前端项目开发自动化打包构建工具, 类似的打包工具还有webpack。...npm init -y package.json内容 gulpfile.js 文件需要自己在项目根目录下新建,整个目录结构如下 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小,提高页面打开速度...另存到dist压缩后文件 .pipe(gulp.dest('dist/js')) }) 执行命令 > gulp js src/js/ext.js 原始代码如下 压缩后代码 gulp...是基于任务来完成构建,通过gulp.task() 创建一个任务 gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。...,希望能一次执行多个任务,于是就有个default 默认任务来管理 // 配置 default 默认任务 gulp.task('default', ['js', 'html']); 执行时候只需输入

    1.3K20

    快速搭建gulp项目实战

    gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复任务能够使用正确工具自动完成;使用她,我们不仅可以很愉快编写代码,而且大大提高我们工作效率...文件 .pipe(gulp.dest("dist")) //文件去处 }) dist是通过 gulp copyHtml生成文件夹   常用代码压缩 var gulp = require('gulp....pipe(imagemin()) 图片压缩 .pipe(gulp.dest("dist/images")) //放入到dist目录下面的images文件 }) //js压缩 gulp.task...("uglify",function() { gulp.src("src/js/*.js") .pipe(uglify()) //压缩js代码 .pipe(gulp.dest("dist/js...")) //通过gulp uglify命令,自动输出dist下面js文件 }) //css压缩并less转换成css gulp.task("lessc",function() { gulp.src(

    1.1K20

    Gulp 定制专属提速“外挂”(下)

    静态资源请求添加Query 这个理解起来比较简单,就是在静态资源请求后面添加参数,这个参数值是时间戳和版本号结合,当然也可以使用其它方式来计算该参数值。 修改前 <!...因为在覆盖过程中,静态资源和页面文件部署有一定时间间隔,对于一个大型网站来说即使时间间隔很小,都有可能出现新用户访问。那在这个时间间隔内,用户访问网站会发生什么情况呢?....pipe(rev()) // 修改静态资源文件名 .pipe(assetRev()) // 更改HTML文件引用静态资源路径 .pipe(gulp.dest('dist/js'))...'); var assetRev = require('gulp-asset-rev'); var rev = require('gulp-rev'); // 定义一个f5任务,名称自定义即可 //....pipe(gulp.dest('dist/css')); }); // 静态资源处理 gulp.task('revJS', function() { gulp.src('js/*

    1.1K80

    【webpack】流行前端模块化工具webpack初探

    webpack和gulp共同作用及两者区别: webpack和gulp本质上并不是同一类型工具,但它们都能完成以下任务: ?...代替gulp工作,方便而快捷。...没错,webpack打包做就是这样作用 为什么要用webpack实现JS压缩? 和打包一样,压缩文件也是为了提高页面性能,(大家可结合自己对那些打开极慢网站体验感受一下页面性能重要性)。...,'dist'), }, } webpack要求webpack.config.js输出模块一个对象,且包含两大基本属性:entry和output。...用图解描述上述过程,,webpack 递归地构建一个依赖树,这个依赖树包括你应用所需每个模块,然后将所有模块打包少量包(bundle) - 通常只有一个包 - 可由浏览器加载。 ?

    1.1K60

    文稿:Ant Design从无到有,带你体悟大厂前端开发范式

    开发环境构建 我们先看一下项目的架构 •_site 生成组件预览项目•components 组件源码•dist 打包生成文件•docs 文档•es 类型文件•lib npm包源码•site 定义组件预览项目相关文件...具体用例我们以Button例来讲解。...,说不定同事就上传一些他自己都不能读懂代码,怎么办?...包发布 我们都有一个感受,每次发包都胆战心惊,准备工作充分了吗?该buildbuild了吗?该修改的确认过了吗?...好了,到这里给大家介绍完一个库是如何从零开发出来,我相信大家明白了 Ant-Design 组件构建以及打包整个流程,应对开发中其他一些自定义库封装发布将会胸有成竹。

    2.3K20

    【webpack】流行前端模块化工具webpack初探

    webpack和gulp共同作用及两者区别: webpack和gulp本质上并不是同一类型工具,但它们都能完成以下任务: ?...代替gulp工作,方便而快捷。...没错,webpack打包做就是这样作用 为什么要用webpack实现JS压缩? 和打包一样,压缩文件也是为了提高页面性能,(大家可结合自己对那些打开极慢网站体验感受一下页面性能重要性)。...,'dist'), }, } webpack要求webpack.config.js输出模块一个对象,且包含两大基本属性:entry和output。...用图解描述上述过程,,webpack 递归地构建一个依赖树,这个依赖树包括你应用所需每个模块,然后将所有模块打包少量包(bundle) - 通常只有一个包 - 可由浏览器加载。 ?

    52540
    领券