（33）Gulp构建脚本文件
一、构建脚本文件流程图
构建脚本文件和我们构建样式文件是一样的，也是将源代码进行编译，编译以后压缩，然后重命名，最终成为目标文件。
这里脚本文件压缩是将ES6语法转换成ES5语法，比如说箭头函数，它在IE浏览器下是不支持的，需要转换成ES5的语法，IE浏览器才能够支持。
二、Gulp构建脚本文件所需要的插件
三、Gulp构建脚本文件示例
1.再我们之前写的Demo中，我们继续再src目录下，新建一个scripts文件，再scripts文件下，新建一个main.js文件，并写入一个ES6的箭头函数。
2.安装编译包（npm gulp-babel -D）
打开http://gulpjs.com 官网
检查babel安装的版本命令：（babel --version）
我们这里之前安装的babel版本是6的版本，那么我们就使用官网中的6的版本的安装命令，直接复制，粘贴到我们的终端命令行运行即可。
注意：如果之前安装的babel没有了，或者没有安装过babel包，那么先通过如下命令安装下babel，再去安装gulp-babel包哦！
安装 Babel（ npm i babel-core babel-cli -g ）2个包同时安装使用空格分隔。
# Babel 7 $ npm install --save-dev gulp-babel @babel/core @babel/preset-env# Babel 6 $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
3.在gulpfile.js文件中，引入我们安装的gulp-babel模块
然后创建一个任务函数，叫script，在这个任务函数中写好我们的管道调用babel（）方法，那么这个方法怎么使用呢？我们去打开官网，看看怎么使用？http://gulpjs.com
通过命令：gulp 任务名script 执行后后，发现报错，这是什么原因呢？
分析原因：这是我们官网给我们挖的一个坑，它说错误在Error in plugin "gulp-babel"。
解决方法：将package.json文件中开发环境下的依赖中的babel-preset-env拿过来，放到babel调用方法的presets字段中就可以解决该问题。
—————————接下来是压缩JS代码操作————————
1.安装压缩JS代码插件（npm i gulp-uglify -D）
2.引入安装好的gulify压缩JS代码插件，然后通过管道pipe（）方法调用gulify（）方法压缩
3.执行任务（gulp 任务名）
4.将压缩后的文件重命名
注意：使用的包和我们之前给css文件重命名的包是一样的，也就是说我们如果安装了，就无需再安装了。如果没有安装，那使用（npm i gulp-rename -D）命令再进行安装一下即可。
如何查看我们是否安装了该包呢？在我们的package.json文件中可以找到该包说明已安装，如果没有找到说明没有安装，再进行安装命令即可。如下图演示：
5.如果之前导入了重命名的模块，无需再次导入，直接使用即可，然后我们通过执行任务(gulp 任务名)命令，如下图中多了.min.js的文件，说明我们成功啦！
（33）Gulp构建脚本文件相关推荐
- （31）Gulp 构建样式文件
一.Gulp构建样式文件流程图 Gulp构建样式文件和我们之前想要实现的效果和流程差不多,我们通过源代码,这里拿less文件举例,第一步那么我们通过less文件先将文件进行转换,转换成浏览器认识的cs ...
- （25）npm scripts 实践—构建脚本文件
一.先来看2张对比图 通过如下2个图片,我们看到,我们应该构建好以后再进行浏览器中运行.没有构建前是ES6的箭头函数写法,我们要转换成ES5的写法然后再运行.为什么要构建?因为ES6再某些浏览器是不支 ...
- （34）Gulp 构建HTML页面文件
一.Gulp 构建HTML页面文件概述 我们的HTML文件将来再做大型项目时,文件HTML结构代码也是很多的,上传到服务器上线时也是有缓慢压力和内存占用较大的情况的,所以我们为了解决该问题,还需要对H ...
- （36）Gulp 构建资源（图片）文件
一.Gulp 构建资源(图片)文件概述 所谓Gulp 构建资源(图片)文件就是将图片占用大小压缩后变小.其实我们Gulp构建资源文件不只是单独只图片,还有其他的比如说字体文件,也是资源文件.这里我们拿 ...
- （35）Gulp 构建任务组合
一.Gulp构建任务组合 就是前面我们学习的Gulp构建样式文件,构建脚本文件,构建HTML页面文件,每构建一种文件都需要敲写一条命令,那么这样的话,我们就需要写3个命令执行,是不是还是觉得有些麻烦? ...
- 【Android 安装包优化】使用 lib7zr.a 静态库处理压缩文件 ( 交叉编译 lib7zr.a 静态库 | 安卓工程导入静态库 | 配置 CMakeLists.txt 构建脚本 )
文章目录 一.修改 7zr 交叉编译脚本 Android.mk 二.完整的 7zr 交叉编译脚本 Android.mk 三.交叉编译 lib7zr.a 静态库 四.Android Studio 导入 ...
- 【Android 安装包优化】使用 lib7zr.so 动态库处理压缩文件 ( 拷贝 lib7zr.so 动态库头文件到 Android 工程中 | 配置 CMakeLists.txt 构建脚本 )
文章目录 一.拷贝 p7zip 源码中的头文件到 Android Studio 项目中 二.配置 CMakeLists.txt 构建脚本 1.导入动态库 2.导入头文件 三.完整 CMakeLists ...
- 【Android 安装包优化】使用 lib7zr.so 动态库处理压缩文件 ( 拷贝 lib7zr.so 动态库到 Android Studio 工程 | 配置 build.gradle 构建脚本 )
文章目录 一.拷贝 lib7zr.so 动态库到 Android Studio 工程 二.配置 Module 下的 build.gradle 构建脚本 三.参考资料 一.拷贝 lib7zr.so 动态 ...
- 【Android 内存优化】libjpeg-turbo 函数库交叉编译与使用 ( 交叉编译脚本编写 | 函数库头文件拷贝 | 构建脚本配置 | Android Studio 测试函数库 )
文章目录 一.交叉编译 Shell 脚本参考 二.NDK r16b 版本配置 三.libjpeg-turbo 交叉编译 Shell 脚本 四.执行 libjpeg-turbo 交叉编译 Shell 脚 ...
最新文章
- 最新！3D目标检测论文汇总（多模态融合）
- 什么是python-三分钟了解什么是Python？python环境搭建
- 【CodeForces - 518D】Ilya and Escalator（概率dp，数学期望）
- 客制化键盘编程_客制化键盘如何入坑？
- Java 向量元素的索引值
- 《淘宝网》质量属性简析
- 深入理解l内核v4l2框架之video for linux 2（转载）
- 蓝桥杯2020年第十一届C/C++国赛B组第一题-美丽的2
- 栈应用—括号匹配问题
- 转：MediaCoder H.264格式编码参数设置及详解
- 中国大学慕课python答案 北京理工大学_中国大学MOOC慕课_Python语言程序设计_慕课答案...
- 再见，百度网盘！新 60MB/s！
- 2019丘成桐中学科学奖计算机,2019年丘成桐中学科学奖总决赛获奖名单
- 《Modelica教程》by Fritzson 导言部分
- 算法题 - 卡牌游戏问题 - Python
- 一度智信|拼多多客服售后须知
- HDU6578 2019HDU多校训练赛第一场 1001 （dp）
- 999瓶水一瓶毒药，10只小鼠，使用python暴力编程
- 深度学习数学基础之线性代数
- android 手机资源获取失败,三、解决android手机IMEI获取失败终极方案，自定义IMIE，主板+系统定制商+cup指令集+设备参数+显示屏参数+修订版列表等参数生成IMIEI...
热门文章
- Zookeeper学习笔记之 Zab协议（Zookeeper Atomic Broadcast）
- Redis能干啥？细看11种Web应用场景
- c++ 单引号和双引号
- ActiveRecord 模式杂谈
- UVa-10382 Watering Grass **
- Linux里面nginx显示Hello,Nginx得知——Hello World模
- java 小球抛物线_关于【愤怒的小鸟】其中的算法（自由落体，抛物线，碰撞，反弹）...
- 计算机使用维护教程,《计算机使用与维护教程》教学大纲.doc
- html语言标示,HTML语言剖析(二) HTML标记一览
- jpa调用mysql函数_Spring data jpa 调用存储过程处理返回参数及结果集(示例代码)