手机网站一年维护费,学做网站的笔记本,同城信息发布平台,wordpress文章设置到导航栏gulp-ruby-sass是gulp的一个插件#xff0c;主要是用来实现sass编译#xff0c;livereload插件主要是实现文件保存时浏览器自动刷新#xff0c;避免了手动f5的频繁的操作 准备工作#xff1a;chrome浏览器安装livereload插件#xff0c;没有安装的可以百度搜索或者FQ下载主要是用来实现sass编译livereload插件主要是实现文件保存时浏览器自动刷新避免了手动f5的频繁的操作 准备工作chrome浏览器安装livereload插件没有安装的可以百度搜索或者FQ下载 1首先安装node全局安装gulp如果不了解gulp的请先移步到这里。 2打开命令行切换到工程目录下安装gulpcnpm install gulp --save-dev、gulp-ruby-sasscnpm 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
