Ⅰ 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
阅读本文章之前,相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了,那么他们之间究竟有什么区别呢?
gulp文档上面有这么一句话 ,也就是说 gulp是一个自动化构建工具;
gulp的一些功能如下(包括但不限于):
其实Webpack和另外两个并没有太多的可比性
傻瓜式起步照搬官网文档
1.安装
2.在项目根目录下创建一个名为 gulpfile.js 的文件:
3.运行 gulp:
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档
新建一个项目gulp-test
环境:
1.新建文件以下文件如下
其中 gulpfile.js 是我们gulp的配置文件,启动gulp默认会找个这个文件并执行;
2.接下来安装依赖
一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了
安装依赖
这里页面实时刷新只讲这个 gulp-connect ,其他详情可以参照 Browsersync 和文章 gulp-livereload
安装完依赖后配置gulpfile.js如下:
大概讲解一下gulpfile.js:
gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务(task)
如上我们定义了 my-task-js , my-task-css , html , clean , default , watch , server 等任务,其中:
my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下;
my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下;
html 是将 符合所提供的匹配模式的html进行监听,如果有变化则connect.reload()
clean 是如果任务重新启动时 删除旧文件;
default gulp默认启动的任务
watch gulp的api 监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。
server 依赖gulp-connect启动一个服务器
配置完gulpfile.js之后,我们给js和css及html加点东西:
首先js/helloworld.js
css/index.scss
index.html
运行gulp
浏览器效果:
接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:
按保存之后,终端给我们报了一个错:
查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法,有问题解决问题,es6=>es5
解决方案:
安装gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
运行
依然报上面的错;找了一些原因发现,虽然安装了相关依赖,却没有配置.babelrc文件,即babel还没转化es6
根目录添加.babelrc文件
重新运行:
查看dist下的js文件
改变helloworld.js检查页面是否刷新
保存,页面的天空蓝换成你们喜欢的yellow颜色
修改index.scss 查看是否会刷新页面
最后修改index.html 查看是否会刷新页面
今天主要学习了gulp的简单项目搭建及实时更新配置;其实gulp类似于grunt的弱化版,但更简单好用,只是插件会少一些,目前主流的项目搭建工具主要是webpack,但依然有不少项目还用着gulp或者grunt
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
Ⅱ 前端开发提升自己的必备 js 库
做前端开发很多年了,前端库的更新真的是日新月异。多到你数都数不过来。
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结.
首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.
前端 由于入行门槛低, 更新换代很快, 每年都会有大量新的框架和库出现, 也有大量库被淘汰(比如 JQuery , 但是学习它的设计思想很有必要). 所以我们大可不必担心, 保持自己的学习步伐, 按需学习即可.
比如说你对移动端比较感兴趣, 工作中也刚好涉及到一些技术的应用,那么我可以专门研究移动端相关的技术和框架, 又或者你对企业后台/中台产品感兴趣, 比较喜欢开发PC端项目, 那么我们可以专门研究这种类型的js库或者框架, 接下来笔者也是按照不同前端业务的需求, 来整理一份能快速应用到工作中的js库, 以提高大家的开发效率.
其实还有很多,后期在更新
Ⅲ 前端工程师都有用哪些比较靠谱的小工具
1、TakeColor 取色器
对于前端开发来说,和颜色、图片打交道是难免的,有的时候想要在ps外面获取颜色.
2、CoolFormat 源代码格式化工具
CoolFormat,不仅仅适用于前端,因为它支持很多语言源代码的格式化,可以在上面的开始菜单中选择你要格式化的语言种类,这里我选择的是js,然后将一串很乱的js代码粘贴到下面的文本框里面,点击快速格式化.
3、做笔记的小帮手——有道云笔记
其实这有道云笔记不算是小工具了,在这之前,我一直都是用txt记事本记东西的
Ⅳ 前端js问题 echart 网页图表 下面这两幅动态图表是用什么插件做的
这个一般是使用h5的动画来写的,一般就可以通过js来实现效果,
只是写起来有点麻烦
Ⅳ java js前端请求后台去获得音频流,然后播放音乐,音乐可以控制进度,显示总时长
AudioCLip主要的方法有:缓喊旁play()播放依次声音;loop()循环播放音乐;stop()停止播放。做法一:InputStreamis=null;AudioStreamas=null;is=getClass().getResourceAsStream("a.wav");try{as=newAudioStream(is);}catch(IOExceptione){}AudioPlayer.player.start(as);此方法将音乐文件放入流中在播放渗碰,仅限于JavaApplication,容易报错,空指针异常,或者是流异常扰橡,不推荐。做法二:Stringmusic="a.wav";AudioClipclip=Applet.newAudioClip(getClass().getResource(music));次方法在Applet中运行没有问题,但是Application中getclass()会返回空指针,导致失败。推荐做法:privateURLurl;privateAudioClipac;Filef1=newFile("C:/3.wav");try{url=f1.toURL();}catch(MalformedURLExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}ac=Applet.newAudioClip(cb1);ac.play();
Ⅵ 在开发前端页面需要输入关于日期时间的信息时可以采用以下哪个js插件
Ⅶ 前端插件reveal.js制作PPT-进阶
幻灯片的内容需要包含在 <div class="reveal"> <div class="slides"> 的标签中。
一个section是一页幻灯片。
如果你将多个 <section> 放到另一个<section> 的内部,它们将会以垂直幻灯片的方式显示。第一个垂直幻灯片是其它的 “root(根)”
怎么理解呢? 可以这样理解:横向的幻灯片代表一章,纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的,而纵向的幻灯片是上下切换的。
For example:
其他具体内容请查询下节 参考 引用。
1、 reveal.js-一个专门用来做 HTML 演示文稿的框架
2、 HTML5幻灯片库reveal.js使用
3、 使用reveal.js制作一个酷炫的网页ppt
4、 Reveal.js:把你的 Markdown 文稿变成 PPT
Ⅷ 实现按需加载JS,CSS该使用什么前端工具比较合适
通过js可以直接实现按需加载,或者用layui插件,requirejs插件
Ⅸ 前端怎么看js插件样式
js插件样式。。看看源码 看看有没有API src一下试试啊 不调试不存在的
Ⅹ 前端js插件
前端js插件,具有简单使用,交互效果好,具有吸引力外观的特点,下面总结一下最常用并且最好用的js插件:
1.zDialog.js插件。是一个包含各种弹窗的前端插件。
2.ace.min.js插件,ace-element.min.js插件,是基于Bootstrap Ace模板的菜单和包含Tab页效果。
3.jquery.flot.js插件,Jquery的图表插件float。Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库。
4.jquery.easypiechart.js插件,主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫。
query.sparkline.js插件,是一款jquery的画小图插件。
5.jquery.slimscroll.js插件 ,是jQuery内的内容滚动插件,可以定义高度、宽度,还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义。
6.jquery.ui.touch.js 插件,包含jQuery触摸效果。