前端自动化之sass实时编译及自动刷新浏览器
gulp livereload实现sass实时编译及浏览器自动刷新
首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包。
先说一下gulp安装流程:
1:全局安装gulp,操作为: npm install gulp -g;
2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可;输完后根目录下多了个package.json文件;
3:本地安装gulp,先进入你的项目所在,如d盘下的myproject/app
d: 进入D盘;
cd myproject/app 进入myproject下面的app文件夹;
然后在当前项目根目录下输入:
npm install --save-dev gulp;
可以发现我们安装了2次,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
4.根目录下创建 gulpfile.js,此为配置文件,有关gulp的任务都写在里面,后面再讲。
至此,gulp的基本安装就已经结束,下面来安装gulp插件,有关的常用插件像代码压缩,图片压缩,重命名等还是比较多的,可以去npm上找,再次就不举例了,本文只用简单介绍自动刷新相关插件,(本想sass实时编译成css再自动刷新的)
先按照服务器插件:
livereload需要在服务器上运行,可以先npm install http-server -g;装一个插件,如果你有自己的本地服务器也行;
如果系统是win10或者8, 可能会出错,退出Node再以管理员的身份打开,重新安装即可;
安装完然后输入http-server,出现此图片代表启用服务成功;由于启用后就没法进行其他操作了(难道是我的问题?),所以再打开一个 node(反正又不要钱)
装完后以服务器环境打开文件,默认地址为 http://192.168.0.110:8080 (要找到html文件位置)
接着安装sass编译插件,npm install --save-dev gulp-ruby-sass (电脑必须已安装Ruby环境,如果没有可以则安装gulp-sass插件,64位系统下安装可能会出错,据我查资料说是2进制的问题,表示一脸懵逼)
再安装livereload插件:
npm install gulp gulp-livereload -g
安装完后cd进入项目所在位置输入livereload
需要的文件都装好后,就可以来写上面的 gulpfile.js配置文件了;
//引入插件
var gulp = require("gulp");
var livereload = require("gulp-livereload");
var sass = require("gulp-ruby-sass");
//执行任务,意思为监听src下的所有文件,发现有变动即刷新浏览器,根据自己的文件目录写监听的位置
gulp.task("sass", function() {
return sass("src/sass/*.scss")
.pipe(gulp.dest("src/css2"))
.pipe(livereload());
})
gulp.task('sasswatch', function() {
gulp.watch('src/sass/*.scss',["sass"]
);
});
gulp.task('default', function() {
livereload.listen();
gulp.watch('src/**/*.*',function(file) {
livereload.changed(file.path);
}
);
});
为了让浏览器自动刷新还需要装一个chrome的插件,但由于要FQ就算了,以下面的方案代替:
在index.html中引入一下script标签
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>
至此就可以正常搞起,亲测可用。 有双屏的写起来爽很多,只要ctrl+s保存就你懂得!!!!呵呵呵呵。
gulp.task是gulp的api之一,作用为定义任务,有关其他的api像src watch pipe dest什么的就大家自己研究了。
研究了3个多小时,大家要是能用了就点个赞。有什么问题可以咨询一下我,我要是懂得就帮你解答一下,不懂得我也没办法,本人也就刚工作一个月的水平,还是比较水的,哪里写错了大家见谅一下。
转载于:https://www.cnblogs.com/zhengrunlin/p/5868159.html
前端自动化之sass实时编译及自动刷新浏览器相关推荐
- 前端开发小工具SuperApp——Ctrl+S自动刷新浏览器
推荐前端开发中一个小工具SuperApp,灰常好用,前端开发的童鞋们,走过路过不要错过啊! 使用SuperApp后,在编辑器中更新页面资源(html,js,css)时,只需按Ctrl+S,浏览器会自动 ...
- 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5
一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...
- 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件
使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件 按照gulp需求插件 安装browser-sync(在命令行中输入) npm install --save-dev ...
- 深入理解webpack自动刷新浏览器
文章目录 1. 自动刷新浏览器 1.1 监听文件变化 1.1.1 方式 1.1.2 原理 1.2 自动刷新浏览器 1.2.1 原理 2. 模块热更新 2.1 两种方式 2.1.1 webpack-de ...
- 【webpack5】webpack-dev-server 热更新不能自动刷新浏览器
[webpack5]webpack-dev-server 热更新不能自动刷新浏览器 一.问题 配置了热更新,但是不会自动刷新页面 // webpack.dev.config.js{devServer: ...
- chrome LiveReload – 修改网页源代码后帮你自动刷新浏览器
在本地写网页代码,通常都是保存以后再在浏览器里刷新一遍看看效果,刷新这个可真是体力活,不过懒人也有福了,因为有了 LiveReload. LiveReload 是一款跨平台的软件,在 OS X.Win ...
- python自动化简历_python+selenium实现简历自动刷新的示例代码
本文用到的文件的下载地址 百度网盘链接: https://pan.baidu.com/s/1tmpdEfAZKff5TOMAitUXqQ 提取码: e6at 1 安装Python 和 selenium ...
- vscode让html文件保存自动刷新浏览器
1.在vecode扩展里面下载插件Live Server 2.下载好插件之后 点击设置 选择扩展设置 3.找到 如下图所示的设置:浏览器设置 设置自己需要用到的浏览器 我这里是谷歌 4.设置 ...
- js 刷新页面但是不闪烁_前端开发还在手动刷新页面?手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
最新文章
- 如何在xaml文件中操作用户在后台代码定义的类(1)
- 2020-08淘宝特价版杀入短视频赛道,步步紧逼拼多多-10
- Sql Server中Case函数的使用(上篇)----转载
- TCP/IP 学习 --- 2
- java链表实现_链表的原理及java实现
- 前端学习(2671): 逻辑实现
- 修复Bug大幅升级 Sun发布MySQL 5.1版
- java无穷大 inf_java – 为什么浮点数无穷大,不像NaN,等于?
- linux用命令连接wifi密码,Linux下如何通过命令连接wifi
- failed to read artifact descriptor for xx
- 解析文本文件 r 与 rb 模式的区别(Python)
- mysql 执行计划不对_mysql tokudb执行计划走的不准确案例
- python爬取网页停止_Python爬虫之爬取静态网页
- MyBatis集合Spring(一)之在MyBatis中配置Spring的应用
- 原子性判断,防并发思路
- [分块][离散化] Bzoj P2724 蒲公英
- 自己动手写操作系统之1:bochs初步使用
- linux ap中继模式,小米AIoT AX3600 WiFi 6有线中继模式(AP模式)自定义局域网LAN IP地址...
- linux就该这么学【进程地址空间】
- 非共识大会 | 伍鸣博士:DApp发展需要一条高性能且安全的公链
热门文章
- C++——this指针
- CTFshow 命令执行 web38
- delphi项目文件说明
- [YTU]_2489( C++结构体之统计最高最低分)
- imag--复数的虚数部分
- Java中static的作用详解_java中static作用详解
- 【Jupyter Notebook】启动命令行(写进.sh文件直接调用shell)
- linux内核 header.s,Linux启动代码header.S研究
- 超级计算机预测2月有雪寒潮,神预测!中国超级计算提前半个月预测了美国的寒潮...
- LOJ.2587.[APIO2018]铁人两项Duathlon(圆方树)