我相信肯定有很多前端開發者和我一樣都厭倦了修改完代碼再切換到瀏覽器刷新去看新的實現。今天我們就用一種最簡單的文件監聽模式和一個gulp插件（gulp-livereload）來實現這個功能。
- 首先安裝gulp
npm install gulp -g
- 安裝gulp-livereload插件
npm i gulp-livereload --save-dev
(npm i 為npm install 縮寫）
- 配置gulp配置文件
自動刷新配置
//監聽所有打包之后的文件變動，自動刷新頁面
gulp.task('watch', function () {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
要使這個能夠工作，還需要在瀏覽器上安裝LiveReload插件，或者在你需要自動刷新的頁面上加上
1.本地
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
2.遠程
<script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
整個gulp
var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var babel = require('gulp-babel');
var livereload = require('gulp-livereload');
//編譯less
gulp.task('less', function () {
return gulp.src('./src/less/**.less')
.pipe(less())
//.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'));
});
//監聽less文件
gulp.task('autoless', function () {
gulp.watch('./src/less/**.less', ['less'])
})
//編譯es6
gulp.task('babel', () => {
return gulp.src(['./src/js/**.js'])
.pipe(babel({ presets: ['es2015'] }))
.pipe(gulp.dest('dist/js'));
});
//監聽js文件
gulp.task('autojs', function () {
gulp.watch('./src/js/**.js', ['babel'])
});
//監聽所有打包之后的文件變動，自動刷新頁面
gulp.task('watch', function () {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
// 使用 gulp.task('default') 定義默認任務
gulp.task('default', ['less', 'autoless', 'babel', 'autojs', 'watch'])
