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