gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多
首先安装gulp:参考上一篇
安装完之后
新建一个文件目录起名
在当前目录下打开cmd
执行:npm init
创建package.json文件
然后安装第一个插件gulp-uglify
执行:
cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm)
这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel
执行:
cnpm install gulp-babel --save-dev
编译ES6还需要@babel/core @babel/preset-env
执行:
cnpm install @babel/core --save-dev
cnpm install @babel/preset-env --save-dev
这时候我们需要的插件都安装好了,下面就差个入口的配置文件了
在当前目录下新建gulpfile.js的文件,文件内容如下↓
//1.这个gulp对象就可以配合插件来进行构建工作.
const gulp = require('gulp'); //2.引入gulp-uglify模块.返回的是1个函数.
const uglify = require('gulp-uglify'); //3.引入babel
const babel = require('gulp-babel'); gulp.task('babeljs', async function() {
gulp.src("src/**/*.js")
.pipe(babel({
presets: ['@babel/env']
}))//es6转es5
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
这时候我们就可以开始打包压缩并编译es6语法的js了
执行:gulp babejs
ok!编译完成,对比一下编译前后的代码,例子↓
前:
后:
我们可以看到代码已经压缩,同时也混淆编译成es5了
good
-------------------------------------下面进行依赖打包成cdn----------------------------------
我们可以看到上面有依赖代码并没有转化成我们平时看到的那种单一的js,还是有模块化
这时候我们需要一个插件webpack-stream
执行:
cnpm install webpack-stream --save-dev
装好以后在gulpfile.js文件里
这时候我们都不需要babel和uglify插件了,webpack会自动帮我们编译然后压缩,想想还是webpack简单粗暴
然后执行: gulp onejs
ok!!看看打包后的代码,是不是感觉像jquery的源码的那种感觉
gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn的更多相关文章
- 使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题
问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...
- node.js 递归复制文件夹(附带文件过滤功能)
1.简介: 很简单,写了一个node操作文件的小脚本,主要实现对目标文件夹中内容的复制.还顺带一个按照文件夹或者文件名过滤的功能. 2.应用场景 适合基于 node 环境的项目,项目打包的时候,配合 ...
- js 上传文件夹
最近公司做工程项目,实现文件夹上传. 网上找了一天,发现网上很多代码都存在相似问题,最后终于找到了一个符合要求的项目. 工程如下: 这里对项目的文件传输功能做出分析,怎么实现文件夹上传的,如何进行文件 ...
- Node.js之删除文件夹(含递归删除)
应用场景:比如像Eclipse这样的IDE,右击项目,出现选项,点击选项中的删除,就可以删除这个项目及其下的子目录包含文件(使用electron开发的桌面端项目多少都会用到). 核心代码如下: /** ...
- js上传文件夹
用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助.此控件PC全平台支持包括mac,li ...
- 从零開始学习制作H5应用——V5.0:懊悔机制,整理文件夹,压缩,模板化
经过前面四个版本号的迭代.我们已经制作了一个从视觉和听觉上都非常舒服的H5微场景应用,没有看过的请戳以下: V1.0--简单页面滑动切换 V2.0--多页切换.透明过渡及交互指示 V3.0--增加lo ...
- gulp 实现 js、css,img 合并和压缩
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
随机推荐
- win下python脚本以unix风格换行保存将会报错为编码问题 SyntaxError: encoding problem:gbk
utf-8与gbk编码都报错 从别人的github拉下来一个python脚本. 直接运行,python报错如下: File ".\drag_files_do_event.py", ...
- Html介绍,了解html代码的注释
什么是代码注释?在代码编辑器中的注释代码是不会在浏览器窗口展示的!html代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你之前编写的代码,很快可以想起这个代码的用途.代码注释不仅方便程序员 ...
- API网关服务:Spring Cloud Zuul
最近在学习Spring Cloud的知识,现将API网关服务:Spring Cloud Zuul 的相关知识笔记整理如下.[采用 oneNote格式排版]
- NODEJS 搭建本地文件服务器
npm install anywhere --g 然后再任意目录位置运行 anywhere 80 就可以开启服务器.
- AOV拓扑排序实验总结-1
AOV拓扑排序实验总结-1 实验数据:1.实验输入数据在input.txt文件中2.对于n是指有顶点n个,数据的结束标志是一行0 0. 实验目的:获取优秀的AOV排序算法模板 数据结构安排 ...
- Java代码操作Elasticsearch
创建maven项目,导入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</a ...
- js里cookie,localStorage的简单用法
cookie的使用场景---->注册功能(注册成功后,将账号和密码存入cookie里,在登录时显示到输入框里) 注册的js(将数据存入cookie): escape和unescap ...
- SQL server安装时显示重启计算机失败问题解决办法
前几天在装SQL server2016的时候,一直显示重启计算机失败; 网上的方法也找来用了,但是重启完还是同样的问题,试了很多种方法,最后在一次测试中点关机的时候不小心点成了重启(win10有个毛病 ...
- Hadoop学习之路(6)MapReduce自定义分区实现
MapReduce自带的分区器是HashPartitioner 原理:先对map输出的key求hash值,再模上reduce task个数,根据结果,决定此输出kv对,被匹配的reduce任务取走. ...
- Pycharm控制台乱码问题
PS:如我般的小白都会遇到中文乱码问题,那么怎么解决呢?其实非常简单,鼠标点点就好,请看下面: 如下乱码: 解决方法: 按如下步骤File→Settings→Editor→File Encodings ...