webpack、gulp、babel
程序员文章站
2022-05-29 10:13:49
...
babel(插件集合转换es6)
- 安装
- 新建.babelrc配置文件文件(json格式 “presets”: [“es2015”]) [“es2015”]插件集合
- 安装预设 npm install babel-preset-es2015
- es6格式转文件 babel 1.es6.js -o 1.es5.js
gulp
- 作用:定义执行任务
- task
- src -
- 工作方式
- 1.通过src获取源文件 以文件为单位匹配所有文件名
- 2.使用管道.pipe()方式进行文件注入
-
HTML资源注入
gulp.task('html',function () { //获取目标文件流 var target=gulp.src('./app/index.html'); //获取源文件流 var source=gulp.src(['build/css/total.min.css','build/js/all.min.js']); target.pipe($.inject(source,{addRootSlash:false,ignorePath:'build'}))//文件插入 .pipe(gulp.dest('./build')); //addRootSlash 是否在文件最前边加/ ignorePath忽略掉前导路径 'build' });
- 启动外部服务预览项目
var gulp=require('gulp'); var $=require('gulp-load-plugins')(); gulp.task('html',function () {//把源目录下面的html文件拷贝到目标目录下 gulp.src('./app/index.html') .pipe(gulp.dest('./build')) .pipe($.connect.reload()) }); gulp.task('serve',function () { $.connect.server({//启动express HTTP一个服务器 port:9999,//设置端口号 root:'./build',//设置静态文件根目录为build目录 livereload:true//启动服务器自动刷新浏览器功能 }) }); gulp.task('watch',function () {//监视源文件变化,发生变化后执行HTML任务 gulp.watch('./app/index.html',['html']); }); gulp.task('default',['html','serve','watch']);
上一篇: python_0基础开始_day06
下一篇: 面向对象:反射,双下方法