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 插件汇总 ...
随机推荐
- iOS CoreAnimate 动画实现
这里主要讲的是使用CoreAnimate实现所需的动画. 先上官网的介绍:https://developer.apple.com/library/ios/documentation/Cocoa/Con ...
- (分享)FreeVideo1.6.1 VIP视频播放器(支持下载)
软件名字:FreeVideo 版 本 号 :v 1.6.1 开发语言:易语言 压缩加壳:VMP 3.0 beta 皮 肤:易简约定制版(白色) 模块使用:乐易.精易.皮肤 主要技术:其实没啥 ...
- es6 Class的继承extends & super
Class之间可以通过extends关键字,实现继承. 子类会继承父类的属性和方法. class Point { constructor(x, y) { this.x = x; this.y = y; ...
- java学习第13天( java获取当前时间,有关大数据的运算及精确数字运算,Date类)
一 java获取当前时间 学习一个函数,得到当前时间的准确值 System.currectTimeMillis(). 可以得到以毫秒为单位的当前时间.它主要用于计算程序运行时间,long start= ...
- 安装sass并ruby更改淘宝镜像
一.安装ruby 去官网下载ruby安装(注意:安装的时候选择第二项变量环境安装add ruby executables to your PATH) 二.安装完成后 在windows左下角打开所有应用 ...
- C--关键字static
static在C中主要有两个作用: 1.修饰变量 (局部变量.全局变量 都存在内存的静态区) 静态全局变量: 作用域仅限于变量被定义的文件中,其中文件即使用extern声明也无法使用它. 静态局部变 ...
- Linux Top 命令解析 比较详细
[尊重原创文章出自:http://www.jb51.net/LINUXjishu/34604.html] TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占 ...
- IP地址划分
对于32位的IPV4地址来说,有5中IP地址类型 A类IP地址第一个字节是网络地址,后三个字节是主机地址,且最高位以0开头. 0000001 00000000 00000000 00000001 ...
- No permission to write APN settings: Neither user *** nor current process has android.permission.WRITE_APN_SETTINGS.
在ICS40以前的版本中,如果程序需要设置APN,只需要在AndroidManifest文件中声明这个权限即可.在40的机器上运行则会抛出以下异常:java.lang.SecurityExceptio ...
- firefox浏览器不支持复制粘贴(linux)
在Linux主机下使用firefox在线编辑文章时,提示不支持复制粘贴选项,并给出了解决方法,记录一下 1.先找到本机firefox的配置文件的所在文件夹位置,不知道的请遵循以下步骤 点击菜单栏的帮助 ...