ES6项目构建方法

任务自动化(gulp)

gulp:自动化构建工具;任务自动化,就是说,尽量不使用人工,使用工具自动操作一些任务;
gulp的作用:完成任务自动化的工作流;

编译工具(babel、webpack)

  • babel:专门编译es6
  • webpack:处理模块之间的依赖的。
  • webpackwepack-stream的作用:有了webpack-stream,就可以使webpack支持gulp

ES6项目构建

基础架构图

ES6项目创建目录

  • 整体项目目录


    整体项目目录

目录说明

1. app文件

app文件和其中的目录都是手动创建。

2. ejs文件说明

ejs后缀文件:因为es6是使用node环境,这里会使用到ejs的模版引擎,所以这里就使用了ejs后缀的文件,可以当做是.html

3. server文件创建与初始化文件

  • 手动创建server,在server文件夹中初始化文件。
  • 初始化步骤
    a.打开命令框,输入express -e .;启动express脚手架,自动安装如上图sever文件中的目录;
    b.再安装npm install,完成初始化;
关于express的安装:

如果express是3版本以下的,可以直接使用;4版本以上,直接使用上面命令,会提示"express不是内部命令"

解决办法:
1.先安装全局的express --------->  npm install -g express; 
2.安装后,再安装express -generator --------> npm install -g express -generator

完成以上步骤就可以使用express相关命令了。


输入express -e . 安装后的显示

4. tasks文件创建与初始化文件

  • 初始化步骤
1.进入tasks文件,手动创建util文件,放常见脚本,并初始化一个文件 ---> args.js
//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;
2.在tasks目录下,手动创建一个scripts.js文件
//scripts.js配置代码
//js任务编译脚本
import gulp from 'gulp';//引入gulp
import gulpif from 'gulp-if';//在gulp中做if判断
import concat from 'gulp-concat';//在gulp中做拼接
import webpack from 'webpack';//打包
import gulpWebpack from 'webpack-stream';//支持gulp webpack包,没有这个包webpack不能直接使用gulp
import named from 'vinyl-named';//文件重命名
import livereload from 'gulp-livereload';//热更新包
import plumber from 'gulp-plumber';//处理文件信息流
import rename from 'gulp-rename';//gulp文件重命名
import uglify from 'gulp-uglify';//压缩js包
import {log, colors} from 'gulp-util';//命令行工具输出包
import args from './util/args';//命令行处理文件,这里的文件需要自己创建配置

gulp.task('scripts', ()=> { //创建一个任何
    return gulp.src(['app/js/index.js'])//打开这个index文件
        //打开文件后要做以下这些事情
        .pipe(plumber({//改变
            errorHandle: function () {  //错误处理是由webpack做的
            }
        }))
        .pipe(named())//文件重命名
        .pipe(gulpWebpack({//配置webpack功能
            module: {
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel-loader'
                }]
            }
        }), null, (err, stats)=> {//对错误的处理
        log(`Finished '${colors.cyan('scripts')}'`,
            stats.toString({chunks: false}))
        })
    .pipe(gulp.dest('server/public/js'))//使用gulp.dest使用这个指定的路径
    //为什么要放到server中,因为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()))
})

上面script.js中引入的包需要进行安装,安装方式如下图:
打开命令输入:npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --sav


安装后的样子

5. npm创建package.json文件

如下图命令行中进入到根目录下,输入npm install,一路回车即可创建package.json文件。


package.json文件创建方式图

6. 创建.babelrc后缀文件

根目录下,创建一个设置babel编译工作的配置文件。(.babelrc),这个文件名不可随意改变,固定的名字;

7. 创建一个gulp配置文件

根目录下,创建一个gulp配置文件, ---> gulpfile.babel.js,这个文件名也是固定的,不可改变;如果文件名只写成gulp,页面会报错,不会执行gulp;

// gulpfile.babel.js配置代码
import requireDir from 'require-dir';
//将tasks目录下的文件都加载进来运行
requireDir('./tasks');

完成以上创建,项目的目录结构和初始化文件就全部完成了,下面开始创建其它必要文件。

8. 创建模板、服务任务脚本

tasks下创建server.js文件,配置如下:

