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 镜像安装