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