前言
为了满足标准化开发环境，web开发环境的要求越发复杂。经常在开发环境中需要有服务器端的环境，所以也会使用一些带环境的开发工具来使用，但也是会有一些诟病，比如webstorm 软件的允许缓慢，这也很影响开发效率，所以我们能不能自己搭建一个简易便捷高效的环境呢？答案是可以的，我们可以借助node平台，使用gulp构建工具搭建起这样的一个开发环境用于开发测试使用。
准备工作
- 必须先全局安装好node.js的环境（注意安装路径不要包含中文）
- 可选的安装git（一个分布式代码版本控制软件），界面比微软自带的cmd命令台友好~~~
搭建好环境后，直接使用gulp项目构建工具，安装对应包，并进行任务配置，步骤如下：
全局安装gulp
npm install -g gulp
进入到项目文件夹，将gulp安装到项目
npm install gulp --save-dev
#提示：可以在项目根目录中添加一个详细的依赖清单(package.json文件)，使用npm inint 初始化添加即可，基本盲目回车下一步完成操作。
#安装需要使用的 browser-sync 包
npm install browser-sync --save-dev
当然你也可以继续安装一些其他的包：js代码压缩(gulp-uglify)、css代码压缩(gulp-minify-css)等....
####开始配置一些gulpfile任务
var gulp = require('gulp');//引入gulp 模块
var browserSync = require('browser-sync').create();//引入browser-sync 模块 ，并创建服务器
var minifyCSS = require('gulp-minify-css');//压缩css插件
var uglify=require ("gulp-uglify") //获取gulp-ublify组建
//使用gulp 搭建一台服务器环境
gulp.task('http',['css','script'],function(){//自定义一个http 任务 ,['css','script'] 是http任务需要依赖执行的任务
console.log('正在启动服务器...');
//初始化服务器
browserSync.init({
server:'./www'//设置网站的根目录
})
console.log('服务器已开启...,请使用浏览器访问：http://127.0.0.1:3000');
//压缩css文件
//监听所设置的文件，只要文件更新，浏览器自动更新
browserSync.watch('./www/*.html').on('change', browserSync.reload);
})
其他的配置参考
//可以定义一个压缩css的任务
gulp.task('css',function(){
gulp.src('./www/src/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('./www/dist/css'));//找到所有的css文件
})
//压缩js
gulp.task("script", function(){
gulp.src("./www/src/*.js") //找到js文件夹下的所有js
.pipe(uglify()) //压缩文件
.pipe(gulp.dest("./www/dist/js")) //压缩完成后的文件另存到dist/js/目录下
})
