es6零基础学习之构建脚本（二）

编译器打开你的es6项目

首先：创建我们的第一个脚本，tasks/util/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 sourcemaps'
    })

然后：启动服务器

//启动服务器
    .option('port',{
        string:true,
        default:8080,
        describe:'server port'
    })

最后：输入的命令行以字符串进行解析

//输入的命令行以字符串进行解析
    .argv

命令行参数创建完成过后，我们要开始进行构建脚本的创建，是对js的处理

首先要有这样一个脚本，打开你的命令行（在次申明一下，我用的是git）

紧接着就是对编码的编写，打开scripts.js

第一步，引包

import gulp from '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
import named from 'vinyl-named';//对文件重命名标志的文件
import livereload from 'gulp-livereload';//自动刷新
import plumber from 'gulp-plumber';//处理问文件信息流
import rename from 'gulp-rename';//对文件重命名
import uglify from 'gulp-uglify';//处理css和js压缩
import {log,colors} from 'gulp-util';//命令行输出的包
import args from './util/args';//对命令行参数进行解析的包，也就是我们刚刚创建的

第二步，安装

打开你的命令行，输入，等待安装成功

 

第三步：创建gulp的一个任务

gulp.task('scripts',()=>{
    return gulp.src(['app/js/index.js'])
        .pipe(plumber({
            errorHandle:function () {
                
            }
        }))
        .pipe(named())
        .pipe(gulpwebpack({
            module:{
                loaders:[{
                    test:/\.js$/,
                    loaders:'babel'
                }]
            }
        }),null,(error, stats)=>{
            log("Finished '${colors.cyan('scripts')}'",stats.toString({
                chunks:false
            }))
        })
        //路径
        .pipe(gulp.dest('server/public/js'))
        .pipe(rename({
            basename:'cp',
            extname:'.min.js'
        }))
        .pipe(uglify({compress:{properties:false},ourput:{'quote_keys':true}}))
        .pipe(gulp.dest('server/public/js'))
        .pipe(gulpif(args.watch, livereload()))
})

到此，我们整个es6的构建脚本算是基本远程，下一章会继续跟大家分享关于页面模板的简历