gulp插件gulp-ruby-sass和livereload插件

gulp-ruby-sass是gulp的一个插件，主要是用来实现sass编译，livereload插件主要是实现文件保存时浏览器自动刷新，避免了手动f5的频繁的操作

准备工作：chrome浏览器安装livereload插件，没有安装的可以百度搜索或者FQ下载，

1）首先安装node，全局安装gulp，如果不了解gulp的请先移步到这里。

2）打开命令行切换到工程目录下，安装gulp（cnpm install gulp --save-dev）、gulp-ruby-sass（cnpm install gulp-ruby-sass --save-dev）以及，并在工程根目录下新建gulpfile.js文件。

3）在gulpfile.js文件中添加如下代码

 1 // 载入外挂
 2 var gulp = require('gulp'),
 3     sass = require('gulp-ruby-sass'),
 4     livereload = require('gulp-livereload');
 5
 6  //定义任务
 7 gulp.task('sass', function() {
 8     //执行sass（）定义文件路径以及编译后的格式
 9     return sass('sass/*.scss',{ style: 'expanded'})
10     //编译后的输出路径
11     .pipe(gulp.dest('css'))
12     //浏览器自动刷新
13     .pipe(livereload());
14 });
15
16 gulp.task('watch', function() {
17     //调用livereload的listen接口
18     livereload.listen();
19     //监听'sass/*.scss'，并在文件内容发生改变时，调用'sass'任务
20     gulp.watch('sass/*.scss', ['sass']);
21 });

4）命令行执行gulp sass，

5）点击浏览器红圈中的按钮（该按钮为livereload插件），中心变为实心说名一连接livereload；可以使用

6）命令行执行gulp watch，即可实现浏览器的自动刷新

转载于:https://www.cnblogs.com/yan-ck/p/5824742.html

gulp插件gulp-ruby-sass和livereload插件相关推荐

Sublime与Firefox（火狐）配置livereload插件实现动态实时刷新浏览器
我们在使用sublime时一般需要修改html代码时要保存退出然后刷新浏览器,这样就显得有点麻烦. 火狐浏览器和sublime都提供了livereload插件,网络上大部分都是说配置Chrome,火狐 ...
gulp前端自动化构建工具：常用插件介绍及使用
Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境).一些常见.重复的任务,例如:网页自动刷新.CSS预处理.代码检测.压缩图片.等 ...
gulp.spritesmith gulp插件
概念 spritesmith的作用就是拼接图片并生成样式表,并且还能输出SASS,Stylus,LESS甚至是JSON.github地址:https://github.com/twolfson/gul ...
node.js的第三方模块 nodemon、nrm、Gulp、Gulp插件
什么是第三方模块别人写好的.具有特定功能的.我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包. 第三方模块有两种存在形式: 以js文件的形式 ...
浅谈node环境下的Sass以及gulp工具下的Sass
目录一.Sass简介二.Sass的解析器 1. node环境下的Sass解析器 2. gulp工具下的Sass解析器三.Sass语法 1. 注释 2. 变量 3.嵌套 4.导入@import 5 ...
Gulp 编译Less和Sass
在实际应用中,我们一般会使用 CSS 的预处理器来编写 CSS 代码,例如 Less 和 Sass 语言,通过将脚本解析成 CSS 的脚本语言,可以减少 CSS 的重复,也可以节省时间. 本节我们来学 ...
Vscode 中LiveReload插件总是启动失败和出错图文详细分析和stepbystep解决方案
一.环境配置: Date:2020/11/07 OS: Win10(x64) VSCODE:1.50.1 LiveReload:0.2.5 二.问题描述: 通过在VSCODE中执行快捷命令ctrl+s ...
【gulp】----gulp的使用
转自华哥https://www.cnblogs.com/nanianqiming/p/8028536.html 什么是gulp? 基于node的自动化构建工具扩展:开发的时候分为2个节点一个是开 ...
subline类似less的html插件,29个常用 Sublime Text 插件推荐
1.Package Control:插件包管理工具 2.Soda:一个流行的主题,包含代码着色.标签.图标 3.Emmet:流行的Html编写插件,是zed code升级版包含css编写 4.Subl ...

gulp插件gulp-ruby-sass和livereload插件

gulp插件gulp-ruby-sass和livereload插件相关推荐

最新文章

热门文章