搭建一个es6开发环境
本文基于《ES6零基础教学 解析彩票项目》，视频地址：https://coding.imooc.com/class/evaluation/98.html#Anchor。
这里的编译环境是 gulp+webpack+node+express+express-generator。
准备：安装node.js，git此处略。
开始：
构建文件目录（此处用git bash）逐一输入命令：
mkdir app
mkdir server
mkdir tasks
#进入app目录
cd app
mkdir css #创建css存放目录
mkdir js #创建js存放目录
mkdir views #创建views存放目录
mkdir js/class #以下初始化一些文件
touch js/class/test.js
touch js/index.js #入口文件
touch views.error.ejs #错误模板文件
touch views.index.ejs #入口模板文件
#进入server目录
cd ../server
#express -e
#这里可能会报错，所以建议先安装express-generator，然后再安装express
npm install -g express-generator
npm install -g express
#初始化一个 express 项目并安装所需模块
express -e .
npm install
#进入tasks目录
cd ../tasks
mkdir util
touch util/args.js #读取命令行输入的命令参数
touch scripts.js #处理js的构建脚本
touch pages.js #处理模板的构建脚本
touch css.js #处理css的构建脚本
touch server.js #服务器脚本
touch browser.js #浏览器监听相关文件（css js 模板发生改变触发相关脚本）
touch clean.js #清空指定命令的任务
touch build.js #将所有任务串联起来（注意任务顺序问题）
#返回根目录
cd ../
npm init #初始化项目一直回车就行了
touch .babelrc #babel的配置文件
touch gulpfile.babel.js #因为用到babel所以 gulp 的默认配置文件是这个，以上基本目录，文件创建完毕，以下是代码，如果只想搭建一个学习es6的环境，不需要过多理解以下代码
args.js
import yargs from 'yargs';
const args = yargs
.option('production',{
boolean:true,
default:false,
describe:'min all scripts'
})
.option('watch',{//监听
boolean:true,
default:false,
describe:'watch all files'
})
.option('verbose',{//日志
boolean:true,
default:false,
describe:'log'
})
.option('sourcemaps',{
describe:'force the creation of sroucemaps'
})
.option('port',{//端口
string:true,
default:8080,
describe:'server port'
})
.argv
export default args;
script.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args';
gulp.task('scripts',()=>{
return gulp.src(['app/js/index.js'])
.pipe(plumber({
errorHandle:function(){
}
}))
.pipe(named())
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
})
.pipe(gulp.dest('server/public/js'))
.pipe(rename({//压缩文件重命名
basename:'cp',
extname:'.min.js'
}))
.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
.pipe(gulp.dest('server/public/js'))
.pipe(gulpif(args.watch,livereload()))
})page.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';
gulp.task('pages',()=>{
return gulp.src('app/**/*.ejs')
.pipe(gulp.dest('server'))
.pipe(gulpif(args.watch,livereload()))//热更新
})
css.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';
gulp.task('css',()=>{
return gulp.src('app/**/*.css')
.pipe(gulp.dest('server/public'))
})
server.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';
gulp.task('pages',()=>{
return gulp.src('app/**/*.ejs')
.pipe(gulp.dest('server'))
.pipe(gulpif(args.watch,livereload()))
})
browser.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import args from './util/args';
gulp.task('browser',(cb)=>{
if(!args.watch) return cb();
gulp.watch('app/**/*.js',['scripts']);
gulp.watch('app/**/*.ejs',['pages']);
gulp.watch('app/**/*.css',['css']);
});
clean.js
import gulp from 'gulp';
import del from 'del';
import args from './util/args';
gulp.task('clean',()=>{
return del(['server/public','server/views'])
})
build.js
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';
gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));.babelrc
{
"presets":["es2015"]
}
gulpfile.babel.js
import requireDir from 'require-dir';
requireDir('./tasks');
安装依赖包（注意版本问题，版本安装错误的话可能会导致错误特别是webpack，现在是4.x与3.x的配置不同了）
npm install --save-dev gulp gulp-if gulp-concat webpack@3.8.1 webpack-stream@3.2.0 vinyl-named
npm install --save-dev gulp-livereload gulp-plumber gulp-rename gulp-uglify
npm install --save-dev gulp-util yargs gulp-live-server
npm install --save-dev babel-loder@6.4.1 babel-core babel-preset-env babel-preset-es2015
npm install --save-dev require-dir gulp-sequence delpackage.json
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-if": "^2.0.2",
"gulp-livereload": "^4.0.0",
"gulp-plumber": "^1.2.0",
"gulp-rename": "^1.4.0",
"gulp-uglify": "^3.0.1",
"gulp-util": "^3.0.8",
"vinyl-named": "^1.1.0",
"webpack": "^3.8.1",
"yargs": "^12.0.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"del": "^3.0.0",
"gulp-live-server": "0.0.31",
"gulp-sequence": "^1.0.0",
"require-dir": "^1.0.0",
"webpack-stream": "^3.2.0"
}
}
热更新配置
修改server/app.js
在app.use(express.static(path.join(__dirname, ‘public’)));后添加一句
app.use(express.static(path.join(__dirname, 'public')));
app.use(require('connect-livereload')());
app.use('/', indexRouter);
然后安装这个包 npm install connect-livereload –save-dev
测试：
在git的命令行里输入 gulp –watch（若出现gulp不是内部命令的错误，全局安装gulp npm install -g gulp）
在运行这个命令是可能出现如下错误（没有安装包或安装失败，则重新安装对应的包）
npm install –save-dev del
运行 gulp –watch如下则构建成功：
在浏览器测试：输入localhost:3000 一篇空白则成功。
在app/views/index.ejs输入
<html>
<head>
<meta charset="utf-8">
head>
<body>
<div>hellodiv>
<script src="/js/index.js" charset="utf-8">script>
body>
html>
app/js/index.js
document.write('world');返回到浏览器可以看到（因为配置了regengxin）：
