使用gulp实现自动刷新浏览器

摘要: 最近遇到个问题,就是键盘上的F5快白了,于是就百度了如何实现自动刷新浏览器.

gulp是基于流的自动化工具,关键字:自动.

我也是非常喜欢自动的东西,尤其能帮我省下好多时间,提高效率,更重要的是能提高B格;

下面就来看看如何创建;

1.cnpm init 初始化项目

2.cnpm install gulp 安装gulp 并用gulp -v查看版本号

3.cnpm install 安装所需要的依赖包

cnpm install gulp-connect --save-dev

cnpm install gulp-concat --save-dev

cnpm install gulp-rename --save-dev

cnpm install gulp-uglify --save-dev

也可以到本人的码云上下载package.json

执行cnpm install就可以了;

4.在根目录下创建gulpfile.js文件;

写入以下 代码

var gulp =require('gulp');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require("gulp-rename");

var jsSrc='./js/*.js';
var jsDist= './dist/js';
var htmlSrc='./*.html';
var htmlDist='./dist';
var cssSrc='./css/*.css';
var cssDist='./dist/css';

gulp.task('js',function(){
gulp.src(jsSrc)
.pipe(concat('index.js'))
.pipe(gulp.dest(jsDist))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest(jsDist))
.pipe(connect.reload())
});

gulp.task('html',function(){
console.log("调用html了");
gulp.src(htmlSrc)
.pipe(gulp.dest(htmlDist))
.pipe(connect.reload())
});

gulp.task('css',function(){
console.log("调用css了");
gulp.src(cssSrc)
.pipe(concat('index.css'))
.pipe(gulp.dest(cssDist))
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(cssDist))
.pipe(connect.reload())
});

gulp.task('connect', function() {
connect.server({
livereload: true,
port:8182
});
});

gulp.task('watch',function(){
gulp.watch('./*.html',['html']);
gulp.watch('./css/*.css',['css']);
gulp.watch('./js/*.js',['js'])
});

gulp.task('default',['js','html','connect','watch','css']);

可以到本人的开源项目中:http://git.oschina.net/kaykie/zidong 下载并安装