ES6学习笔记二－－构建工具脚本

落日映苍穹つ 2021-10-09 03:56 359阅读 0赞

**安装依赖包：~/es6 $ npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev**

**安装babel: ~/es6 $ npm install babel-loader babel-core babel-preset-env webpack --save-dev**

**安装：~/es6 $npm install gulp-live-server gulp-util del --save-dev**

**全局安装gulp: ~/es6　$npm install gulp -g**

**安装　~/es6$npm install connect-livereload --save-dev 　　　　  热更新的依赖**

**安装　~/es6$ npm install gulp-sequence --save-dev       　　　这是build.js里面用的处理关联顺序的依赖**

**安装　~/es6$ npm install require-dir --save-dev         这是gulpfile.babel.js为了引入目录下的文件的依赖包**

运行 $gulp --watch 自动编译 实现热更新 在server/app.js 大概23行 在app.use(express.static(path.join(__dirname, 'public')));后添加 app.use(require('connect-livereload')()); ctrl+c停止服务

**执行监听的命令：$gulp --watch 　，打开浏览器：localhost:8080查看页面**

**(不加--watch执行完一次就结束了，加上后是一直监听)**

**----------------------------------------------------------------\--------------------------------------**

, gulp.task `task(name[, deps], fn)`

task()方法用于定义任务，传入名字、依赖任务数组、函数即可，gulp会先执行任务数组，结束后调用定义的函数，可以通过此手段控制任务的执行顺利。**gulp.task创建任务方法**：gulp.task('任务名',  ( )=>\{   \})    或者带回调函数的：gulp.task('任务名',  (cb)=>\{   \})

gulp.src `src(globs[, options])`

src()方法输入一个glob或者glob数组，然后返回一个可以传递给插件的数据流

#### gulp.dest `dest(path[, options])` ####

dest()方法用来写文件，第一个参数表示最终输出的目录名。注意，它无法允许我们指明最终输出的文件名，只能指定输出文件夹名，而且在文件夹不存在的情况下会自动创建。

#### gulp.watch `watch(globs[, opts], cb) or watch(globs[, opts], tasks)` ####

#### watch()方法可以监听文件，它接受一个glob或者glob数组以及一个任务数组来执行回调． ####

\---------------------------------------------------------------- \-----------------------------

构建工具脚本在es6/tasks/　目录下．

es6/tasks/util/args.js  命令行参数创建：命令行参数初始化

看命令行里面有没有包含option里面的对应的几个命令．可以区分线上环境和开发环境．

import yargs from 'yargs';
    
    const args = yargs;
    .option('production',{
    	boolean:true,　　　
    	default:false,　　//命令中没有production时，默认为开发环境，有的话为线上环境
    　	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  //表示以字符串进行解析
    export default args;

**es6/tasks/server.js 编写服务器构建脚本：**

import gulp from 'gulp';
    import gulp from 'gulp-if';
    import liveserver from 'gulp-live-server';
    import args from './util/args';
    
    gulp.task('serve',(cb)=>{
    	//如果不是处于监听状态下，返回回调函数
    	if(!args.watch) return cb();
    	//如果在监听状态下，要创建服务器　--harmony表示当前命令行下执行后面的这个脚本server/bin/www
    	var server = liveserver.new(['--harmony','server/bin/www']);
    	//启动服务器
    	server.start();
    	//监听server目录下的js，ejs改变时的热更新
    	gulp.watch(['server/public/**/*.js','server/views/**/*.js'],function(file){
    		//通知服务器文件改变
    		server.notify.apply(server,[file]);
    	})
    	//监听需要重启服务的文件．eg路由改变,接口变化
    	gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    		//重启服务
    		server.start.bind(server())
    	});
    
    })

**es6/tasks/css.js 编写css构建脚本**

import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import livereload from 'gulp-livereload';
    import args from './util/args';
    
    gulp.task('css',()=>{
    　　// 先打开文件，再复制到server/public下．　/**/双星号表示全部的*.css文件，包括嵌套的文件
    　　return gulp.src('app/**/*.css')
    　　　　.pipe(gulp.dest('server/public'))//此实例主要是监听js和.ejs变化，所以没加热更新，但一般都要监听css
    })

**es6/tasks/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'))
    		.pipe(gulpif(args.watch,livereload()))　　//监听热更新
    })

**es6/tasks/scripts.js 脚本服务**

