之前在使用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小记(无刷新重载样式)的更多相关文章

  1. Ajax技术(WEB无刷新提交数据)

    (转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...

  2. 扩展GridView实现的一个自定义无刷新分页,排序,支持多种数据源的控件TwfGridView

    最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...

  3. MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)

    我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...

  4. 使用AjaxPro实现无刷新更新数据

    需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...

  5. jQuery.pager无刷新分页

    刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...

  6. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  7. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  8. 文件无刷新上传(swfUpload与uploadify)

    文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...

  9. 使用SWFUpload无刷新上传图片

    使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...

随机推荐

  1. ACE代码编辑器,代码提示,添加自定义数据

    //设置自动提示代码 var setCompleteData = function(data) { var langTools = ace.require("ace/ext/language ...

  2. nginx 常用配置说明

    一.location 配置 1.1 语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可 ...

  3. zmq 学习笔记

    0. PUB/SUB, XPUB/XSUB filtering happens at publisher sides when sockets are using a connected protoc ...

  4. SQL Server 2008 Windows身份验证改为混合模式身份验证

    1.在当前服务器右键进入“属性页”->“安全性”->勾选Sql Server和Windows身份验证模式->确定. 由于默认不启用sa,所以如果启用sa账户登录,则还需要如下设置: ...

  5. MYSQL开发性能研究——批量插入的优化措施

    一.我们遇到了什么问题 在标准SQL里面,我们通常会写下如下的SQL insert语句. INSERT INTO TBL_TEST (id) VALUES(1);   很显然,在MYSQL中,这样的方 ...

  6. svn代码版本管理总结

    svn代码版本管理 1.0开发,做dev1.0的branch此时的目录结构svn://proj/             +trunk/ (不负担开发任务)             +branches ...

  7. Javascript this 关键字

    Javascript 的 this 关键字总是指向当前被执行函数的所有者. 换句话说,如果当前函数可以视为某个对象的一个方法,那么 this 就指向该对象. 例如有这么一个函数 doSomething ...

  8. Lua中的weak表——weak table

    弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...

  9. Ember Charts – 基于 Ember & D3 的图表库

    Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库.它包括时间序列.柱状图.饼图.点图,很容易扩展和修改.这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展 ...

  10. 初用DataGrip,连接后看不到自己创建的数据库的问题

      1.首先,成功连接数据库服务 2.可以看到默认连接到名为"larins_qr_db"的数据库 3.这时,我想看其它的数据库怎么办? 4.OK,想要的出现了!