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

Gulp安装流程、使用方法及cmd常用命令导览

2.npm: 据说一般情况下,安装好nodejs后,npm就装好了。...4.安装全局gulp 全局安装(全局安装gulp目的是执行gulp任务) 安装命令:cnpm install gulp -g 安装完毕后,看一下版本号有没有(命令行输入:gulp -v),就知道有没有安装成功了...安装完了以后,在你安装的那个目录下边会发现一个node-modules文件夹,以后用到的gulp插件都会在这个里边了。...var sass = require(‘gulp-sass’);//导入工具包require(node-modules)里的对应模块,以后你需要什么插件就对应执行这一句,不过要把变量名和括号里的插件名字改掉...css将注入到浏览器里实现更新 21 gulp.task('sass', function() { 22 gulp.src("scss/*.scss") 23 .pipe(sass

2.4K60

ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用Grunt和Gulp使用Grunt准备项目配置NPM配置Grunt集成起来监测文件变化与V

保存文件 这些包将会被自动下载,你可以在node-modules目录下看到下载的内容,前提是你打开了”显示所有文件“ ?...监测文件变化 Watch任务可以监视文件和目录的变化,并且在监测到变化后触发一系列任务,在initConfig方法中添加以下的代码来监视Typescript目录下的所有js文件的变化,并执行’all“任务...与Visual Studio事件一起协作 你除了可以手动运行这些任务之外,你还可以把这些任务和Visual Studio事件绑定,当Visual Studio触发既定的事件后,自动运行定义的任务 在Task...NPM 包的不同 与grunt一样,gulp定义也在ackage.json文件的devDependencies属性中,内容如下文所示,你也可以通过只能提示来更新到最近的版本号。...在task方法的回调函数内部,使用方才定义的gulp执行我们需要的工作,首先定义一个clean任务 gulp.src('wwwroot/lib/*').pipe(clean()); Gulp流 gulp

