util/args.js
//引入一个包，处理命令行参数的；（之前的操作都是手动敲命令，真正程序里，怎么去识别在命令行这个工具里输入的那些东西，需要程序识别，需要引入一个包，帮我们做处理）
import yargs from 'yargs';
//定义一些基本的参数：区分开发环境和线上环境；
//option敲命令行的时候有个选项部分；比如 gulp -production; -production就是选项部分；
const args = yargs
//提取参数的；区分命令行输入的是不是有这个参数，进而区分是线上还是开发环境
.option('production',{
boolean:true,
default:false //如果命令行中没有输入这个选项--参数；false就是开发环境;
describe:'min all scripts'
})
//还有一个参数，控制要不要监听开发环境中修改的这些文件，比如说：改了一个js要
不要自动编译，改了个css要不要自动编译，需要命令行控制（敲命令的时候可以控制），
用watch参数来控制；
.option('watch',{
boolean:true,
default:false,
describe:'watch all files'
})
//要不要详细的输出命令行执行的一个日志；
.option('verbose',{
boolean:true,
default:false,
describe:'log'
})
//关于zon映射的东西，js通常压缩有一个sourcemaps就是来处理这个参数的；
.option('sourcemaps',{
//强制生成sourcemaps;
describe:'force the creation of sourcemaps'
})
//启动服务，设置服务器端口
.option('port',{
string:true,
default:8080,
describe:'server port'
})
//对输入的命令行内容以字符串解析
.argv
tasks/scripts.js
//先引完这些包，在安装，现在不用执行命令，不着急安装，现在先知道我们要用哪些包，然后我们在去安装；正常使用，要安装这些包；安装这些包要使用npm install命令，我们之前创建了package.json这个文件，我们可以直接使用npm install这个命令后面紧跟着要安装包的名称，npm install gulp gulpif gulp-concat webpack webpack-stream
vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp- util yargs --save-dev (--save-dev表示要把这个文件除了安装以外还要在package.json这个文件中创建一个安装包依赖的一些字段)
//如果在安装包的过程中，发现哪些包不能正常安装或者安装比较慢，可以使用npm镜像淘宝解决网速慢或者安装慢，某些包安装失败的问题；
//引入几个包，第一个是gulp,整个构建都是基于gulp；
import gulp from 'gulp';
//gulp的语句中做if判断的;
import gulpif from 'gulp-if';
//gulp中处理文件拼接的；
import concat form 'gulp-concat';
//整个打包过程是用webpack做的,引入webpack工具包；
import webpack from 'webpack';
/*引入webpack-stream,gulp处理的都是一些文件流，是基于stream，
对webpack的处理结合webpack-stream来做处理的；*/
import gulpWebpack from 'webpack-stream';
//对文件重命名做标志的包；
import named from 'vinyl-named' ;
//实现一个文件修改后，浏览器自动刷新的功能，热更新；
import livereload from 'gulp-livereload';
//处理文件信息流的--管道拼接；
import plumber form 'gulp-plumber';
//对文件重命名;
import rename from 'gulp-rename';
//处理js、css压缩的；
import uglify from 'gulp-uglify';
//在命令行工具输出的一些包,log和一些色彩的输出；
import {log,colors} from 'gulp-util';
//引入对命令行参数进行解析的一个包；
import args from './util/args.js';
//创建gulp的任务；
gulp.task('scripts',()=>{
//打开这个js
return gulp.src(['app/js/index.js']);
//处理常规的错误逻辑；
.pipe(plumber({
errorHandle:function(){
}
}))
//对文件重新命名
.pipe(named())
//对js进行编译
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
})
//编译完文件要放在指定路径；使用gulp.dest之后使用这个路径；
//server中要拿到最新的js（编译好的js），才能在整个服务中跑起来；
.pipe(gulp.dest('server/public/js'))
/*处理编译压缩的过程；让开发者识别压缩包的文件，可以用重命名的方式，
在重新备份刚编译好的文件，用rename这个方式做；
通过这个.min.js写法把刚才生成的文件重新复制了一份，复制的这份在基础上
压缩。
*/
.pipe(rename({
basename:'cp',
extname:'.min.js'
}))
//压缩;压缩过程要配置怎么压缩；
.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
/*存储到某个地方的命令；这个目录下有两个文件，编译好的没压缩的，编译好的
压缩了，压缩之后那个文件叫cp.min.js*/
.pipe(gulp.dest('server/public/js'))
/*监听一个文件，变化了自动刷新这个功能；用gulpif做一下判断，判断命令行
有watch这个参数，就执行livereload；如果没有就不会对文件进行监听；也就不会自动刷新了*/
.pipe(gulpif(args.watch,livereload()))
})
网友评论