任务自动化(gulp)

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

编译工具(babel、webpack)

• babel：专门编译es6；
• webpack：处理模块之间的依赖的。
• webpack与wepack-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了，这时会有如下图的报错