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