gulp自动化构建工具gulp-connect插件配置服务器实现热更新+自动刷新

var gulp = require("gulp"),
	sass = require("gulp-sass"),
	cssmin = require("gulp-clean-css"),
	rename = require("gulp-rename"),
	connect = require("gulp-connect");

gulp.task("sass-min-rename", function(){
	gulp.src("./SASS/*.scss")
		.pipe(sass()) //编译
		.pipe(gulp.dest("./dist/css"))//编译后保存
		.pipe(cssmin())//压缩
		//这里css没有合并为一个文件，要重命名就在rename传回调函数在基础名之上修改（直接改就直接传改后的文件名）
		.pipe(rename(function(filename){
			filename.basename += ".min"
		}))
		.pipe(gulp.dest("./dist/css"));//再将压缩并重命名后的所有css保存
})

gulp.task("copy-index", function(){
	gulp.src("./index.html")
		.pipe(gulp.dest("./dist"));
})

gulp.task("watch", function(){//监听任务
	gulp.watch("./index.html", ["copy-index"]);
	gulp.watch("./SASS/*.scss", ["sass-min-rename"]);
	gulp.watch("./dist/**/*.*", ["reload"]);//监听dist下所有文件
})

gulp.task("reload", function(){
	gulp.src("./dist/**/*.html")
		.pipe(connect.reload());
})

gulp.task("server", function(){//配置热更新服务器
	connect.server({
		root: "./dist",
		livereload: true,
		port: 8030
	})
})

/*wacth和server命令只能运行一个，所以可以用default同时执行多个任务，命令行直接gulp执行*/
gulp.task("default", ["server", "watch"], function(){});//函数可以不传

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。


使用步骤：
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

a. 安装 NodeJS
node -v
npm -v
使用 npm 安装包：
npm install <name> [-g] [--save-dev]
b. 选装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org


安装包：
cnpm install <name> [-g] [--save-dev]
c. 全局安装 gulp
cnpm install gulp -g


以上步骤执行一次即可。以下步骤在每个项目中执行：


d. 在项目目录下生成 package.json 文件：
在命令提示符下进入项目目录，然后执行：
cnpm init
可以一路回车生成 package.json 文件
e. 在项目目录下本地安装 gulp：
cnpm install gulp --save-dev
本地安装的资源都放在 node_modules 文件夹下
f. 项目本地安装 gulp 插件()：
压缩CSS插件：
gulp-clean-css
cnpm install gulp-clean-css --save-dev
压缩JS：
gulp-uglify
cnpm install --save-dev gulp-uglify
HTML压缩：
gulp-htmlmin
cnpm install --save-dev gulp-htmlmin
SASS编译：
gulp-sass
cnpm i gulp-sass --save-dev
(可能还需要安装 node-sass )
自动刷新：
gulp-livereload
web服务器
gulp-connect(内置有 livereload 功能)

g. 配置 gulpfile.js 文件
// 引入使用到的模块
let gulp = require("gulp"),
minifyCss = require("gulp-clean-css");

var gulp = require("gulp"),
	uglify = require("gulp-uglify"),
	sass = require("gulp-sass"),
	connect = require("gulp-connect"),
	htmlmin = require("gulp-htmlmin"),
	babel = require("gulp-babel"),
	plumber = require("gulp-plumber"),
	_root = "dist";

// 启动服务器
gulp.task("server", function(){
	connect.server({
		root : _root,
		livereload : true
	});
});

// 压缩JS
gulp.task("js", function(){
	gulp.src("src/js/**/*.js")
		.pipe(plumber())
		.pipe(babel({
            presets: ['env']
        }))
		.pipe(uglify())
		.pipe(gulp.dest("dist/js"))
		.pipe(connect.reload());
});

// 定义 gulp 任务，压缩 HTML
gulp.task("html", function(){
	gulp.src(["src/**/*.html"])
		.pipe(htmlmin({collapseWhitespace: true, minifyCSS:true, minifyJS:true}))
		.pipe(gulp.dest("dist"))
		.pipe(connect.reload());
});

// 定义任务，编译 sass
gulp.task("sass", function(){
	gulp.src("src/sass/**/*.scss")
		.pipe(plumber())
		.pipe(sass({outputStyle:"compressed"}))
		.pipe(gulp.dest(_root + "/css"))
		.pipe(connect.reload());
});

// 将图片、库、模拟的假数据复制到 dist 下
gulp.task("images", function(){
	gulp.src("src/images/**/*.*")
		.pipe(gulp.dest("dist/images"));
});
gulp.task("lib", function(){
	gulp.src("src/lib/**/*.*")
		.pipe(gulp.dest("dist/lib"));
});
gulp.task("mock", function(){
	gulp.src("src/mock/**/*.*")
		.pipe(gulp.dest("dist/mock"));
});
gulp.task("copyfile", ["images", "mock", "lib"]);

gulp.task("watch", function(){
	gulp.watch("src/sass/**/*.scss", ["sass"]);
	gulp.watch("src/js/**/*.js", ["js"]);
	gulp.watch(["src/**/*.html"], ["html"]);
});

gulp.task("default", ["html", "js", "sass", "copyfile", "server", "watch"]);