gulp使用笔记

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'))
})