gulp小记(无刷新重载样式)
之前在使用sass的时候,使用了一个不错的工具koala,其实它的原理就是监视sass文件的变化,去编译css而gulp也能为我们做这样的事并且更多 使用gulp之前我们要做一些准备工作
1)安装node.js
2)全局模式下安装gulp npm install -g gulp
3)进入到工程目录下 本地安装gulp
npm install --save-dev gulp 以开发依赖的模式安装gulp
3)编写gulpfile.js文件 gulpfile.js是gulp的主文件,任务的定义全在这里 下面我们写一个hello world
var gulp = require('gulp'); gulp.task('default',function(){
console.log('hello world');
});
当我们在命令行运行gulp gulp会自动运行这个default任务(当然我们也可以通过gulp default 去运行这个default任务 可以通过default作为我们任务的入口)
下面介绍下gulp的几个主要的方法 gulp.src() gulp.dest() gulp.tsak() gulp.watch()
1)gulp.src() 这个方法主要是获得要操作的流
gulp使用的node.js的流 通过流的pipe()方法将流导入到需要操作的地方 例如gulp的插件 sass 中 gulp.src()正是获得操作的方法
2)gulp.dest() 这个方法与gulp.src()相对
通过流的pipe方法导入到gulp.dest()方法, 会在相应的目录生成跟gulp.src()流文件同名的文件
3)gulp.task(参数1,参数2,参数3) 这个方法接收三个参数 第一个是任务的名字 第二个是当前任务依赖的任务,是一个数组 第二个参数是一个function() 也就是我们想要任务执行的代码
下面演示下这个方法的基本使用
var gulp = require('gulp'); gulp.task('one',function(){
console.log('one');
}); gulp.task('two',['one'],function(){
console.log('two');
}); gulp.task('default',['two']);
我们发现当我们想要运行task two的时候,gulp会先帮我们执行依赖的task one 但是如果我们的task one是一个异步的任务呢
var gulp = require('gulp'); gulp.task('one',function(){
setTimeout(function(){
console.log('one');
},3000);
}); gulp.task('two',['one'],function(){
console.log('two');
}); gulp.task('default',['two']);
会发现gulp也会在执行task two之前为我们执行task one 但是不会等待task one执行完毕 这并不是我们想要的结果
下面提供三种解决方案
1)在这个异步任务执行完去执行一个回调函数 通知gulp这个任务执行完毕 这个回调函数是任务函数的第一个参数
var gulp = require('gulp'); gulp.task('one',function(cb){
setTimeout(function(){
console.log('one');
cb();
},3000);
}); gulp.task('two',['one'],function(){
console.log('two');
}); gulp.task('default',['two']);
2)定义任务的时候返回一个流对象 也就是需要等这个task执行完 将流对象传入下一个task
var gulp = require('gulp'); gulp.task('one',function(){
var stream = gulp.src('sass/*.scss');
/*进行一些异步操作*/
return stream;
}); gulp.task('two',['one'],function(){
console.log('two');
}); gulp.task('default',['two']);
这样的方式也能达到我们想要的效果,这种方式的局限性就是适合通过gulp.src()获得操作流的task
3)返回promise对象
var q = require('q');//这里调用了异步处理库q
var gulp = require('gulp'); gulp.task('one',function(){
var deferred = q.defer();
setTimeout(function(){
console.log('one');
deferred.resolve();
},3000); return deferred.promise;
}); gulp.task('two',['one'],function(){
console.log('two');
}); gulp.task('default',['two']);
4)gulp.watch() 我们想要去实现自动化的编译sass 重载css文件都是通过watch方法实现 它通过监视目录下文件的变化 ,去指向相应的操作
插播一下gulp的插件 gulp-load-plugins 当我们安装了gulp-load-plugins的时候,它就会自动在运行的时候,当我们需要哪个插件的时候去调用相应的插件去执行相应的操作 前提是你的插件要写在package.json中(gulp-load-plugins的好处也是我们不用在我们的gulpfile.js文件头将我们需要的插件全部require了 它负责帮我们调用)
下面是一个编译自动化编译sass的例子
安装gulp-load-plugins npm install --save-dev gulp-load-plugins
安装 gulp-sass npm install --save-dev gulp-sass
var gulp = require('gulp')
var plugins = require('gulp-load-plugins')();//当我们要使用相应的插件的时候 就可以通过plugin.sass()这样方式应用 遵循驼峰命名 gulp.task('sass',function(){
gulp.src('sass/*.scss')
.pipe(plugins.sass())
.pipe(gulp.dest('css'))
}); gulp.task('default',function(){
gulp.watch('sass/*.scss',['sass']);
}) //检测目录先所有sass文件的变化 执行sass编译
运行gulp
发现已经进入监听 我修改sass文件下的文件 发现他自动的编译了css
而实现修改样式自动加载的方式跟这个差不多 我们需要在使用另一个插件 gulp-livereload
安装gulp-livereload npm install gulp-livereload
安装插件 在chrome下的 livereload
点击这个按钮 激活livereload
下面是一个例子
在我本地的服务器有一个页面,他的背景色是红色 我想要的是通过修改sass文件 自动的编译css 并且不刷新的情况先重载这个样式
var gulp = require('gulp')
var plugins = require('gulp-load-plugins')(); gulp.task('sass',function(){
gulp.src('sass/*.scss')
.pipe(plugins.sass())
.pipe(gulp.dest('css'))
.pipe(plugins.livereload());//将想要监视的流导入livereload中
}); gulp.task('default',function(){
plugins.livereload.listen();//调用listen方法 实现自动刷新
gulp.watch('sass/*.scss',['sass']);
})
神奇的事情就出现了 在我修改sass文件的时候,它会自动的编译css 并且为我加载了css
gulp小记(无刷新重载样式)的更多相关文章
- Ajax技术(WEB无刷新提交数据)
(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...
- 扩展GridView实现的一个自定义无刷新分页,排序,支持多种数据源的控件TwfGridView
最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...
- MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...
- 使用AjaxPro实现无刷新更新数据
需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...
- jQuery.pager无刷新分页
刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...
- [转]jquery 点击表格变为input可以修改无刷新更新数据
原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...
- 基于h5的图片无刷新上传(uploadifive)
基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...
- 文件无刷新上传(swfUpload与uploadify)
文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...
- 使用SWFUpload无刷新上传图片
使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...
随机推荐
- 使用PowerDesigner导出Word/HTML的一些配置
目标:根据物理视图导出代码和列清单(包括字段.类型.注释).由于默认导出的要素太多,大多不是自己想要的,这里简单说下导出目标的一些配置,留下来备用. 其中,Title中的图和Table表格中的代码预览 ...
- 超时时间已到。在操作完成之前超时时间已过或服务器未响应。 (.Net SqlClient Data Provider)
超时时间已到.在操作完成之前超时时间已过或服务器未响应. (.Net SqlClient Data Provider) 在做一个小东西的时候出现了这个问题,就是使用VS调试几次项目后,使用SQL Se ...
- 对依赖倒置原则(DIP)及Ioc、DI、Ioc容器的一些理解
1.概述 所谓依赖倒置原则(Dependence Inversion Principle)就是要依赖于抽象,不要依赖于具体.简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模 ...
- Elasticsearch及java客户端jest使用
本文使用Github中的Elasticsearch-rtf,已经集成了众多的插件,例如必须使用的中文分词等,可以简单的通过配置来启用中文分词.本文主要分为以下几部分: 1.配置和启用中文分词: 2.定 ...
- 七牛portal可用性测试记
引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试.七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉.七牛云存储的后台选用并不常用的 ...
- 编写高质量JS代码的68个有效方法(二)
[20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- LeetCode-Maximum Product of Word Lengths
Description: Given a string array words, find the maximum value of length(word[i]) * length(word[j]) ...
- Android 学习笔记之Volley开源框架解析(三)
学习内容: 1.CacheDispatcher缓存请求调度... 2.Cache缓存数据的保存... 3.DiskBasedCache基于磁盘的缓存类实现方式... 前面说到使用Volley发 ...
- SQL语句技巧:查询时巧用OR实现逻辑判断
首先看以下SQL逻辑语句块: ) ) SET @fieldname='chassisno' --这里可传入chassisno,plateno,owner,contacttelno其中之一或不传 SET ...
- Java魔法堂:JUnit4使用详解
目录 1. 开 ...