import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import concat from 'gulp-concat';　　//拼接
    import webpack from 'webpack';　　　//打包
    import gulpWebpack from 'webpack-stream';　　//gulp文件流打包
    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';　　//资源压缩，处理js,css压缩
    import {log,color} from 'gulp-util';  //用命令行输出log和色彩
    import args from './util/args';　　　//导入命令行参数文件
    
    gulp.task('scripts',()=>{
    	return gulp.src(['app/js/index.js'])//先打开文件
    
      
       　　　.pipe(plumber({ //错误处理 		errorHandle:function(){
    		}
    	}))
    	.pipe(named())//文件重命名
    	.pipe(gulpWebpack({ //对文件进行编译，３个参数
    		module:{
    			loaders:[{ //对js文件用babel编译
    				test:/\.js$/,
    				loader:'babel-loader'
    			}]
    		}
    	}),null,(err,stats)=>{//第三个参数进行错误处理，第二个参数为null
    		log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
    			chunks:false
    		}))
    	})
    	.pipe(gulp.dest('server/public.js'))　//编译后的文件放置的路径
    	.pipe(rename({
       //重命名　cp.min.js
    		basename:'cp',
    		extname:'.min.js'
    	}))
    	.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}})) //压缩
    	.pipe(gulp.dest('server/public/js'))　//压缩后文件存到server/public.js下面
    	.pipe(gulpif(args.watch,livereload()))//监听热更新
    })

tasks/browser.js   监听js/ejs/css,若发生变化就调用相应的脚本文件

import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import gutil from 'gulp-util';
    import args from './util/args';
    
    //browser和scripts，pages，css的关联
    gulp.task('browser',(cb)=>{
    	//如果没有用监听
    	if(!args.watch) return cb();
    	//监听app里js变化时调用scripts构建脚本，完成后es6转成es5或3,写到server目录下的文件里
    	gulp.watch('app/**/*.js',['scripts']);
    	//监听app的模板文件变化
    	gulp.watch('app/**/*.ejs',['pages']);
    	//监听css
    	gulp.watch('app/**/*.css',['css']);
    
    });

tasks/clean.js 　　清空指定文件目录，因为每次编译要覆盖原来编译的文件，要先clean.

import gulp from 'gulp';
    import del from 'del';
    import args from './util/args';
    
    gulp.task('clean',()=>{
    	//清空js，css,和模板
    	return del(['server/public','server/views'])
    })

tasks/build.js :处理关联顺序

tasks/default.js  :输入$ gulp　命令，不带任务名字时，会取执行默认任务即名为default的任务，这个任务取调用build.js文件．

import gulp from 'gulp';
    // 如果gulp执行default任务,就去找build.js
    gulp.task('default',['build']);

编写gulpfile.babel.js文件：把tasks下面的所有的包都引进来

import requireDir from 'require-dir';
    // 引入tasks目录下的所有文件
    requireDir('./tasks');

（需要npm 装require-dir）

编写  .babelrc文件:  这是babel的配置文件，配置preset，为了编译ES6语法．

{
    "presets":["es2015"]
    }

在app/view/index.ejs里面写内容：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>es6</title>
    </head>
    <body>
    	I am here!
    </body>
    </html>

执行监听的命令：$gulp --watch 　，打开浏览器：localhost:8080查看页面

![SouthEast][]![SouthEast 1][]  
提示错误:Fail to load external module,忽略运行程序也是可以出现页面的．

报错之后：(1)  tasks/scripts.js中 loader:'babel'改成loader:'babel-loader'  //新版的webpack不允许缩写，所以需要写完整
            (2)  server/app.js中在最下面加上 module.exports = app;
            (3)  server/bin/www中var port = normalizePort(process.env.PORT || '3000');改成var port = normalizePort(process.env.PORT || '8080');   //3000是默认端口，容易被占用，所以改成8080或其他
            (4)  安装require-dir
            (5)  tasks/util/args.js最后加上export default args;

（６）es6/tasks/scripts.js 脚本服务里面的　webpack配置的babel-loader必须要加loader后缀了，不能直接写babel,会报错．

参考这个博客解决方法：https://www.cnblogs.com/jingouli/p/7605183.html　 [ES6环境搭建][ES6]

[SouthEast]: https://img-blog.csdn.net/20180120210205099?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Vuaml1c3VpODA4Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20211009/9042dd88d56e48ce80d0cd07ebefe79f.png
[ES6]: https://www.cnblogs.com/jingouli/p/7605183.html