gulp的基本配置

gulp概念

基于流

gulp4

task

task的回调函数必须返回一个一个stream或promise，否则会报错
还可以使用async来解

执行顺序

gulp3使用顺序执行
gulp4 ：
gulp.series【顺序执行】
gulp.parallel【并行执行】

启动服务器

gulp-connect

var connect =  require('gulp-connect');

gulp.task('server',async function(){
  connect.server({
    livereload: true,
    port:2333
  })
})

编译

• 安装依赖
• 建立task执行，通过pipe()流式执行相应操作
• gulp.dest()生成新的文件

以编译jsx为例

注意：使用babel编译过的js是commonJS标准，需要用模块打包工具，使其能被浏览器识别

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');

gulp.task('build',  function() {
  return browserify('src/main.js')
    .transform(babelify, {
        presets: ['es2015', 'react']
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build'));
});

热更新

gulp.watch + connect.reload
connect.reload只是重新加载页面，并不能重新编译文件
watch监听变化，再执行对应的task，再重新加载页面

gulp.task('watch',async function(){
  //js文件发生变换：先重新build，再重新加载页面
  gulp.watch("./src/*.js",gulp.series('build','reload')); 
  //html问价发生变化：不需要编译，只用重新加载页面
  gulp.watch("./index.html",gulp.series("reload")); 
})

https://github.com/kano233333/config/tree/master/gulp