gulp.src
gulp.src([src/**/*.js])
要打包的文件路径,是一个数组,**表示文件夹`
gulp.dest
要打包进入哪个文件夹
gulp-load-plugins
使用gulp-load-plugins
来加载所有和gulp相关的插件,不用依次require
uglify
使用uglify的时候要注意由于不识别es6语法,所以要引入babel编译。
这里在build时还碰到失败的情况,如果想要看问题出在哪里可以引入gulp-util
,然后在uglify后面加上
.on('error', (err) => {
$.util.log($.util.colors.red('[Error]'), err.toString());
})
gulp-rename
打包后重命名
babel
使用babel
,yarn add --dev gulp-babel @babel/preset-env @babel/core@^7.0.0
并新建.babelrc
:
{
presets: ['@babel/preset-env']
}
附示例:
'use strict';
const gulp = require('gulp');
// const browserify = require('browserify');
// const fs = require('fs');
// const source = require('vinyl-source-stream');
// const buffer = require('vinyl-buffer');
const $ = require('gulp-load-plugins')();
// const isProd = process.env.NODE_ENV === 'production';
gulp.task('default', () => {
return gulp.src(['index.js'])
.pipe($.babel())
// .pipe(browserify({entries: 'index.js', debug: true}))
// .bundle()
// .pipe(source('./index.js'))
// .pipe(buffer())
.pipe($.uglify())
.on('error', (err) => {
$.util.log($.util.colors.red('[Error]'), err.toString());
})
.pipe($.rename({extname: '.min.js'}))
.pipe(gulp.dest('./build/js'))
})