前几天一个前端大拿朋友和我说gulp比grunt更好用，就了解了一下gulp，和grunt做个简单的比较 有两个明显的感受： （1）使用方式上，gulp的配置文件更清晰便利一些 以css文件的合并压缩为例...//------ gulp -------- var gulp = require('gulp'), concat = require('gulp-concat'), minifycss = require...('gulp-minify-css'); gulp.task('default', function() { return gulp.src('css/*.css') .pipe(concat...的效率更高 grunt 的实现方式： 读取源文件 -> N个临时文件 -> 写入目标文件 从配置文件可以看到，每个任务都指定了src和dest，构建过程中会进行多次 读取、修改、写入 操作，I/O操作比较频繁...gulp 的实现方式： 读取源文件 -> 内存文件流 -> 写入目标文件 gulp使用了类似linux命令中的管道思路，开始时读取一次文件，然后就一直使用内存中的文件流，通过管道在不同任务中传递文件流
Gulp 是基于 NodeJS 的前端自动化构建工具，在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务...，而是一个虚拟的文件对象流 (Vinyl Files)，存储着原始文件的路径、文件名、内容等信息NodeJS 安装Gulp 是基于 NodeJS，所以需要安装 Node 和 npm 包管理工具，可根据自己的操作系统环境来下载相应的版本...文件，具体代码如下所示// 导入工具包 require('node_modules里对应模块')const gulp = require('gulp'), // 本地安装gulp所用到的地方...less 的任务，以实现不同的需求，当任务有多个，为实现某一需求而运行所有任务显然是不可取的，我们可通过 gulp + 任务名的方式来运行指定的任务，而不会触发其他任务除了我们定义的 less 任务外...;我们看到通过 .run 方法进行任务关联时，提示该方法已被弃用，建议使用任务依赖或 gulp.watch 任务进行触发，该 API 起到了文件监听的作用，当 gulp.src 匹配的路径下的文件发生了更改
前言 虽然现在单页面很流行，但是在 PC 端多页面还是常态，所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。...单纯的静态页面不具备这种功能，而使用 gulp 插件可以很容易的完成，比如 gulp-file-include 插件。.../dist'));//输出文件路径 }); 导航条 导航条是主要的引用内容，但是一般当前页面的导航都会有选中效果，那么就要使用 gulp-file-include 的判断功能。...其实无论是后台还是前台，在引入导航条这个问题上的解决方法差不多，都是在当前页面定义一个私有变量，通过这个变量来设置链接的选中效果，而 gulp-file-include 的变量通过传参实现。...，不过有些时候并不需要前端构建的方式生成，在此作为一个案例来说明吧。
在软件开发中使用自动化构建工具的好处是显而易见的。...大多数情况下，Grunt 一直是前端构建工具的首选。但是最近一个名为 Gulp.js 的新工具正在吸引越来越多的人的关注。...---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具，类似 Grunt, 要使用它，你的机器上需要装有 Node.js。...---- 转到 Gulp.js 在我开始使用 Grunt 之前的几年里，一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。这是当时我们工作标准流程的一部分，它非常强大。...之后又听说过、尝试过一些前端构建工具，但都没有让我放弃 Grunt. 第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说，这语法是在是太舒服了。
2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); //...'); var notify = require('gulp-notify'); // 把src/script下的所有coffee逐个编译为js, 放在temp/script下 gulp.task('...})); }) // 监视文件的变化 gulp.task('watch', ['coffee', 'browserify', 'stylus'], function(){ gulp.watch('...// 保证在当前项目目录下曾经运行过： // npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-babel babel-preset-es2015.../js/*.js') // .pipe(jshint()) // .pipe(jshint.reporter('default')); // }); // 监视文件的变化 gulp.task(
Gulp 前端自动化构建工具 中，已经对 Gulp 有了初步的了解，我们通过将所有任务写到 gulpfile.js 文件中进行编译，这当然是最直观的方法，但当我们需要执行的任务过多时，gulpfile.js...watch 任务里的具体代码 // watch.js const gulp = require('gulp'), config = require('../.....base64 任务 图片 图片 imagemin 插件，将目录下的所有 jpg ,png 格式的图片进行压缩，我们还利用了 gulp-cache 插件，该插件的作用是代理 Gulp 的缓存，所以我们通过利用缓存...，保存已经压缩过的图片，以保证只有新建或者修改过的图片才会被压缩，最后通过 gulp-size 显示压缩过后的图片大小 // optimize-images.js const gulp = require...，而 vinyl-source-stream 把普通的 Node Stream 转换为 Vinyl File Object Stream，我们在之前的文章有提到过，Gulp 使用的 Stream 并不是普通的
是一系列关于计算机领域程序最新时事的文章(偏向于前端领域)，在该系列会从不同的角度讨论领域内的实践和进展。 前言 注意，我期望你带着问题看全文，我们是如何定量分析构建工具？...这篇简单的推文引起了我的兴趣，尽管业内存在各种分析前端构建工具的文章，但这些文章往往质量参差不齐，大部分分析不够全面，偏向于定性分析，有些甚至加入了个人的主观臆想。...这类构建工具进化的非常快，目前的前端有种现象，“每 6 个月就会出现一批新的技术”，所以要保证这些构建工具的定量分析的时效性需要耗费很大的精力和团队协作。...目前 tooling.report 构建工具列表如下： webpack v4 rollup v2 Parcel v2 Browserify + Gulp （因为仍然有很多项目在依赖它） 在编写完测试用例后...这句话可能有点哲学，用另外一个不太恰当的比喻来看，“如果你是一只井底的蛙，那么你对这个世界的理解就只有井口那么大，你所能够理解的东西都在这个井里面”。
1.gulp介绍 基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。...使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署...一段简单的基于gulp的项目构建代码，gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src("*...("dist")); }); 开发的源代码 vs 发布的代码文件文件大小对比 4.参考内容 http://www.gulpjs.com.cn/ 前端构建工具gulp使用 前端构建大法 Gulp 系列 (...一)：为什么需要前端构建
前言 最近几年前端技术发展日新月异，特别是单页应用的普及。组件化、工程化、自动化成了前端发展的趋势。...webpack已经成为了前端打包构建的主流，但是一些`老古董`的项目还是存在的，也有优化的必要，正好公司的老项目需要优化，不多说拿gulp实践一下。...具体关于路径的写法，可以去看gulp官网的api：https://www.gulpjs.com.cn/docs/api/ gulp-minify-css这个官网提示已经弃用，改用gulp-clean-css...，这里保留只是为了告诉大家，效果一样，用户一致，为了保证项目不出问题，还是用最新的吧。...("[complete] Please continue to operate"); }) 部署 在终端中输入 gulp或者gulp default执行构建，即可在我们设置的产出目录里看到我们压缩处理后的代码
image.png 特性 根据官网的描述是一款可以做到开箱即用的静态内容构建平台。 免费用户每月有500次构建，最多可绑定10个自定义域，最多可包含20000个文件，文件最大为25MB。...image.png 自身特点 所有构建的静态内容将会上传至每个Cloudflare边缘节点 借助Cloudflare Access集成，可以精确控制访问预览。...1.8.6 Gutenberg Hugo Version 0.54 GNU Make Version 3.8.1 ImageMagick Version 6.7.7 jq Version 1.5 Leiningen..."dev": "hexo clean && hexo s", "build": "hexo clean && hexo generate && gulp" } npm run dev...= hexo clean && hexo s npm run build = hexo clean && hexo generate && gulp image.png
最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。 下面先简单介绍下 npm Scripts。...如用用 Gulp 来做同样的事，就只能找 Gulp 的插件来做了（Grunt 也一样）。 进入正题 我做了一个前端脚手架项目:front-end-scaffold(还处于 Alpha 状态)。...下面具体介绍，用 npm Scripts 来构建该项目。 开发阶段 主要做这几件事： 启动静态服务器来查看做好的页面。用 Nodejs 的包 anywhere。...用 Compass。 将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。用 Gulp。...用 Gulp 是为了跨平台，如果不要跨平台，可以用当前平台的命令行的命令来做移动目录会更简单。
GraphQL提供了一种灵活而有效的方式来查询服务器中的数据。 它正在成为设计后端的流行技术，通常会替换或封装一些不灵活的REST API，并让客户负责决定他们需要的数据。...现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架，其中最着名的是Apollo和Graphcool 。...它有一个简单的目的： 实现GraphQL在WebSocket（由所有流行的GraphQL客户端使用），所以不必考虑与net/http无缝集成 与net/http无缝集成 提供访问已建立订阅的简单方法，执行身份验证并向相应的客户端发送更新...它没有实现任何开箱即用的订阅。 一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。...他们按照他们的关系分组。 每个连接都有唯一的ID，可选地，还有前面描述的Authenticate函数返回的用户。
基于EHR数据共享的特性，未来的医疗信息化系统必须能够共享和接收来自系统外其他提供商的 EHR。...基于此种特性，在迁移到基于云的 SaaS 医疗卫生应用程序时，首先要考虑的是如何保持用户已经习惯的类似 Excel 的操作界面和功能，比如： 类似 Excel 的菜单栏和工具面板 与 Excel 逻辑一致的计算公式...使用 SpreadJS 优化医疗行业SaaS 解决方案 SpreadJS 是一款基于 HTML5 的纯前端表格控件，兼容 450 多种 Excel 公式，具备"高性能、跨平台、与 Excel 高度兼容"...的产品特性，可直接在各类前端开发框架和后端服务器中使用。...由于SpreadJS 是一款纯前端控件，所以它不会保存或记录显示在UI 中的任何信息。
在前几年的时候，前端是一片荒芜的待开垦之地，开发者更多考虑开阔更多技术疆域；而最近几年，在前端技术这种更新迭代快到连裸奔都追不上的情况下，在强调高产的同时，效率必然是成为争夺的制高点。...引子 在苦苦构思了上面的开头后，从“效率”这个词Jeff 引出了今天话题——也就是标题说的前端项目自动化工作流。...在早早就经过了那个年代后，老外发明（或者说整合）了一种前端自动化的方式，借助Node 这个新时代框架构建了一套工作流工具，目的是将上面说的压缩合并、新建、刷新等重复性工作让“机器”自动完成——工程师嘛就去干该干的事情...据我浅陋的网络认知，Grunt 很流行，据说很著名的前端工具Yeoman 包含了这个Grunt 。...JGulp JGulp 是本人利用Gulp 配置的适合自己的一个前端项目自动化工作流，目前正在实践运用中（通俗说用得还挺爽）。如果你有需要，可以参考本工作量构建适合自己的工作流。
前端的交付基于浏览器，资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，是前端发展中一直探索的难题。...模块的产生就是为了解决前端日趋复杂，从而加载越来越多资源而产生的问题。最终目的是为了提高生产力！...前端模块发展历程：前端模块化系统 模块化发展到今天，其基本的范式为：利用 bundle 工具（如 webpack）将源码打包成浏览器可识别的 bundle。 范式从本质上讲是一种理论体系、理论框架。...使用 ESM 构建的核心特点： node_modules 完全不需要参与到构建过程，构建效率提升明显 构建复杂度非常低，修改任何内容都只需做单文件编译（不需要重新构建和重新打包应用程序的整个bundle...有了 ESM 分发： 可以更好的利用以往用 CMD 或者 AMD 规范开发的众多 NPM 包； 可以替换掉之前使用 UMD 加载组件库（或其他包）的场景； 可以借助 CDN ，对一个特定版本的 NPM
前端构建当下的问题 不得不说，曾经把自己定位为「打包器」的 Webpack，如今已形成强大的构建生态，俨然一统江湖。但前端构建的道路还远没有走到最后。...随着业务的发展，前端工程的复杂度越来越高，构建方面的也开始暴露出新的问题。 ?...而如今，业务工程越来越复杂，代码量连年增长，构建的时间也越来越长。曾经「秒级构建」的前端，终究跻身「分钟级构建」的圈子了。...前端工程构建时间的拉长，自然使得前端开发者在日常业务工作中的状态，从图左逐渐运动到了图右。 ?...等 轻量的打包器开始出现，如 Browserify 任务工具开始出现，如 Gulp Angular、React、Vue 等的相继火爆，也推动了前端的又一波浪潮：它们的发展提高了前端在业务中的表达能力，并向更高程度的工程化提出诉求
之前有个带权限验证的CDN服务，没有同步开通海外CDN，一直用一台香港的服务器提供文件服务。为了实现和CDN一样的权限算法，是用Node做的服务器。...最简单的让Nginx分发COS的方式是用COSFS把bucket挂载到/mnt目录下。...不过8.0+的CentOS系统用yum安装COSFS的时候不兼容，要下载编译： yum install automake gcc-c++ git libcurl-devel libxml2-devel...因为要对文件访问做权限，所以挂载了COS的目录somewhere不能直接在Nginx里对外开放，要对内开放，只允许经过验证的请求用内部重定向的方式下载： load_module modules/...就这样用NginScript简单复刻了腾讯云CDN的带校验静态文件分发。
前言 随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。...二、开发体验优化 舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要 组件热刷新、CSS热刷新 自从webpack推出热刷新后，前端开发者在开环境下体验大幅提高。...各项目仅需要简单的关键配置即可快速接入该构建工具，享受其带来的开发体验提升，和构建性能提升。...），后续输入相关文章介绍如何实现CSS/JS同步异步代码重试 关注我们 IMWeb 团队隶属腾讯公司，是国内最专业的前端团队之一。...id=45616 扫码关注 IMWeb前端社区 公众号，获取最新前端好文 微博、掘金、Github、知乎可搜索 IMWeb 或 IMWeb团队 关注我们。 点击阅读原文获取更多参考资料
本文介绍了一种使用Java构建Web应用程序的方式，其中GWT或者J2CL是必不可少的，另外还有多个UI框架可以配套使用，比如Domino UI、VueGWT、GWT Material Design (...另外我们创建一个“Module”.gwt.xml文件，用来转换共享模块的源代码，该文件声明了要转换的包目录，在该例中是shared包下的所有Java文件。...GWT Boot 客户端 这一部分是最有趣的部分，这里我们将使用DominoUI作为前端创建客户端。...Layout layout = Layout.create(CONSTANTS.appTitle()).removeLeftPanel() .show(Theme.BLUE); 现在考虑一下我们应该怎么用DominoUI...来实现如下布局 为了创建这个UI视图，我们使用三个类：HomeClientBundle、HomeView和HomeComposite，它们是用MVP（Model View Presenter）模式设计的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
