webpack、gulp、babel

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']);