- Webpack | vite | Rollup | Gulp | Grunt 比较
前端阿彬
前端实用知识学习webpackgulp前端vite打包工具
前言模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的整个过程的控制管理(像是流水线)。而模块化管理工具更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块。Webpackwebpack可以说是当前最流行的模块化管理工具和打包工具。其通过loader的转换,可以将任何形式的资源视作模块。它还可以将各个模块通过
- Gulp入门个人总结
薰衣草smile
Gulp入门个人总结参考资料:http://www.ydcss.com/archives/18http://www.techug.com/gulphttp://www.browsersync.cn/一.安装前提条件:已安装nodeJS*所有绿色带下划线均为指令在命令行下操作选装cnpm:受国内网络影响,设在国外的npm服务器在国内访问有可能出现异常,所以可选淘宝团队构建的cnpm来代替npm指令。
- 【Node.js 常用命令(第五篇)】揭秘Node.js:掌握这些常用命令,让你在开发路上风生水起!
雷神 Leo
经验分享类#前端后端node.js
目录前言30条常用的Node.js的命令(第1~120条在上一篇)121.gulp-流式自动化构建系统122.grunt-经典的任务运行器123.webpack-merge-合并Webpack配置124.node-gyp-Node.js原生扩展编译器125.socket.io-实时应用框架126.mongoose-MongoDB对象建模工具127.helmet-提升Express应用安全性128.
- 前端框架
苏金标
前端基础
前端组件库搭建webapp常用的样式/组件等收集列表(移动优先)0.前端自动化(Workflow)前端构建工具Yeoman–asetoftoolsforautomatingdevelopmentworkflowgulp–Thestreamingbuildsystemgrunt–theJavaScriptTaskRunnerF.I.S–前端集成解决方案前端模块管理器Bower–Apackageman
- ES6 (一)——ES6 简介及环境搭建
神秘的博主
es6前端ecmascript
目录简介环境搭建可以在Node.js环境中运行ES6webpack入口(entry)loader插件(plugins)利用webpack搭建应用gulp如何使用?简介ES6,全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版。ES6主要是为了解决ES5的先天不足,比如JavaScript里并没有类的概念,但是目前浏览器的JavaScript是ES5版本,大多
- webpack搭建前端环境
华戈的小书
随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack。1.用yarn代替npmnpm是一款非常好的包管理工具,之前在用npm安装项目依赖的时候总会因为某些依赖包推出了新版本从而导致编译结果不一样的问题,这是因为在安装依赖的时候npm并没有锁定依赖包的版本号(npm5好像已经解决了这个问题),每次安装的时候总是获取最新的依赖包,导致编译结果
- 使用mediasoup-demo搭建多人音视频聊天室
椛茶
mediasoupmediasoup-demo音视频rtc
一.环境搭建安装nodejs,npm,尽量使用较新的nodejs版本,最好>=node16curl-sLhttps://deb.nodesource.com/setup_16.x|sudo-Ebash-sudoaptinstallnodejs安装gulp:sudonpminstall-ggulp-cli安装build-essential:sudoaptinstallbuild-essential二
- gulp和webpack的区别
木槿_traxpvsa
gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加快请求速度和减少请求次数;并且gulp有task定义处理事务,从而构建整体流程,它是基于流的自动化构建工具。Webpack是前端构建工具,实现了模块化开发和文件处理。他的思想就是“万物皆为模块”,它能够将各个模块进行按需加载,不会导致加载
- gulp压缩清缓存
毛尖哥
使用gulp解决微信页面缓存的问题最近在开发web项目的时候发现一个令人头疼的事情,在微信公众号上展示的页面微信为了提升性能会进行缓存,关键是这个缓存机制还和其他浏览器的不一样,这就导致了即使发布了新的版本,如果不清除缓存的情况下,还是会执行缓存的老版本。对于用户来讲,可能不懂得怎么清除缓存,这就会出现bug。通过网上查找资料,各路大神对于清除缓存给了好多方法,在此展示下,当然最终还是要说下使用g
- 程序设计优化之管道数据流
有道AI情报局
有道技术团队typescript程序设计
摘要计算机基础的同学估计对管道这个词都不陌生了,尤其是在Linux系统当中,管道操作符已经被广泛的使用,并给我们的变成带来了极大的便利。前端领域比较注明的脚手架“gulp”也是以其管道操作著称。今天我们就来一步步抽丝剥茧,看看在前端领域的“管道数据流”要如何设计。一、前言有计算机基础的同学估计对管道这个词都不陌生了,尤其是在Linux系统当中,管道操作符已经被广泛的使用,并给我们的变成带来了极大的
- 前端开发-Browsersync 和 gulp 实现浏览器同步测试
devZhang
通常情况下,作为前端开发者,在项目中编写了一段代码后,想看看效果,需要在编辑器里保存修改的文件,然后来到浏览器打开本地文件才能看到,之后如果再做了修改,就需要手动刷新浏览器才能看到最新效果。那么,有了Browsersync和gulp的,就可以实现浏览器实时、快速的响应你的文件更改,包括html、js、css、sass、less等,并且自动刷新页面展示效果。试想一下:假设您的桌子上有pc、ipad、
- gulp构建完整项目
__摸摸头
项目结构如下:gulpfile.js文件配置如下://引入插件vargulp=require('gulp');varbrowserSync=require('browser-sync').create();varless=require('gulp-less');varjsmin=require('gulp-jsmin');varcleanCSS=require('gulp-clean-css')
- typescript 构建编写发布包流程
香樟树的夏天
typescript构建编写发布包流程初始化修改tsconfig.json配置husky构建代码检查安装husky,tslint,prettier配置tslint,prettier配置typedoc安装typedoc生成docs文档配置nginx添加自动刷新文档功能安装gulp-nodemon,browser-sync配置glupfile.js编写server.js编写插件代码方法库组件库添加单元
- GULP采用经典势能模型输出shengBTE计算用力常数文件
odin_linux
gulpnode.js前端
仅需在option参数中使用supercell控制2阶力常数的扩胞倍数,以及outputshengBTE:但是注意,gulp这里存在一个bug,输出的2阶力常数文件中超胞中原子次序与phonopy以及shengBTE用不一致:shengBTE中FORCE_CONSTANT中原子次序为:ucatom*uz*uy*ux;但是gulp中为ucatom*ux*uy*uz,对于各向同性系统,则计算没有区别,
- GULP不同版本导出ShengBTE用力常数文件,存在一些问题
odin_linux
gulpbug前端
GULP是基于经验势能的分子静力学计算软件,可以导出ShengBTE计算热导率用2阶和3阶力常数文件,相较于用LAMMPS做分动计算,可以先快速判断势能3阶非谐下的热导率理论值。但是,大家要注意GULP不同版本里输出的力常数文件,有些存在问题:1.GULP-5版本,导出的2阶力常数文件,存在原子扩胞后超胞内原子排序和phononpy等的不一致,从而导致热导率计算问题,这个在GULP-6版本中已经纠
- --save和--save-dev的区别
无名程序猿
区别:install--save是指把项目依赖包安装在dependencies(运行依赖),所谓运行依赖是指,项目运行是需要依赖该模块下相关文件。例如jq、soda等资源型文件。install--save-dev是指项目包安装在devDependencies(开发依赖)键下,所谓开发依赖是指我们在开发中需要用到的一些工具或者环境依赖包,我们在项目上线后,不依赖这些资源也可以运行项目。例如:gulp
- 节点Sass尚不支持您当前的环境:Windows 64位
邪人君子
问题Cannotloadgulp:Error:NodeSassdoesnotyetsupportyourcurrentenvironment:Windows64-bitwithUnsupportedruntime(57)Formoreinformationonwhichenvironmentsaresupportedpleasesee:https://github.com/sass/node-sa
- gulp-rev-all插件用法详解
风之化身呀
1、作用及基本用法作用将静态文件加个戳,这个戳是这个文件的hash,例如reset.css转化为reset.098f6bcd.css,只是加个戳,内容不会改变,常用于缓存管理。基本用法vargulp=require('gulp');varRevAll=require('gulp-rev-all');gulp.task('default',function(){gulp.src('dist/**')
- 使用gulp将项目中的图片压缩为webp格式
天上月丶
在浏览器中使用webpWebP是Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽,减少页面载入时间,节省用户的流量。使用gulp将png,jpg文件压缩为webp格式。constwebp=require('gulp-webp');gulp.task('image',function(){returngulp.src(
- 前端工程化-webpack/cli工具
wanglu的博客
前端校招node.jsvue.jsnode.jsjavascript
为什么要前端工程化?前端工程化是指将前端开发的流程规范化,标准化,包括开发流程,技术选型,代码规范,构建发布等,用于提升前端开发工程师的开发效率和代码质量。如果是简单的单页面应用,使用gulp打包和同步工具实现开发全流程webpack与grunt、gulp的不同?Grunt、Gulp是基于任务运⾏的⼯具:它们会⾃动执⾏指定的任务,就像流⽔线,grunt/gulp也被称为前端自动化任务管理工具,gr
- gulp和webpack究竟有什么区别?
NewChapter °
在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了Webapp模式。它们运行在现代的高级浏览器里,使用HTML5、CSS3、ES6等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一
- 前端构建工具gulp构建项目
嘻洋洋
使用前提条件gulp是基于Nodejs的自动任务运行器,gulp依赖于nodejs,因此,在使用gulp之前需要先安装nodejs。这里略过安装说明。gulp安装步骤全局安装命令:npminstall-ggulp全局安装是方便你直接使用gulp命令,为了通过它执行gulp任务,比如gulp文件gulpfile.js中执行各种任务://监听任务gulp.task('watch',['default'
- 谈谈less与sass
SoulCabin
介绍:less和sass都可以视为一种基于CSS之上的高级语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等,加快了css的开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用。sass的功能比less强大,基本上可以说是一种真正的编程语言了,less则相对清晰明了,易于上手。二者的区别:实现方式不同。less是基于JavaScr
- gulp:环境变量
Mosowe
gulpgulp环境变量
用gulp开发的过程中,也会遇到想vue这样的需要通过环境变量来控制项目的情况,通过npm的run命令,我们可以将环境变量传递给项目中的js、html等。具体方法如下:一:安装cross-envnpminstallcross-env-d二:package.json中配置scripts:"scripts":{"build":"cross-envNODE_ENV=productiongulpbuild
- 【gulp+jq+html】添加环境变量,并在js中使用(判断环境,更改api接口域名)+ 附gulpfile.js代码
String佳佳
javascriptgulphtml
参考博文:gulp分离环境gulp中如何配置环境变量gulp环境变量配置1、安装cross-env插件npminstallcross-env-d2、package.json更改scripts"scripts":{"clean":"gulpclean","serve:test":"cross-envNODE_ENV=testgulp","serve:prod":"cross-envNODE_ENV=
- Windows下C++获取系统进程列表及相关信息
_L-
windowsC++windows
一、方式一1、获取进程id列表主要使用EnumProcesses函数ULONGulPid=0;//保存进程缓存区DWORDdwProcIdArray[MAX_PATH*4]={0};ULONGulProcArrayLen=0;/*枚举进程*/if(!EnumProcesses(dwProcIdArray,sizeof(dwProcIdArray),&ulProcArrayLen))returnul
- 使用 Gulp和Grunt分别完成项目的自动化构建
Wuner
StudyNotes本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注、收藏、点赞下本博主的文章。使用Gulp完成项目的自动化构建使用gulpfile.js使用module.exports导出了build、dev、clean,所以我们可以通过gulp调用这三个任务gulpbuildgulpdevgulpclean详解gulpfile.js处理html文件我们需要安装gulp-htmlmin
- javascript事件
特例独爬的蜗牛
背景如今的前端圈堪比是娱乐圈,虽然火热程度不及当年,但是活跃程度还是很厉害的,各种技术令人眼花缭乱。从小程序到各种混合开发的解决方案,从vue,react到angular,从canvas到three.js甚至webgl,从cmd到nodejs,从gulp到webpack,各种技术让人眼花缭乱,感觉学不过来了有没有。其实这些技术我们只要朝着一个方向努力慢慢积累,总结就会慢慢成长的,无需跳过心急。看法
- gulp
壹枕星河
gulpgulp是基于Nodejs的自动任务运行器,她能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤使用流程:安装nodejs->全局安装gulp->项目安装gulp以及gulp插件->配置gulpfile.js->运行任务安装nodejs
- 常见技术问题及答案(一)
Z_the
一、用CSS实现右边宽度固定,左边自适应.box{display:flex;}.left{width:calc(100%-200px);height:300px;background:blue;}.right{width:200px;height:300px;background:red;}二、介绍一下webpack和gulp,以及项目中具体的使用gulp:是工具链、构建工具,可以配合各种插件做j
- ASM系列四 利用Method 组件动态注入方法逻辑
lijingyao8206
字节码技术jvmAOP动态代理ASM
这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇,知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道,同ClassVisitor改变类成员一样,MethodVIsistor如果需要改变方法成员,注入逻辑,也可以
- java编程思想 --内部类
百合不是茶
java内部类匿名内部类
内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅
1,内部类的创建 内部类是创建在类中的
package com.wj.InsideClass;
/*
* 内部类的创建
*/
public class CreateInsideClass {
public CreateInsideClass(
- web.xml报错
crabdave
web.xml
web.xml报错
The content of element type "web-app" must match "(icon?,display-
name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
- 泛型类的自定义
麦田的设计者
javaandroid泛型
为什么要定义泛型类,当类中要操作的引用数据类型不确定的时候。
采用泛型类,完成扩展。
例如有一个学生类
Student{
Student(){
System.out.println("I'm a student.....");
}
}
有一个老师类
- CSS清除浮动的4中方法
IT独行者
JavaScriptUIcss
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。
1、结尾处加空div标签 clear:both 1 2 3 4
.div
1
{
background
:
#000080
;
border
:
1px
s
- Cygwin使用windows的jdk 配置方法
_wy_
jdkwindowscygwin
1.[vim /etc/profile]
JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43" (windows下jdk路径为D:\Java\jdk1.6.0_43)
PATH="$JAVA_HOME/bin:${PATH}"
CLAS
- linux下安装maven
无量
mavenlinux安装
Linux下安装maven(转) 1.首先到Maven官网
下载安装文件,目前最新版本为3.0.3,下载文件为
apache-maven-3.0.3-bin.tar.gz,下载可以使用wget命令;
2.进入下载文件夹,找到下载的文件,运行如下命令解压
tar -xvf apache-maven-2.2.1-bin.tar.gz
解压后的文件夹
- tomcat的https 配置,syslog-ng配置
aichenglong
tomcathttp跳转到httpssyslong-ng配置syslog配置
1) tomcat配置https,以及http自动跳转到https的配置
1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)
keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
- 关于领号活动总结
alafqq
活动
关于某彩票活动的总结
具体需求,每个用户进活动页面,领取一个号码,1000中的一个;
活动要求
1,随机性,一定要有随机性;
2,最少中奖概率,如果注数为3200注,则最多中4注
3,效率问题,(不能每个人来都产生一个随机数,这样效率不高);
4,支持断电(仍然从下一个开始),重启服务;(存数据库有点大材小用,因此不能存放在数据库)
解决方案
1,事先产生随机数1000个,并打
- java数据结构 冒泡排序的遍历与排序
百合不是茶
java
java的冒泡排序是一种简单的排序规则
冒泡排序的原理:
比较两个相邻的数,首先将最大的排在第一个,第二次比较第二个 ,此后一样;
针对所有的元素重复以上的步骤,除了最后一个
例题;将int array[]
- JS检查输入框输入的是否是数字的一种校验方法
bijian1013
js
如下是JS检查输入框输入的是否是数字的一种校验方法:
<form method=post target="_blank">
数字:<input type="text" name=num onkeypress="checkNum(this.form)"><br>
</form>
- Test注解的两个属性:expected和timeout
bijian1013
javaJUnitexpectedtimeout
JUnit4:Test文档中的解释:
The Test annotation supports two optional parameters.
The first, expected, declares that a test method should throw an exception.
If it doesn't throw an exception or if it
- [Gson二]继承关系的POJO的反序列化
bit1129
POJO
父类
package inheritance.test2;
import java.util.Map;
public class Model {
private String field1;
private String field2;
private Map<String, String> infoMap
- 【Spark八十四】Spark零碎知识点记录
bit1129
spark
1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的
ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功,DAGScheduler会收到通知,在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中
- WAS各种脚本作用大全
ronin47
WAS 脚本
http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html
无意中,在WAS官网上发现的各种脚本作用,感觉很有作用,先与各位分享一下
获取下载
这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
- java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句
bylijinnan
switch
借鉴网上的思路,用java实现:
public class NoIfWhile {
/**
* @param args
*
* find x=1+2+3+....n
*/
public static void main(String[] args) {
int n=10;
int re=find(n);
System.o
- Netty源码学习-ObjectEncoder和ObjectDecoder
bylijinnan
javanetty
Netty中传递对象的思路很直观:
Netty中数据的传递是基于ChannelBuffer(也就是byte[]);
那把对象序列化为字节流,就可以在Netty中传递对象了
相应的从ChannelBuffer恢复对象,就是反序列化的过程
Netty已经封装好ObjectEncoder和ObjectDecoder
先看ObjectEncoder
ObjectEncoder是往外发送
- spring 定时任务中cronExpression表达式含义
chicony
cronExpression
一个cron表达式有6个必选的元素和一个可选的元素,各个元素之间是以空格分隔的,从左至右,这些元素的含义如下表所示:
代表含义 是否必须 允许的取值范围 &nb
- Nutz配置Jndi
ctrain
JNDI
1、使用JNDI获取指定资源:
var ioc = {
dao : {
type :"org.nutz.dao.impl.NutDao",
args : [ {jndi :"jdbc/dataSource"} ]
}
}
以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
- 解决 /bin/sh^M: bad interpreter: No such file or directory
daizj
shell
在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory。
分析:这是不同系统编码格式引起的:在windows系统中编辑的.sh文件可能有不可见字符,所以在Linux系统下执行会报以上异常信息。
解决:
1)在windows下转换:
利用一些编辑器如UltraEdit或EditPlus等工具
- [转]for 循环为何可恨?
dcj3sjt126com
程序员读书
Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案,要在Java将来的版本中加入闭包特征。 然而,提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。
不久前,出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨?”[http://ju
- Android实用小技巧
dcj3sjt126com
android
1、去掉所有Activity界面的标题栏
修改AndroidManifest.xml 在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"
2、去掉所有Activity界面的TitleBar 和StatusBar
修改AndroidManifes
- Oracle 复习笔记之序列
eksliang
Oracle 序列sequenceOracle sequence
转载请出自出处:http://eksliang.iteye.com/blog/2098859
1.序列的作用
序列是用于生成唯一、连续序号的对象
一般用序列来充当数据库表的主键值
2.创建序列语法如下:
create sequence s_emp
start with 1 --开始值
increment by 1 --増长值
maxval
- 有“品”的程序员
gongmeitao
工作
完美程序员的10种品质
完美程序员的每种品质都有一个范围,这个范围取决于具体的问题和背景。没有能解决所有问题的
完美程序员(至少在我们这个星球上),并且对于特定问题,完美程序员应该具有以下品质:
1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强
(范围:用简单方式解决复杂问题)
- 使用KeleyiSQLHelper类进行分页查询
hvt
sql.netC#asp.nethovertree
本文适用于sql server单主键表或者视图进行分页查询,支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码:http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
- SVG 教程 (三)圆形,椭圆,直线
天梯梦
svg
SVG <circle> SVG 圆形 - <circle>
<circle> 标签可用来创建一个圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" c
- 链表栈
luyulong
java数据结构
public class Node {
private Object object;
private Node next;
public Node() {
this.next = null;
this.object = null;
}
public Object getObject() {
return object;
}
public
- 基础数据结构和算法十:2-3 search tree
sunwinner
Algorithm2-3 search tree
Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
- spring配置定时任务
stunizhengjia
springtimer
最近因工作的需要,用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下,以便以后用到:
//------------------------定时任务调用的方法------------------------------
/**
* 存储过程定时器
*/
publi
- ITeye 8月技术图书有奖试读获奖名单公布
ITeye管理员
活动
ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。
8月试读活动回顾:
http://webmaster.iteye.com/blog/2102830
本次技术图书试读活动的优秀奖获奖名单及相应作品如下(优秀文章有很多,但名额有限,没获奖并不代表不优秀):
《跨终端Web》
gleams:http