es6零基础学习之创建项目模板，服务器任务脚本（三）

首先我们先要创建一个pages.js

我依然采用的是git

 

创建好了过后我们进行编译代码，大家要记住，我们是从最基础一步步去建立和编写，每一步的完善都是为了搭建项目的完成做准备的，所以都不能忽略和不细心

第一步：打开我们创建的文件

1.引包，创建任务

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')//所有的文件创建都是要打开一个文件**/*代表打开目录下所有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 liveserver from 'gulp-live-server';//启动服务器的一个包
import args from './util/args';//引进命令行参数

gulp.task('server',(cd)=>{
    if (!args.watch) return cd();//如果不是出于监听状态就直接返回回调，
    var server = liveserver.newValue(['--harmony','server/bin/www']);//要是处在监听环境
    server.start();//启动服务器
    //监听所有css和ejs发生改变所发生的热更新,路由的改变
    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)()
    })
})

到达这一步我们所有关于服务器的热更新和服务器的重启就结束了，接下来就是我们写好的任务要能自动的去完成，而要完成这一步，我们还需要在做一步准备

app目录大家都知道，就是我们的一个入口目录，我们要想让这个目录里面的更改渲染子目录就要创建一个关于浏览器的监听

要到创建的时间了

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']);//监听app目录下的所有js改变
    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'])
});

检查一下我们准备的东西是否都齐全

发现这个browser.js没有安装gulp-util，clean.js没有安装del，server.js没有安装gulp-live-server

安装完成后将整个项目进行串连

创建build。js

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';

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

当gulp在执行的时候，如果我们没有接任何的文件，那么他首先执行的就是一个default.js，那么我们再次创建一下

import gulp from 'gulp';

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

 

执行gulp，看会不会成功，如果报错，看报哪些错误再纠正，

如果发现没有安装的包还是要进行安装，这里要做一些小的细节备注

我们的babelrc

{
  "presets":["es2015"]
}

gulpfile.bable.js

import requireDir from 'require-dir';

requireDir('./tasks');