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文件中添加如下代码
// 载入外挂
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload'); //定义任务
gulp.task('sass', function() {
//执行sass()定义文件路径以及编译后的格式
return sass('sass/*.scss',{ style: 'expanded'})
//编译后的输出路径
.pipe(gulp.dest('css'))
//浏览器自动刷新
.pipe(livereload());
}); gulp.task('watch', function() {
//调用livereload的listen接口
livereload.listen();
//监听'sass/*.scss',并在文件内容发生改变时,调用'sass'任务
gulp.watch('sass/*.scss', ['sass']);
});
4)命令行执行gulp sass,
5)点击浏览器红圈中的按钮(该按钮为livereload插件),中心变为实心说名一连接livereload;可以使用
6)命令行执行gulp watch,即可实现浏览器的自动刷新