处理前台js文件
import gulp from gulp 最基本的包引入
import gulpif from gulp-if 使用gulpif进行判断的包
import concat from gulp-concat 处理文件拼接的包
import webpack from webpack 处理文件打包
import gulpWebpack from webpack-stream 结合基于文件流的webpack打包
import named vinyl-named 文件重命名做标志的包
import livereload from gulp-livereload 用于文件热更新的包，文件修改后自动刷新
import plumber from gulp-plumber 处理文件信息流做管道拼接的包
import rename from gulp-rename 文件重命名的包
import uglify from gulp-gulify 文件压缩的包
import {log,colors} from gulp-uitl 命令行输出的包
import args from ‘./util/yargs.js’ yargs 程序识别命令行操作
gulp.task(‘scripts’,()=>{ //首先创建一个scripts的目录
return gulp.src([‘app/js/index.js’]) //操作的文件是这个文件，打开文件
.pipe(plumber({ //第一节管道上去处理处理常规错误逻辑信息
errorHandle:function(){
}
}))
.pipe(named()) //又放了一截管道： 文件重命名
.pipe(gulpWebpack({ //又放了一截管道： 传过来的文件进行打包编译
module:{//打包编译的时候，遇到js文件，使用babel进行处理
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({ //放在这个地方之后进行备份，然后重命名成min文件
basename:’cp’,
extname:’.min.js’
}))
.pipe(uglify({compress:{properties:false},output:{‘quote_keys’:true}})) //备份好的文件进行压缩
.pipe(gulp.dest(‘server/public/js’)) //压缩好，放在文件夹下面
.pipi(gulpif(args.watch,liverload())) //最后看有没有watch配置项，有的话，就进行热更新
})
处理模版文件
import gulp from ‘gulp’ //引入基础gulp包
import gulpif from ‘gulp-if’ //引入gulp判断包
import livereload from ‘gulp-livereload’ //引入热更新操作包
import args from ‘./util/args’ //引入命令配置包
gulp.task(‘pages’,()=>{ //抽创建一个任务
return gulp.src(‘app/**/*.ejs’) //确定操作那些文件
.pipe(gulp.dest(‘server’)) //先放到对应的server文件夹下面，注意，不带app/
.pipe(gulpif(args.watch,livereload())) //看看是否有watach，有就热更新
})
处理CSS文件
import gulp from ‘gulp’ //引入基础gulp包
import gulpif from ‘gulp-if’ //引入gulp判断包
import livereload from ‘gulp-livereload’ //引入热更新操作包
import args from ‘./util/args’ //引入命令配置包
gulp.task(‘pages’,()=>{ //抽创建一个任务
return gulp.src(‘app/**/*.css’) //确定操作那些文件
.pipe(gulp.dest(‘server/public’)) //先放到对应的server文件夹下面，注意，不带app/
.pipe(gulpif(args.watch,livereload())) //看看是否有watach，有就热更新
})
处理服务器相关脚本
import gulp from ‘gulp’ //引入基础gulp包
import gulpif from ‘gulp-if’ //引入gulp判断包
import liveserver from ‘gulp-live-server’ //引入启动服务器的包
import args from ‘./util/args’ //引入命令配置包
gulp.task(‘server’,(cb)=>{ //启动server服务
if(!args.watch) return cb(); //检测是否处于监听状态，不监听直接返回
var server = liveserver.new([‘–harmony’,’server/bin/www’]);
server.start(); //启动server服务
gulp.watch([‘server/public/**/*.js’,’server/views/**/*.ejs’],function(file){ //检测那些文件
server.notify.apply(server,[file]) //通知给服务器，这些文件发生了变化
})
gulp.watch([‘server/routes/**/*.js’,’server/app.js’],function(file){ //检测服务器上的配置文件
server.start.bind(server){} //检测的文件发生变化之后，服务器重启
})
})
//串起来所有写好的任务进行自动运行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)=>{ //创建browser任务
if(!args.watch) return cb();
gulp.watch(‘app/**/*.js,[‘scripts’]); //检测到app下面js文件修改，就发送个scripts去进行操作
gulp.watch(‘app/**/*.ejs,[‘pages’]);
gulp.watch(‘app/**/*.css,[‘css’]);
})
//清空指定空间的任务
import gulp from ‘gulp’
import del from ‘del’
import args from ‘./util/args’;
gulp.task(‘clean’,()=>{
return del([‘server/public/’,’server/views’]);
});
//处理包的顺序问题 //需要安装包
import gulp from ‘gulp’
import gulpSequence from ‘gulp-sequence’
gulp.task(‘build’,gulpSequence(‘clean’,’css’,’pages’,’scripts’,[‘browser’,’server’]))
//默认gulp执行包
import gulp from ‘gulp’
gulp.task(‘default’,[‘build’])
//在外部gulpfile.babel.js中写引入所有需要的包
import requireDir from ‘require-dir’
requireDir(‘./tasks/’);//引入文件夹下所有文件运行
//.babelrc 文件需要进行编译配置
{
“presets”:[“es2015”] //需要安装babel-preset-es2015 这个包才能把es6向下编译成es5
}
//server/app.js中要在增加接收热更新的设置
app.use(require(‘connect-livereload’)());//这一行是增加的，并且需要引入对应的包connect-livereload
app.use(‘/’,routes);
