gulp下livereload和webserver实现本地服务器下文件自动刷新

一、前言

node从v0.10.26升级（为了匹配autoprefixer）到v5.3.0后出现了gulp插件兼容问题，在nodejs下各种新的插件出现问题，需要重新配置。livereload实现chrome自动刷新需要安装插件，偶尔被墙不是很方便。用webserver搭配livereload，可以实现本地（不需要apache服务器）服务器式文件自动刷新预览，所见即所得，so酷~!配合sublime text3 (大量的最新插件已经开始以3为基准)简直是神器

二、下载

现在很多插件描写的博文都是很久以前的，并不是很适合现在的新版本，so，最好去看官网插件的使用文档，那是最权威最新的，看不懂英语不要紧，看懂代码即可（英语可百度谷歌在线翻译）。nodejs可在官网下也可在中文网下 插件官网有使用文档。但是：最好不要下载nodejs的最新的版本，有些插件可能不支持。

https://nodejs.org

http://nodejs.cn/  

http://gulpjs.com/plugins/

https://www.npmjs.com/

三、配置

使用的node版本

确保安装插件，部分gulpfile.js

/*加载插件*/
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'), //自动处理浏览器前缀
    cache = require('gulp-cache'), //缓存
    clean = require('gulp-clean'), //清空文件夹
    concat = require('gulp-concat'), //合并文件
    htmlmin = require('gulp-htmlmin'), //压缩html
    imagemin = require('gulp-imagemin'), //图片压缩
    pngquant = require('imagemin-pngquant'), //png压缩
    less = require('gulp-less'),
    livereload = require('gulp-livereload'), //服务器<-->文件自动更新
    minifyCss = require('gulp-minify-css'), //缩小化(minify)CSS
    rename = require('gulp-rename'), //重命名
    rev = require('gulp-rev'),//md5
    revCollector = require('gulp-rev-collector'),//替换md5后文件名
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'), //js压缩
    watch = require('gulp-watch'), //监听
    webserver = require('gulp-webserver'); // 本地服务器
    zip = require('gulp-zip'); //打包前的压缩
//源码路径
var srcPath = {
    css: "./src/css/*.css"
};
//输出目录
var distPath = {,
    css: "./web/css"
};

gulp.task('css', function(){
    return gulp.src(srcPath.css)
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifyCss())
        .pipe(gulp.dest(distPath.mincss));
});

gulp.task('clean', function() {
  return gulp.src([distPath.html,distPath.css,distPath.js], {read: false})
    .pipe(clean({force: true}));
});
gulp.task('webserver', function() {
  gulp.src( './' ) // 服务器目录（代表根目录）
  .pipe(webserver({
    livereload: true,
  }));
});
gulp.task('watch', function() {
    gulp.watch(srcPath.html, ['html']);
    gulp.watch(srcPath.js, ['js']);
    gulp.watch(srcPath.css, ['css']);
    gulp.watch(srcPath.less, ['less']);
    gulp.watch(srcPath.sass, ['sass']);
    gulp.watch(srcPath.img, ['img']);
});
gulp.task('default', ['clean'], function(){
    gulp.start( 'webserver','css','img','watch');
});

　　

 

三、常见报错处理　

1、被墙：vpn稳定的要钱，不要钱的不稳定，可以使用github（可以正常访问）上的免费插件或是提供的各种工具 比如   https://github.com/racaljk/hosts   修改hosts即可，官网定期更新

2、cmd安装莫名其妙报错：淡定，关掉重新安装或是换个文件夹cd进入再次安装可以搞定。最终版确定后压缩打包备份

3、node_modules不能正常复制删除？打包压缩zip既可复制也可移动；删除使用360强制搞定

4、插件太久不兼容？重新npm安装

5、cmd下无权限？以管理员身份运行 or 使用sudo or 使用淘宝的 cnpm 镜像安装