3K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用electron开发桌面级小程序自动部署系统

    打包构建 切换分支 配置完基础信息后调用gitlabApi拉取该项目的分支和tag信息,渲染到下拉列表选择切换本地分支,同时在面板展示分支的基础信息,项目名称、当前分支名称、提交时间、提交描述、提交成员...这里选择环境选择的是需要打包项目的根目录中的构建命令,比如我的小程序项目使用gulp构建,gulpfile中定义了四种打包命令,那么在点击开始项目构建后,程序会自动切换到黑盒中的项目根目录下执行对应命令并打包为...上传成功后在面板上展示上传信息和上传状态并且通过钉钉群同步推送上传消息,包含发布版本、描述、发布人,最后在微信公众平台选择设置体验版。到此,一个完整的编译打包上传流程全部完成。...:Dev(联调环境) gulp build:Test(测试环境) gulp build:Slave(预发布环境) gulp build:Prod(线上环境) 那么同理,配置好dist输出文件目录,收到请求后执行事先实现好的...比如我一不小心使用了cnpm安装了elemnent-ui最后打包导致无法解析该模块,只能删除node-modules重新使用yarn安装。

    2.2K10

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

    好吧,看完后,笔者又整理了一篇关于我们在项目中,使用 glup 的前端文章分享给大家。 gulp 初试用 在用了 Grunt 的一段时间内,越来越觉得自己离不开构建工具。...但是,它需要浏览器安装 livereload 插件才能使用,chrome 的插件需要访问外国网站下载,firefox 的插件不起作用,其它的浏览器也无法实现自动刷新。...在使用了 Grunt 的一段时间后,我发现了 gulp 的运行速度比 Grunt 快很多,于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...其中专门创建一个 gulp 目录用来存放 gulp 代码,为了能够将任务更加细化,职责单一,方便日后的维护更新。...其中对 css 代码处理是为了替换合并后的图片路径。

    1.7K00

    web面试题及答案_前端html面试题

    author: aSuncat JavaScript知识点大全:https://www.yuque.com/webfront/js 所有最新最全面试题,持续更新在语雀。...待完善 24、webpack在使用层面,对插件和loader不够理解。 gulp 1、 grunt 1、 grunt和gulp的区别?...他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。...比如 node-modules 下 foo 模块依赖 lodash@^1.0.0,bar 模块依赖 lodash@^1.1.0,则 ^1.1.0 为兼容版本。...在执行一段代码时,JS 引擎会首先创建一个执行栈 然后JS引擎会创建一个全局执行上下文,并push到执行栈中, 这个过程JS引擎会为这段代码中所有变量分配内存并赋一个初始值(undefined),在创建完成后

    62920

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

    书归正传,咱们上回书说到在我的第一版小程序发布系统被服务器拍倒在沙滩上后,我把目光从web转移到了app上,并准备使用Electron来构建一套app安装在电脑上用来解决服务器不支持部署小程序开发者工具的坑...这里选择环境选择的是需要打包项目的根目录中的构建命令,比如我的小程序项目使用gulp构建,gulpfile中定义了四种打包命令,那么在点击开始项目构建后,程序会自动切换到黑盒中的项目根目录下执行对应命令并打包为...上传成功后在面板上展示上传信息和上传状态并且通过钉钉群同步推送上传消息,包含发布版本、描述、发布人,最后在微信公众平台选择设置体验版。到此,一个完整的编译打包上传流程全部完成。...:Dev(联调环境) gulp build:Test(测试环境) gulp build:Slave(预发布环境) gulp build:Prod(线上环境) 那么同理,配置好dist...比如我一不小心使用了cnpm安装了elemnent-ui最后打包导致无法解析该模块,只能删除node-modules重新使用yarn安装。

    2.7K40

    Vue3中非响应式变量在响应式变量更新后也会被刷新的问题

    changeMsg 方法后页面如预期内没有刷新,但在调用 changeCounter 方法后,除预期内 counter 对象会被刷新以外,非响应式变量 msg 也一同被刷新了 解答(ChatGPT)...在Vue中,响应式系统会追踪数据的依赖关系,并在相关数据发生变化时自动更新视图。...在Vue的模板中,所有在双花括号{{ }}中的表达式都会被视为依赖,当任何一个依赖发生变化时,Vue会自动重新渲染相应的部分。...即使变量本身没有使用Vue的响应式 API,只要在渲染过程中被使用,Vue也会将其视为依赖并更新相关部分。...这样,msg将成为一个响应式变量,并且只有在它自身发生变化时才会触发重新渲染。

    35140

    MySQL将查询的结果作为update更新的数据,且在原字段数据后 CONCAT拼接(lej)

    A 的app_id, 在A用户原有的app_id 后,用CONCAT,拼接上查询出来的app_id_strs,并在两者之间用(,)逗号连接 扩展: 二、mysql中update和select结合使用 在遇到需要...在每次查询前执行,使得查询结果值变大。...item_wcaddress,author from tlk_KQ_goout_app; 拼接之前 拼接之后 六、浅析MySQL中concat以及group_concat的使用 七、mysql 往表中某个字段的字符串后追加字符串...customer_remark=CONCAT(customer_remark,"需添加的值")WHERE order_id='1' np_order :表名 customer_remark 字段名称 where 后指定条件...八、mysql 把select结果update更新到表中,从查询结果中更新数据 逻辑:两张表连接获取finishin的重量插入到sale.

    9K30

    进阶|基于webpack的架构与构建优化——YY-DSA搭建心得

    - 在确保架构稳定的前提下,尽可能提升整体的效率,包括应用程序的效率以及研发流程的效率,而牺牲流程效率来换取程序效率的做法不可取。 这期间前前后后折腾了一两个星期,从无到有,系统终于成功稳定地跑起来。...在模块打包这一点上webpack更占优势,它的处理速度以及处理能力都要优于gulp,虽然gulp具备更多脚本式的功能,但我们的项目里所用到的自动化更多是以打包为主,所以首选webpack作为我们的自动化工具...如果后续有脚本的需求,我们会考虑同时引入gulp,将脚本的工作交给gulp,而webpack仍主负责模块打包。 3....接着我们在官方文档中发现,vue-loader有个esModule属性,会影响到.vue编译后的模块化格式,文档中提及其值默认为`undefined`,但在源码中我们不难发现其实它默认为`true`。...5.4 外部库构建优化:Dll VS externals 在我们的项目中,有些依赖库基本是固定不变的,包括库的版本更新,比如YY-DSA中的vue与element-ui这两个直接支撑主架构的库,我们希望在构建过程中

    80010

    Gulp 工作流中Sass 增量编译功能的探索

    后面的故事倒有些题外话了,简单概括是我在接下来的半年发挥了一些“主观能动性”将整个工作流做了一番优化。其中涉及到的就是本文所言的在Gulp 工作流中Sass 增量编译功能的探索。...增量更新的社区方案 打开Gulp 的Github 主页,README 处拉到快底部,开源社区早早就有产出一系列解决方案。...true; //your watch functions... }); Gulp 4 中的增量编译 上面的这套方案执行后,我们在执行Gulp 进程中,除第一次第二次,从第三次编译开始就是增量编译了...这套方案我们一直用了很长一段时间,直到我们的Gulp 工作流中更新到了Gulp 4。...Gulp 4 中自带了增量更新的方案gulp.lastRun() ,gulp.lastRun() 可以取代Gulp 3 中如gulp-cached 这类插件。

    1.4K60

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

    毕竟Gulp的插件太丰富了,大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候,会遇到静态资源版本更新的问题,那么对于前端开发工程师来说,该如何解决这个问题?...所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。...相关阅读:前端工程化 | 定制专属提速“外挂”(上)| 前端工程化 | 揭秘程序员的提速“外挂” 本文内容概要 Gulp解决静态资源版本更新的问题 package.json的作用 Gulp的小结 静态资源缓存更新的问题...在gulpfile.js中引入gulp-asset-rev和gulp-rev插件 var assetRev = require('gulp-asset-rev'); var rev = require(...)) // 合并后的文件所在的文件夹 .pipe(gulp.dest('dist/css')); }); // CSS文件压缩 gulp.task('cssMin', function

    1.1K80

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

    本文将会介绍如何使用gulp4来搭建项目脚手架,如果您还在使用gulp3或更老的版本,您也以通过本文的一些思想将之前的项目进行完善,更新。...该脚手架的设计思路和功能如下: 同时为了提高开发环境的效率,这里我们参考webpack的配置,区分开发环境和生产环境,在接下来将会具体介绍。...2. dist目录,即输出的目录,具体结构如下: 可以看到我们会看到src打包后的目录对应static目录,为什么我们会加一层static呢?...我的设计是如果项目使用node等服务层框架,我们可以用gulp一并打包放入dist下,这样dist就是一个完整的包括前后端服务的项目目录了,当然大家也可以直接将src打包后的文件和文件夹直接放到dist...在脚手架选型上,也不一定非要用gulp,webpack,一般的经验是传统型的静态网站适合用gulp,由于不需要编译es6,所以有更小的体积,当然也可以用webpack,本文主要是给大家提供一使用gulp4

    1.4K10

    这是学习Git 和 GitHub真正需要的

    文档数量多且命名不清晰导致文档版本混乱 每次编辑文档需要复制,不方便 多人同时编辑同一个文档,容易产生覆盖 1.2 Git 是什么 Git是一个版本管理控制系统(缩写VCS),它可以在任何时间点,将文档的状态作为更新记录保存起来...,也可以在任何时间点,将更新记录恢复回来。...log 查看提交记录 1.5.3 撤销 用暂存区中的文件覆盖工作目录中的文件: git checkout 文件 将文件从暂存区中删除: git rm --cached 文件 将 git 仓库中指定的更新记录恢复出来...branch 查看分支 git branch 分支名称 创建分支 git checkout 分支名称 切换分支 git merge 来源分支 合并分支 git branch -d 分支名称 删除分支(分支被合并后才允许删除.../src/css/base.css') // 将处理后的文件输出到dist目录 .pipe(gulp.dest('.

    1K30

    Gulp 前端自动化构建工具

    ,在操作上使用了 NodeJS 中的 stream (流),通过 pipe() 方法导入到指定的地方,将前一级的输出,作为后一级的输入,不再需要进行频繁的 IO 操作,但需要注意的是,这里的流内容,并非原始的文件流...Node | Downloads下载完成后,通过命令行查看 NodeJS 是否成功安装,Mac 系统的命令行在终端 (Terminal),Windows 系统的命令行可通过 window + r 输入...,借助 rimraf 可以删除所有的插件包,通过命令 npm install rimraf -g 安装 rimraf 之后,执行 rimraf node_modules 命令其他常用的 npm 命令,更新插件...npm update [-g] [--save-dev],更新全部插件 npm update [--save-dev],查看帮助 npm help,查看当前目录已安装插件 npm listnpm...npm install gulp -g然后我们创建一个 gulp 目录,在该目录下运行 npm init 新建 package.json 文件,以保存项目相关信息,该文件也可以手动新建,具体信息如下所示

    1.8K41
    领券