欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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']);
相关标签: package