搭建一个es6开发环境

其他 2018-12-26 17:06:48 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29729735/article/details/82427074

本文基于《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 del

package.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输入

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<body>
    <div>hello</div>
    <script src="/js/index.js" charset="utf-8"></script>
</body>

</html>

app/js/index.js

document.write('world');

返回到浏览器可以看到（因为配置了regengxin）：
这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_29729735/article/details/82427074
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022