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文件中添加如下代码
// 载入外挂
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,即可实现浏览器的自动刷新
gulp插件gulp-ruby-sass和livereload插件的更多相关文章
- 谷歌livereload插件使用
1.插件下载地址:http://www.chromein.com/search_livereload_1.html 2.谷歌浏览器启用改插件 3.sublime 安装livereload插件,安装方法 ...
- 【gulp】Gulp的安装和配置 及 系列插件
注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置 ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
- gulp-htmlmin 页面压缩插件 gulp插件 参数说明
gulpfile.js var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('testHtmlmin', ...
- 项目使用gulp的配置编译sass笔记
Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...
- 续Gulp使用入门编译Sass
使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...
- sublime livereload插件
1.首先在chrome商店下载livereload 安装之后记得在 chrome 的 扩展程序 里面 勾上 允许访问文件地址 2.sublime text 3 中下载插件 Livereload 3.配 ...
- 【gulp】gulp + browsersync 构建前端项目自动化工作流
什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
随机推荐
- Android test---JUnit
JUnit 单元测试 Android的单元测试基础也是比较简单,同样还是测试相加方法是否正确,测试用例还是用1+1?=2来个简单的Android单元测试: 1..打开eclipse,新建一个proje ...
- oracle DBlink 【转】
. 实现结果:在一个数据库中某个用户下编写一个存储过程,在存储过程中使用DBLINK连接另一个数据库,从此数据库中的一个用户下取数,然后插入当前的数据库中的一个表中. 二. 实现方法步骤: 1. 创建 ...
- Struts2 XML配置详解
struts官网下载地址:http://struts.apache.org/ 1. 深入Struts2的配置文件 本部分主要介绍struts.xml的常用配置. 1.1. 包配置: S ...
- 关于NK3C使用富文本编辑器(CKEditor)发送HTML邮件的使用说明
目前NK3C发送HTML邮件使用的的编辑器是CKEditor4.6版本,关于CKEditor的使用说明如下: 1.依赖JQuery1.7版本以上,在xxx.vm中<head>< ...
- Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境搭建教程
原文地址:http://www.osyunwei.com/archives/7378.html 搬运是为了自己找资料方便. 准备篇 一.环境说明: 操作系统:Windows Server 2012 R ...
- C语言字符输出格式化
转自http://blog.csdn.net/pbymw8iwm/article/details/8153226 符号属性 长度属性 基本型 所占 位数 取值范围 输入符举例 输出符举例 -- -- ...
- Ngnix反向代理react-router配置问题解决方法
项目以react router实现,用ngnix做反向代理的时候出现404找不到页面,有两种解决方法. 第一种 将<Route path="*" component={No ...
- SqlServer字段说明查询
SELECT t.[name] AS 表名,c.[name] AS 字段名,cast(ep.[value] )) AS [字段说明] FROM sys.tables AS t INNER JOIN s ...
- python+selenium简易自动化框架,包含生成测试报告以及发送结果至Email
Selenium+python环境搭建见虫师的pdf文档,非常详尽 简易框架: 1.文件目录:
- Python语法三
1. from os.path import exists import 了又一个很好用的命令 exists.这个命令将文件名字符串作为参 数,如果文件存在的话,它将返回 True,否则将返回 Fal ...