gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样:
作者:龙付成--腾讯高级前端工程师 @IMWeb前端社区 目录 JavaScript早期主要作为脚本语言运行在浏览器,而现在JavaScript的使用范围已经超越浏览器,向通用系统语言发展。特别是HTML5的出现,浏览器的平台化,Node.js开源项目的发展,NoSQL技术的发展,JavaScript逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。 JavaScript标准有两类,一种是作为浏览器上通用行业标准的ECMAScript标准,另一种是作为浏览器外的桌面、服务器的标准CommonJS标
本质是监控文件修改,实时刷新浏览器,需要安装livereload插件和node.js插件,全局刷新
最近在B站上看到杨旭老师的 ASP.NET Core 3.x 入门视频(完结)的第三节的ASP.NET视频教程,里面提到到ASP.NET Core 中的捆绑和缩小静态资产,可以在微软官方文档 ASP.NET Core 中的捆绑和缩小静态资产,特此记录一下,感兴趣的可以直接查看官方文档。
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师,使用它将提高您30%的工作效率。 MD5加密: import crypto from "crypto"; function md5(data) { let Buffer = require("buffer").Buffer; let buf = new Buff
何为懒? 懒在人一开始的印象中,总是给人一种不好的感觉,勤奋一直是传统美德,懒是坏东西。然而事实真是这样吗?最近看过一篇关于懒人科技的文章,觉得很有道理,文章有如下部分: 人类历史上曾诞生了琳琅满目的懒人科技,不断迁就着人性的弱点,有汽车、火车、飞机这种大型地、颠覆式发明,也有一些非常酷炫的小型创意,甚至还诞生了不错的服务,事实上,整个第三产业的市场就是来源于“懒人不想做的事情”。这些创意在改变人类生活的同时,也改变了懒汉的定义,在拥有了大量的新鲜玩意之后,他们的境界正大有提高,事实上,懒已经不是完全意义上
安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann
如果希望对在静态页面中引入的相关资源进行压缩(比如:CSS,JavaScript,图片等),可以使用Gulp实现。 当然,还可以其他其他打包工具,比如:Grunt,Webpack等等。
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具,本文是学习的一些记录。
今天,我们来搞一个新东西,名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说,这个名字我想了很久。最终,还是以这个名字作为文章标题。我先拆分解释下:全栈的意思是支持前后端;热重载这个名词相信大家很熟悉,就是页面每次改动,不需要手动去刷新,可自动刷新;生产环境这里你可以理解成线上环境,用户使用的环境。
前不久,处理生信分析网页版自动化报告的时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具,记录一下学习的过程。
它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JS由ES(ECMAScript),DOM,BOM 组成,目前运行在浏览器内核中,NODE中只能运行ECMAScript,无法使用DOM,BOM。
打开命令行, 输入指令=> $ sudo npm install --global
jsdelivr是一个免费的CDN服务,可以利用它配合github来为页面静态资源提供加速,有效提升资源加载速度。
之前项目中使用的webpack进行前端代码的编译,但一直不太喜欢webpack的那种玩法。使用webpack编写编译脚本时就是按webpack的规则进行各种配置,必须完全遵守它的条条框框,明明是自己写nodejs代码进行编译,但完全可控感。之前就听说过gulp+browserify的组合,这次就尝试使用这个东东重写编译脚本。话不多说,直接上最后的成果。 前端依赖package.json package.json { "name": "ssm-scaffold-frontend", "version"
“个人博客”这一名词从很早前就广为人知了,对程序猿来说,“个人博客”也可以算是程序员们的“私人乐园”,让各位码农们可以在自己的私人博客里放飞自我。而搭建“个人博客”的方式也是五花八门,例如:
📷 别被标题吓到,哈哈,即使现在vite横空出世,社区光芒四射,两个字很快,但是webpack依旧宝刀未老,依然扛起前端工程化的大梁,但是今天我为啥说要拥抱gulp,因为我们常常吃一道菜,所以要换个口味,这样才营养均衡🤣。 gulp定义是:用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本,或者升级历史传统项目,解放你重复打包,压缩,解压之类的操作。 个人理解gulp是一种命令式编程的体验,更注重构建过程,所有的任务需要你自己手动创建,你会对构建流程会非常清楚,这点不像
本文篇幅较长,涉及的面较广,通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章,之后闲时再细细阅读,个人预览DEMO,有关文中具体涉及到的工具大家可以关注公众号《云爬虫技术研究笔记》回复关键词“博客”获取“一键图床工具”和“无损压缩工具”,可以查看原文获取更好的阅读体验。 必读前言
In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and such).
一、运行环境 1. Node.js 2. Chrome 3. 其它浏览器 二、开发工具 1. WebStorm 1.1 功能特性 1.2 小技巧 1.3 实用快捷键 1.4 插件支持 2. Sublime Text 2.1 功能特性 2.2 小技巧 2.3 实用快捷键 2.4 插件支持 3. HBuilder 3.1 功能特性 3.2 小技巧 3.3 实用快捷键 3.4 插件支持 4. 开发工具小结 三、构建工具 1. Grunt 1.1 Grunt安装 1.2 Grunt配置文件 1.3 Gru
Gulp是一个在你开发web时,帮助你完成几个任务的工具。它经常用来进行一些前端任务,比如:
换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考。
laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗?当然,gulp可以做到。 gulp是什么? 看完你就明白,这是个自动化构建工具的核心就是gulpfile.js。 用于laravel的gulp怎么写? 把一切*.html换成*.blade.php就行了。 有什么坑要注意? 异步执行,前后依赖关系必须写明。比如: gulp.task('rev' , ['concatCss', 'concatJs'],function() { return
友情提示:推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用,只要掌握了Gulp插件安装的流程与配置,对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了,大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候,会遇到静态资源版本更新的问题,那么对于前端开发工程师来说,该如何解决这个问题?所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。 相关阅读:前端工程化 | 定制专属提速“外挂”(上)
在前端开发中通常需要做,预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作,而使用Gulp可以自动化的完成这些工作,从而提高网站的开发效率,在我的博客使用Less中介绍了将Less文件编译成CSS文件的方法,仔细观察可以看到如果按照博客中介绍的方法,在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作
而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用。
gulp官方文档:https://www.gulpjs.com.cn/docs/getting-started/quick-start/
关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。 GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo
客户端浏览器与服务器相互通信有许多方式。响应式图像标记语言(尤其是srcset和sizes)使用较少的字符描述了大量信息。
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----2017
webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。
地址:https://github.com/huiwang/hexo-baidu-url-submit
Angular2 已经发布 beta9 , 是时候折腾一下了。 Angular2 和 AngularJS 1.x 相比, 可以说是全新的框架, 除了名字有延续性之外, 能延续的真的不多。
免责声明:下面的内容为了简洁说的有些绝对,是的,在编程中所有的“规则”都有例外。 学习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论这些并没有意义,JavaScript正在征服世界,所以,我们也只能这么做了。 下面是我的一些建议: 1、JS应该放到 .js 文件中 “额,只有那么几行而已…”,是的,我的意思是所有的 JS 都应该放在 .js 文件中。为什么呢?因为这有助于可读性,节省带宽。行内 J
习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论这些并没有意义,JavaScript正在征服世界,所以,我们也只能这么做了。 下面是我的一些建议: 1、JS应该放到 .js 文件中 “额,只有那么几行而已…”,是的,我的意思是所有的 JS 都应该放在 .js 文件中。为什么呢?因为这有助于可读性,节省带宽。行内 JavaScript 在每次页面加载时都会重新下载,相反的,单独的 .js 文件则会被
全文全部基于原生的小程序开发所阐述,各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来,而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。
1、 如何全局安装一个 node 应用? npm install -g <package_name> 上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录(如果不存在的话),然
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.
概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 这有什么好处呢?其实从上面也可以看到官方的话,就是让你的应用跟微信官方版本更加统一,而没有违和感。当然,更重要的是,这样的库在某些时候可以提供你的开发效率哦。github地址:https://github.com/weui/weui 使用 方法一: 使用bower进行安装 bower insta
LayaAir 是基于HTML5开源引擎,所开发的游戏既可以网页运行,也可以打包Android & ios app运行,目前更到1.7.19.1 beta版本,本次使用1.7.18稳定版。 本文介绍laya的下载安装,项目创建,目录结构,环境配置与es6+的支持,及具体开发知识,网页端发布等等方面。
原来的文章链接地址会出现一大串字符编码,不好看,而给文章生成永久链接有利于SEO,给更加美观
最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。
在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个html页面都写一遍,这样也不便后期维护等操作,所以可以把顶部导航和底部这两块的html代码单独写在两个html文件里:header.html和footer.html,然后在每个html文件只需要在适当的位置引入公共部分的代码即可。gulp有一个插件gulp-file-include即可实现该操作,gulp编译完成之后,便可在每个html文件里自动加上公共部分的代码。现
领取专属 10元无门槛券
手把手带您无忧上云