gulp配置react开发环境

gulp与webpack

gulp是对文件的处理,是Task Runner,节省了手动编译,手动打包这一步,但是单纯使用gulp没法去解决js中引入module的问题,可能会遇到项目中明明引入了babel语法转换,为什么浏览器会提示require is not defined报错,这是因为babel只解析语法,并不会去管js的模块引入。
而webpack解决了require的问题,根据不同的文件转换需求引入不同的loader,最后打包出符合相应规则的静态资源文件。

Browserify-让浏览器加载Node模块

官方文档开头介绍:require('modules') in the browser

目前NPM的包大多都是通过CMD的方式打包的,除了特定的可以使用CMD模块加载器加载的模块,大部分nodejs模块无法直接使用到浏览器环境中。
Browserify是一个供浏览器环境使用的模块打包工具,像在node环境一样,也是通过require(‘modules’)来组织模块之间的引用和依赖,既可以引用npm中的模块,也可以引用自己写的模块,然后打包成js文件,再在页面中通过<script>标签加载。

Browserify.transform

指定转换模块,在打包过程中自动执行,在这里需要结合babel进行语法转换

详细配置

react语法解析主要用到babel的@babel/preset-react插件,此外还会使用到browserSync进行自动检测刷新,less预处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const gulp = require('gulp') //引入gulp
const less = require('gulp-less') //引入gulp-less处理less语法
const LessAutoprefix = require('less-plugin-autoprefix') //css兼容前缀
const autoprefix = new LessAutoprefix({
browsers: ['last 2 versions']
})
const del = require('del') //删除文件模块,在每次gulp任务前执行
const babel = require('gulp-babel') //babel
const browserSync = require('browser-sync').create() //自动刷新
const reload = browserSync.reload //reload示例,用于浏览器刷新
const browserify = require('browserify') //模块处理
const source = require('vinyl-source-stream') //将browerify流转换成gulp文件流
const babelify = require('babelify') //用于browserify的babel编译器

//主任务
function main(cb) {
(async () => {
await del.sync('dist')
//less
gulp.src('./src/index.less').pipe(less({
plugins: [autoprefix]
})).pipe(gulp.dest('./dist'))
//js
browserify({
entries:['./src/index.js']
})
.transform(babelify,{
presets: ['@babel/env','@babel/preset-react'],
plugins: ["@babel/plugin-transform-runtime"]
})
.bundle() //打包
.pipe(source('index.js')).pipe(gulp.dest('./dist'))
gulp.src('./src/index.html').pipe(gulp.dest('./dist'))
cb()
})()

}

//开发环境
function devServer(cb){
browserSync.init({
server: {
baseDir: './dist'
}
})
gulp.watch("./src/**", gulp.series(lessChange,jsChange,htmlChange))
cb()
}

//检测html变化
function htmlChange(){
return gulp.src('./src/index.html').pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
}

//检测样式文件
function lessChange() {
return gulp.src('./src/index.less').pipe(less({
plugins: [autoprefix]
})).pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
}

//检测js文件
function jsChange(cb){
browserify({
entries:['./src/index.js']
})
.transform(babelify,{
presets: ['@babel/env','@babel/preset-react'],
plugins: ["@babel/plugin-transform-runtime"]
})
.bundle()
.pipe(source('index.js')).pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
cb()
}

//default默认任务,用于package.json执行脚本gulp任务
gulp.task('default', gulp.series(main,devServer))