gulp+babel实现es6压缩,并替换es6语法,压缩html,css
1:创建一个文件夹,这里取名为final,要是没有安装过gulp的就先全局安装Gulp包: npm install -g gulp
2;在目录下新建文件夹src,存放源文件。
3:在final文件夹下cmd,输入npm init,初始化npm
这儿出现的信息随便填写,不写直接enter就是用默认值。
出现is this ok,输入y,回车。
生成如下目录结构:
4:在final目录下新增文件:.babelrc(这里我是取消了严格模式)
执行命令 npm install babel-plugin-transform-remove-strict-mode -D
5: 安装 gulp
命令:npm install gulp --save-dev。
6:安装gulp-babel,babel-core 和babel-preset-es2015
命令:npm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev
注意:gulp-babel版本最好不要超过8.0.0,否则可能出现Plugin/Preset files are not allowed to export objects的问题。
成功之后会在根目录下看到node模块文件夹
7:下载(重命名与压缩插件)npm install gulp-rename gulp-uglify
8:在final文件夹下新建gulpfile.js文件。
内容如下:
这里任务名为minjs, gulp.src('./src/*.js')表示的是源代码路径,.pipe(gulp.dest('./src/'))代表新文件生成的路径。
.pipe(rename(function (file){ 是新生成的文件的文件名规则,官方教程:https://www.npmjs.com/package/gulp-rename
输入gulp minjs执行:
生成结果:
二:压缩html,这里我只是处理了html标签的换行与空格。
1:gulp-htmlmin 这是一款HTML文件压缩插件, 通过命令npm install --save-dev gulp-htmlmin下载,官网:https://www.npmjs.com/package/gulp-htmlmin
2:创建gulp任务:
若需要去除html中注释的内容则在collapseWhitespace: true后面添加:removeComments: true,需要注意的是,压缩后组件上的大写变量名会变成小写,需要大小写敏感加上caseSensitive:true即可,多个属性之间,号分隔。
参考网址:https://github.com/kangax/html-minifier
3:压缩,输入命令,gulp htmlmin。
三:压缩css
1:下载gulp-minify-css,命令npm install gulp-minify-css --save-dev
2:创建gulp任务:
const minifycss = require("gulp-minify-css");//压缩cssgulp.task('cssTask', function () {return gulp.src("./src/*.css").pipe(minifycss({advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]keepBreaks: false,//是否保留换行,默认falsekeepSpecialComments: '*'//保留所有特殊前缀})).pipe(gulp.dest('./dist/'))
});
3:压缩,输入命令gulp cssTask。
gulp+babel实现es6压缩,并替换es6语法,压缩html,css相关推荐
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案 参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
- 石川es6课程---1-2、ES6简介
石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...
- php es6写法,Web/PHPStorm ES6 语法支持以及实时编译
最近用PHPstorm 写了点es6的语法的东西, what ? 编辑器报错了 查了查, 原来把编辑器设置一下,就可以了, Preferences > Languages & Frame ...
- React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四
转载地址 React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三.四 项目初始化 git clone https://github.com/durban89/we ...
- 学习ES6-什么是ES6?为什么要学习ES6?
这篇文章主要解释一下标题的问题,很多不了解ES6的人都有这样的疑问. 什么是ES6? 什么是ES6呢,简单通俗的说就是netscape(网景)公司创造了javascript这个脚本语言,主要是用来做c ...
- ES6(一)ES6的开发环境搭建(es6转码为es5)
写在最前面 往后陆续更新EXMA script 6的文章,都是之前工作的积累和网上搜索总结后自己再重新操手一遍,为了以后工作的需要,有理解的不到位的地方请小伙伴多多指正,共同进步! es6的优点(题外 ...
- JavaScript前端经典面试题之ES6面试题汇总es6
推荐阅读: vue3面试题:最新vue3.0前端经典面试试题及答案(持续更新中--)_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使 ...
- 石川es6课程---18、ES6 复习
石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...
最新文章
- AutoX全无人驾驶出租车正式对公众开放试运营
- RESTful设计原则和样例(开发前后台接口)
- ROS探索总结(五)——创建简单的机器人模型smartcar
- What is AJAX?(转)(二)
- 5.14 js对象 函数 js操作document对象
- 转载:(C++)浅谈多态基类析构函数声明为虚函数
- 【转载】linux下如何使用sftp命令
- mssql数据库基本语句总结(2)
- [深度学习] loss不下降的解决方法
- 统计学(贾俊平《第七版》)知识总结
- CentOS7+华为交换机+Winserver2012配置KMS服务器开机自启和自动激活
- 用户态创建socket来控制arp报文的收发,含编码
- 企业推进数字化转型零信任是必须?
- android jpct ae教程,android OpenGL开发使用JPCT-AE引擎显示3D立方体
- 基于数据要素流通视角的数据溯源研究进展
- 自媒体:公众号内容可以同步到头条吗
- Struts2学习之------Struts2的详细的复习讲解
- 分布式定时任务调度中心
- 修复 SSL Certificate Problem 常见问题
- python+气象 | 在地图背景下绘制全国站点气温分布图