//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();//判断如果不是处理于监听状态下,直接返回回调函数
    //如果是的话,就创建一个服务器,使用liveserver.new()方法
    //--harmony: 参数表示,要在当前命令下执行这个脚本
    //server/bin/www: 是一个服务器脚本,实际上启动的就是,这个路径下的www.js的脚本(理解就可以了)
    var server = liveserver.new(['--harmony','server/bin/www']);
    server.start();//启动服务器
    //使用服务器脚本的目的是,让服务器下面的所有文件(js,ejs等),发生改变时,要让浏览器自动刷新
    //那么就使用以下方法
    /*
    * 使用gulp的watch是用来文件的监听,下面监听了两个路径下对应的文件
    */
    gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
        server.notify.apply(server,[file]);//通知服务器做相应的动作
    })
    //监听需要重起服务器的文件
    gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
        server.start.bind(server)() //重起服务器
    });
})
9. 文件自动监听,项目构建测试
  • tasks目录下创建一个browser.js文件;

browser.js作用说明:项目文件中的app目录下都是所需的前端代码源文件,但是在server.js下配置的热更新是执行的server--->public下的文件,并且scripts.js是向public中写脚本。当源文件发生改变时,如何自动编译,并自动生成到server-->public或者views文件中;这时就需要创建一个browser.js,用于处理监听浏览器;

//browser.js配置代码
//监听浏览器的脚本
import gulp from 'gulp'
import gulpif from 'gulp-if'
import gutil from 'gulp-util'//gulp常用工具,gulp的集合
import args from './util/args'

gulp.task('browser',(cb)=>{
    if(!args.watch) return cb() //如果没有用watch做监听的,直接返回回调
    /*
    * gulp.watch():用于监听
    * 第一个参数,要监听的目录
    * 第二个参数,监听后要执行什么任务
    */
    //监听原始目录下的脚本,如果发生改变,会自动调用 scripts文件
    gulp.watch('app/**/*.js',['scripts'])
    //以下这两个都同理
    gulp.watch('app/**/*.ejs',['pages'])
    gulp.watch('app/**/*.css',['css'])
})
  • tasks目录下创建clean.js文件

clean.js作用说明:由于app目录下放的是es6源文件,当执行时,会编译成es5,并放到server目录下。这时会有一个拷贝、复制到server目录下对应文件中;当文件发生更新都会进行拷贝、复制,这就会出现覆盖之前的文件,那么,就需要更新后先清空server目录,再复制;

//clean.js配置代码
import gulp from 'gulp';
import del from 'del';//删除的包
import args from './util/args';

gulp.task('clean',()=>{//创建一个clean任务
    //清除server/public和server/views下面的文件
    return del(['server/public','server/views'])
});
  • tasks目录下创建build.js文件

build.js作用说明:gulp在执行时,有一个默认的动作,就是需要一个default.js。但是在这之前,需要把每一个任务串起来,哪个任务先或后,谁依赖谁,这就需要一个build.js文件;

//build.js配置代码
//关联所有gulp创建的任务
import gulp from 'gulp'
import gulpSequence from 'gulp-sequence' //处理包的顺序
/*
* gulpSequence():处理包的顺序的方法
*('clean','css','pages','scripts',['browser','serve'])):按顺序写要执行的任务
* serve任务一定是在最后面执行的;
*/
gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
  • tasks目录下创建default.js文件

default.js作用说明:gulp在执行时,有一个默认的动作,就是需要一个default.js,默认是打开这个文件的,所以需要一个defult.js文件;

//defult.js配置代码
//gulp的默认执行任务
import gulp from 'gulp';
//注册一个default任务
//没有这个任务,直接执行gulp会报错,所以一定要有default这个任务
gulp.task('default',['build']);
  • tasks目录下其它文件

css.js配置如下:

//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')//打开要处理的所有css文件
        .pipe(gulp.dest('server/public'))//再扔到public文件中

        //监听是不是热更新----正常是需要写一个这样的,
        // 但是css直接放过来就好,不需要编译,所以不需要写这句
        // .pipe(gulpif(args.watch,livereload()))
});

pages.js配置如下:

//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'))//将所有ejs文件放到server中
        .pipe(gulpif(args.watch,livereload()))//监听是不是热更新
});

以上所有配置都完成后,就可以在命令行中启动gulp了,这时会有如下图的报错

推荐阅读更多精彩内容