一、前言
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 镜像安装