es6

1.项目构建

通过git命令创建项目文件：es6下包含app、server、tasks；app文件包含一个项目中的js、css和view文件；tasks文件夹下包含util文件夹；package.json(npm init创建)

app中的js=》入口文件index.js和class文件夹=》test.js

　　　  views=》错误模板文件error.ejs和其他index.ejs基本处理的入口文件

（初始化文件命令：touch ）

server下创建的文件夹需要提前安装express脚手架，它依赖于node所以要提前去node官网去安装下载安装包

安装命令：express -e .   

注意：遇到了问题报express: command not found，解决方案参考：http://blog.csdn.net/dai_jing/article/details/38087443

执行 npm install 去自动安装服务器代码

构建目录tasts（处理文件的合并、目录的更新等）=》util（放置常见的脚本）=》args.js

npm init创建package.json

touch .babelrc(babel编译的时候要去读取配置)

touch gulpfile.babel.js（使用es6所以加babel）

2.args.js

import yargs from 'yargs';

//创建命令行参数
const args = yargs

    .option('production',{
        boolean:true,
        default:false,
        description:'选择线上环境，不选默认开发环境 -production'
    })

    .option('watch',{
        boolean:true,
        default:false,
        description:'监听文件是否变动，是否需要自动编译'
    })

    .option('verbose',{
        boolean:true,
        default:false,
        description:'log'
    })

    .option('sourcemaps',{
        description:'强制生成sourcemaps'
    })

    .option('port',{
        string:true,
        default:8000,
        description:'设置服务器访问端口'
    })

    .argv   //设置的命令以字符创去解析

View Code

3.构建目录tasks下创建script.js(touch)

在文件中引入需要的包，然后在命令行安装 npm install yargs gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util --save-dev(安装慢、不成功、有问题，可以通过npm镜像解决问题例如淘宝镜像。。)

注意报错（

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail o n node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible . Use 'npm ls graceful-fs' to find it in the tree.

）：已是4.6.1，没处理 解决参考：https://segmentfault.com/q/1010000005749798

 

import gulp from 'gulp';
import gulpif from 'gulp-if';       //处理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({
            errorHandler:function () {

            }
        }))
        .pipe(named())
        //js的编译
        .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()))
})

View Code

3.tasks文件夹下创建处理模板的pages.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()))
})

View Code

4.tasks文件夹下创建处理模板的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'))
        .pipe(gulpif(args.watch,livereload()))
})

View Code

5.tasks文件夹下创建服务器的脚本server.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import liveserver from 'gulp-live-server'; //启动服务器的包
import args from './util/args';

gulp.task('serve',(cb) => {
       if(!args.watch) return cb();

       var server = liveserver.new(['--harmony','server/bin/www']);
       server.start();

       gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function () {
           server.notify.apply(server,[file]);
       })

    //当路由。。发生变化需要重启才能监听服务器
        gulp.watch(['server/routes/**/*.js','server/app.js'],function () {
            server.start.bind(server)();
        })
})

View Code

6.tasks文件夹下创建脚本browser.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';  //gulp函数集合常用工具
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']);
});

//当文件创建后需要重新编译入server的时候要将新的文件覆盖掉原来的，所以要清空指定的文件，所以要创建clean.js

View Code

7.下载新的依赖

npm install del gulp-util gulp-live-server --save-dev

8..tasks文件夹下创建清空文件clean.js

import gulp from 'gulp';
import del from 'del';  //引入删除的包
import args from './util/args';

gulp.task('clean',() => {
    return del(['server/public','server/views'])
})

View Code

9..tasks文件夹下创建定义串起来的任务的先后顺序build.js

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence'; //定义先后顺序的包

gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));

View Code

安装包 npm install gulp-sequence --save-dev

10..tasks文件夹下创建default.js

import gulp from 'gulp';

gulp.task('default',['build']);

View Code

11.执行gulp

注意报错：

dingqi@LAPTOP-SV6SV5RV MINGW64 ~/Desktop/es6
$ gulp
[23:13:45] Failed to load external module babel-register
[23:13:45] Failed to load external module babel-core/register
[23:13:45] Failed to load external module babel/register
[23:13:45] Using gulpfile ~\Desktop\es6\gulpfile.babel.js
[23:13:46] Task 'default' is not in your gulpfile
[23:13:46] Please check the documentation for proper gulpfile formatting

解决方案：

npm install babel-loader babel-core babel-preset-env --save-dev

gulpfile.babel.js编辑：

import requireDir from 'require-dir'; //引入文件的包

requireDir('./tasks'); //引入所以的文件

View Code

安装包 npm install require-dir --save-dev

bablerc编辑：

{
  "presets": ["es2015"]
}

View Code

安装包 npm install babel-preset-es2015 --save-dev

执行gulp可以成功

12.执行gulp --watch  //加watch可以对文件监听，不会只执行一次

13.去浏览器打开localhost：3000

编辑app=》views=》index.ejs

!+tab回车快速创建页面模板

暂时手动刷新

14.在server下的入口app.js文件下加上

app.use(require('connect-livereload')()); //添加自动刷新
位置：

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(require('connet-livereload')());
app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

View Code

终止服务 Ctrl+c

安装包 npm install connect-livereload --save-dev

15.测试

gulp --watch //执行

16.写入函数

进入app=》js=》index.js

编辑：

class Test{
    constructor(){
        this.a = 'hello world';
    }
}

let test = new Test();

document.body.innerHTML = test.a;

View Code

在app=》views=》index.ejs页面引入

<script src="../js/index.js"></script>

17.打开浏览器已经更新

//构建工具部分完成！

 

转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/7236366.html