gulp es5语法转换及js/css/html压缩过程
2019独角兽企业重金招聘Python工程师标准>>>
1.在对应的目录安装:
如果没有安装gulp,先安装gulp
//全局安装gulp
npm install -g gulp
//项目中安装gulp
npm install --save-dev gulp如果已经安装gulp,可无视上面直接安装下面.npm install gulp-babel --save-dev
npm install @babel/core@^7.0.0 --save-dev
npm install babel-preset-env --save-dev2.在项目目录新建文件.babelrc {"presets": ["env"]
}3.如果没有gulpfile.js,新建这个文件,复制下面的代码:// 获取 gulp
var gulp = require('gulp');
// 获取babel模块
var babel = require('gulp-babel');/*这里的babal是任务名,可以修改为其他turn ,change 都行,执行的时候在命令行输入 gulp turn 或者 gulp change就行了*/
gulp.task("babel", function () {return gulp.src("./src/*.js")// ES6 源码存放的路径.pipe(babel()) .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});4.在命令行输入 gulp babel 就能将es6转成es5啦
下面是例子:
一.例子的目录
package.json 的内容
{"devDependencies": {"@babel/core": "^7.3.4","@babel/preset-es2015": "^7.0.0-beta.53","gulp": "3.9.1","gulp-babel": "^8.0.0","gulp-clean-css": "^4.0.0","gulp-htmlmin": "^5.0.1","gulp-uglify": "^3.0.2","pump": "^3.0.0"}
}
.babelrc 文件的内容
{"presets": ["env"]
}
gulpfile.js 的文件内容:
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var uglify = require('gulp-uglify');
var pump = require('pump');
var babel = require('gulp-babel');var kBuildDir = process.env.BUILD_DEST || 'build';
var cwd = __dirname;gulp.task('default', ['babel','js','css','html']);gulp.task('css', () => {const regs = [`${kBuildDir}/**/*.css`, `!${kBuildDir}/**/*-min.css`];return gulp.src(regs, { base: '.' }).pipe(cleanCSS()).pipe(gulp.dest(cwd));
});
gulp.task('babel', () => {const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`];return gulp.src(regs2,{base:'.'}).pipe(babel()).on('error',function(e){console.log(e);}).pipe(gulp.dest(cwd));
});gulp.task('js', () => {const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`];return gulp.src(regs2,{base:'.'}).pipe(uglify()).on('error',function(e){console.log(e);}).pipe(gulp.dest(cwd));
});gulp.task('html', () => {const regs = [`${kBuildDir}/**/*.html`, `!${kBuildDir}/**/*-min.html`];return gulp.src(regs, { base: '.' }).pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true, minifyCSS: true })).pipe(gulp.dest(cwd));
});
在项目根目录可单个执行:gulp babel,gulp js。也可以执行执行gulp,直接执行方式会使用default命令,即会将default命令列表中的命令顺序执行。
gulpfile.js里面有个模块需要手动安装一下:
npm install gulp-clean-css
npm install gulp-htmlmin
npm install gulp-uglify
npm install pump
npm install gulp-babel
要先安装node.js,安装完之后在demo的目录里输入npm init 看不到没关系,无脑回车就好了
转载于:https://my.oschina.net/u/2391658/blog/3024745
gulp es5语法转换及js/css/html压缩过程相关推荐
- Js(三)将es6语法转换成es5语法
前言 本章主要讲述将es6语法的js,转换成es5语法 运用场景:由于Jmeter上面只适配es5语法的js,而某朋友公司前端都是写的es6语法的js,为了能在Jmeter上能够兼容,故进行相关转换 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- es6转化es5普通html页面,JS语法转换-ES6转ES5
> 虽然我觉得没什么用,但是记一下吧 [TOC] #### 1.新建项目 项目目录结构: ![](https://box.kancloud.cn/1e80da2d1c4c01681a650230 ...
- 如何利用babel工具将es6语法转换成es5语法
如何利用babel工具将es6语法转换成es5语法 一.很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗? ECMAScript 6(ES6)的发展速度 ...
- 利用gulp对项目html,js,css,图片进行压缩
1,下载安装node 访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪. npm 会随着安装包一起安装, 2,打开代码行 ...
- gulp+babel实现es6压缩,并替换es6语法,压缩html,css
1:创建一个文件夹,这里取名为final,要是没有安装过gulp的就先全局安装Gulp包: npm install -g gulp 2;在目录下新建文件夹src,存放源文件. 3:在final文件 ...
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- 前端面试题整理(vue/js/css)
什么是盒子模型 把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型 盒子模型有两种形式:标准盒子模型,怪异盒子模型 标准模式,总 ...
- HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...
最新文章
- java读取字节效率最高_Java-IO 字节流的使用和效率比较
- HDFS namenode 高可用(HA)搭建指南 QJM方式 ——本质是多个namenode选举master,用paxos实现一致性...
- Oracle中加速索引创建或重建的方法
- java中文乱码的解决
- Qt Creator部署到设备
- 预加载显示图片的艺术
- 2016年第七届蓝桥杯 - 省赛 - C/C++大学A组 - I. 密码脱落
- consumer和partition的数量建议
- Golang 使用Protocol Buffer 案例
- 伺服驱动器的 三环控制 电流环 速度环 位置环
- Android官方开发文档Training系列课程中文版:通知用户之大视图通知
- 蓝桥杯历届试题----矩阵翻硬币
- 事务对性能影响_DRDS 柔性事务漫谈
- STM8学习笔记---外部中断实现
- [渝粤教育] 西南科技大学 现代制造系统 在线考试复习资料2021版
- Linux学习笔记4 - Linux常用命令
- 留言板php数据库_PHP 留言板教程数据库表设计
- 【Python】openpyxl设置excel的表格边框内外边框不同处理
- Vagrant设置局域网访问
- c语言中元音字母对应的的值,c语言输入一个字符串,统计这个字符串的元音字母...
热门文章
- easyui扩展-日期范围选择.
- 用JS实现发邮件的功能 完美解决
- uva 1476 - Error Curves
- 易度甘特图的功能介绍和开发手册
- ScottGu之博客翻译-LINQ to SQL第四部分,更新数据库 LINQ to SQL (Part 4 - Updating our Database)...
- 利用DOM进行照片的切换
- HTML5 浏览器支持(怎么样让低版本浏览器支持html5?)
- hibernate persist不能插入到表中
- 菜鸟涂鸦作品展_No.27
- ICEfaces抄袭PrimeFaces