首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Gulp使用指南

-> 最终给出一个完整成品 gulp 是基于流格式一种打包构建工具 gulp 依赖环境 依赖于 node 环境进行开发 底层封装内容就是 node 里面的读写文件 gulp 作用 对于 css...作用: 创建一个基于流任务 => 例子: gulp.task('htmlHandler', function () { // 找到 html 源文件, 进行压缩, 打包, 放入指定目录...}) 2. gulp.src() => 语法: gulp.src(路径信息) => 作用: 找到源文件 => 书写方式 2-1. gulp.src('....=> 接收当前流, 进入下一个流过程管道函数 => 例子: gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc')) 常用插件 gulp...常用插件 + gulp 各种插件就是用来执行各种各样压缩混淆转码任务 1. gulp-cssmin => 下载: npm i gulp-cssmin -D => 导入: const

87810

给初学者Gulp教程(译)

但是这儿还有其他工具,broccoli聚焦于资源文件编译,是一个最常见构建工具之一。 这儿已经有大量文章覆盖Grunt和Gulp区别以及为什么你可能使用其中一个。...这将很难使用传统插件(比如gulp-concatenate)来链接他们。 很感激,这儿有一个有用Gulp插件gulp-useref解决了这个问题。...最好设置type为你试图连接文件类型。如果你设置type为remove,Gulp将移除整个构件块,而不生成文件。 指的是生成文件目标地址。...$ npm install gulp-useref --save-def var useref = require('gulp-useref'); 设置useref任务和我们到目前为止设置其他任务相似...在Gulp任务中设置它就和我们第一个“hello”示例一样。

4.3K20

使用Gulp进行JavaScript自动化简易说明书

Watchers 当检测到更改时,Watchers观察源文件以进行更改和调用任务。 gulpfile.js gulp项目的配置文件。...gulp.task('scss', function() { 我们定义名为“scss”任务。 return gulp.src('scss/*.scss') 设置任务源文件。这些被定义为全局。...你可以从 toptal-gulp-tutorial/step2下载它,它包括之前创建SCSS任务增强版本,以及一个观察检测源文件并调用任务watcher。...您将可以在命令行中看到Gulp通知。 代码演练 我们已经为我们任务设置了一个watcher,而且只有3个额外代码行。也就是说这个watcher入门工具包与之前引导例子没有特别大差异。...用于JavaScript自动化高级Gulp插件 Gulp插件库中存在数千个插件,其中一些远远超出了构建过程简单JavaScript自动化。

3.2K10

关于PhpStorm设置点击编辑文件自动定位源文件实现方式

在使用phpstorm作为开发软件时,会遇到编辑当前文件当时左侧列表定位不到源文件,不管对于开发还是写作都有一定困扰,因为浪费时间啊!...点开编辑文件时左侧列表不能定位源文件 定位到源文件时会展示出这个文件所有方法 截图时特别不方便 为什么会说截图不方便,因为在截取对应代码时你需要直接指出对应文件是在目录那个位置啊!...要不看了你文章的人都是迷迷糊糊,都不知道这段代码在哪里。 为了解决上边咔咔说几个问题,咔咔也是把phpstorm英文设置用翻译软件大概翻译了一下,解决了困然咔咔好久问题。...在来到刚刚设置界面 可以看到这个英文意思就是显示方法。 那就直接点就给关闭了呗! / / 经过了这一系列处理,终于解决了咔咔俩大心头之患,这下在写东西就省事了很多。...这俩个功能点对咔咔帮助可不是一星半点多。 让咔咔在截图时候在也不用去对左侧文件进行标注了,因为在定位源文件时会有高亮颜色显示。 咔咔也不用在去找文件在左侧哪里了。 就这俩个功能得省多少事情啊!

48000

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

友情提示:推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件安装与使用,只要掌握了Gulp插件安装流程与配置,对于其他Gulp插件使用基本上就没有太大问题。...毕竟Gulp插件太丰富了,大家也没有太多精力把所有的插件都去研究一遍。当一个网站进行改版升级时候,会遇到静态资源版本更新问题,那么对于前端开发工程师来说,该如何解决这个问题?...因为它无法通过手工形式来进行维护,所以需要借助工具来处理,在这边我们采用Gulp插件来做处理。...'gulp-rev'); 配置插件功能 // 静态资源处理 gulp.task('revJS', function() { gulp.src('js/*.js') // 源文件所有js...;// 复制到目标文件路径 }); gulp.task('rev',['revJS'],function() { gulp.src("./**/*.html") // 源文件所有HTML

1.1K80

Gulp和Webpack对比

模块化开发 所谓前端模块化开发,我理解就是,在开发时候,把不通源文件按照他具体用途进行分类管理,在使用时候利用CommonJS、AMD、CMD等规范将这些资源文件引入到当前文件中。...特别是在前后端分离思想中,前端开发不再像以前一样过分依赖于后端开发,以前那种前端测试ajax请求需要装个tomcat或者其它服务器来启动server现象已经成为过去式,现在我们可以使用像Gulp这类前端自动构建工具启动一个本地...在Gulp中启动本地服务有一个很方便配置,就是``livereload:true``属性设置设置后浏览器会根据你项目中资源变化自动刷新浏览器(如果你chrome浏览器设置该属性后在你修改文件并保存时仍没有自动刷新...,可能是你chrome浏览器不支持,可以chrome扩展程序中搜索并安装LiveReload插件),比如: 我gulp测试目录结构: !...在项目中通过npm安装**gulp-rev**和**gulp-rev-collector**模块,前者用于生成文件MD5码文件和按MD5码命名源文件,后者是利用MD5码,对文件名进行替换。

2K40

Display Posts : 按条件显示WordPress文章最强插件

尤其是当你WordPress网站有了很多内容,想在网站某些地方按某些条件来自由组织已有内容时候,会显得非常有用,可以通过各种条件来进行花式搜索,自由控制显示形式,使用也很方便。...显示最近文章列表 显示结果如下: ---- Display Posts : 按条件显示WordPress文章最强插件 WP Plugin Info Card : 用于展示WordPress插件信息最佳插件...(1) ---- 过滤特定目录或标签中文章 下面的方式可以列出所有tag为python文章列表,如果你想显示某个目录下文章,只需要把tag改为 category,查询条件可以是id或者名称,也可以把多个查询条件用逗号隔开...Display Posts : 按条件显示WordPress文章最强插件 WordPress 和 Vue.js 学习资源推荐 WordPress 精品插件大全页面的开发小记 WordPress主题中加载...B地方之一了,可以通过一些复杂条件和操作符进行组合查询,比如上面的这段中: taxonomy="post_tag" tax_term="genesis-explained" tax_operator

3.4K10

Power BI字段参数情境下条件格式设置

这个视频以服装业存货分析为例介绍了如何使用:Power BI字段参数用于存货分析 这带来一个问题,如果字段参数应用于表格/矩阵,如何设置条件格式?...下图设置了一个指标切换字段参数: 将指标列表放入表格或矩阵,即可生成一个动态切换指标的表: 生成表格如下图所示: 如果是固定指标,可以在值区域,鼠标右键,为指标增加条件格式: 但是,字段参数属于动态度量值...下图可以看到字段参数状态下,条件格式随着指标选择变化(为演示目的,每个指标设置了不同条件格式,实际应用不建议这样操作) 设置方式是:指标切片器保持在全选状态,选中表格,旧格式窗格下,对各个指标在下图条件格式选项卡进行设置...新格式窗格下,在单元格元素对指标进行挨个设置: 字段参数情境下条件格式有个重要应用:解决指标的连带问题。...如果把这种附属连带指标(如排名、增长率、达成率)放到条件格式,则可以避免这种问题。

1.8K10

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

刚开始想实现浏览器 F5 自动刷新使用到是 grunt 和 livereload 插件gulp 也有对应方法,参考 gulp 教程之 gulp-livereload。...但是,它需要浏览器安装 livereload 插件才能使用,chrome 插件需要访问外国网站下载,firefox 插件不起作用,其它浏览器也无法实现自动刷新。...在使用了 Grunt 一段时间后,我发现了 gulp 运行速度比 Grunt 快很多,于是便从 Grunt 转移阵地到了 gulp。以下构建思路跟 Grunt 构建很类似。...,并实时监听源文件,一旦源文件改动会执行相应操作。...serve 命令,gulp 会执行跟 gulp dev 一样操作并监听源文件,唯一不同是它在执行后会监听某个端口,一旦有文件改动它会帮你自动刷新浏览器,帮你省下了按 F5 力气。

1.6K00

前端构建系统-《node.js实战》

const gulp = require('gulp'); // 像加载标准Node模块那样加载Gulp插件 const sourcemap = require('gulp-sourcemaps');...('dist')) }) 以上代码出现了几个用来捕获、处理和写文件Gulp插件。...用Webpack构建web程序 — 打包器与插件: webpack插件:用来改变构建过程行为。 webpack加载器:是函数,负责将输入源文本转换成特定文本输出。既可以同步,又可以异步。...如果需要调整Javascript,或用其他方式处理文件,就用插件。。...output : {path:__dirname ,filename:'dist/bundle.js'} } 打开dist/bundle.js,应该可以看到webpcakBootstrap垫片,然后从源文件结构中过来每个文件都被封存在了闭包内模拟模块系统中

1.9K20

关于dataxSqlServerReader 插件文档读取设置

SqlServerReader 插件文档 ---- 1 快速介绍 SqlServerReader插件实现了从SqlServer读取数据。...splitPk设置为空,底层将视作用户不允许对单表进行切分,因此使用单通道进行抽取。...必选:否 默认值:无 where 描述:筛选条件,MysqlReader根据指定column、table、where条件拼接SQL,并根据这个SQL进行数据抽取。...注意:不可以将where条件指定为limit 10,limit不是SQL合法where子句。 where条件可以有效地进行业务增量同步。如果该值为空,代表同步全表所有的信息。...必选:否 默认值:无 fetchSize 描述:该配置项定义了插件和数据库服务器端每次批量数据获取条数,该值决定了DataX和服务器端网络交互次数,能够较大提升数据抽取性能。

1.6K20

WordPress 技巧:如何设置插件加载顺序

默认情况下,WordPress 插件是按照插件字母顺序加载,比如 a/a.php 是比 b/b.php 先加载,那么我们需要更改插件加载顺序如何操作呢,由于激活插件是存在 active_plugins... option 里面,我们只需要激活或者停用插件时候,系统更新 active_plugins 这个 option 值之前 hook 它就可以。...比如下面的代码,我们可以把微信机器人插件设置为最后加载: add_filter('pre_update_option_active_plugins', 'weixin_robot_set_plugin_load_late...active_plugins[$plugin_key]); $active_plugins[] = $weixin_plugin; } return $active_plugins; } 更多: 一般来说如果插件里面都全是函数...,而没有立刻执行代码,插件加载顺序是没有关系,如果需要在插件里面有立刻执行代码,最好放到 plugins_loaded action 里面执行,这样 action 意思是所有的插件加载完成之后执行动作

45830

gulp尝试开发

在实习公司做web开发,gulp 是经常用到,可是我做不仅仅前端,还包括后台, 所以将前端文件移至后台这种事当然也需要我做啦,用gulp,但是,文件移至后台目录后,资源文件路径必须修改, (我做后台是用...express做),一时间,没有找到适合插件,于是我萌生了自己开发一下gulp插件想法。...开发流程 参考了几篇博客 Gulp插件制作指南 Gulp插件编写入门 先来看一下插件全部代码 'use strict'; var gutil = require('gulp-util'); var...this.push(file); cb(); }); }; 以上两步就是开发gulp插件步骤了 gulp-url-replace 核心逻辑 //正则保存数组.../production/views/")) }) 总结 虽然写法,publish,测试方面都不规范,但是,也是学到了gulp开发一点知识, 以后可以自己本地做些可能用到gulp插件 目前源代码已经发布在

48800
领券