活动页及小项目共用一套配置，gulp4+browserify 打造ES6开发环境

最近整理公司项目时 发现一些活动页面可以共用一套打包配置，因为基本功能项不会大变。结合实际需求，找到了gulp和browserify来配置。

gulp
browserify

项目搭建

不废话操起键盘就是一顿梭

mkdir gulp-demo // 新建文件夹
cd gulp-demo // 进入当前文件夹
npm init -y // 生成package.json

建立相关开发文件夹和文件，结构如下【ps 也可以自己按需定制】

安装相关依赖

yarn add 或者 npm install
@babel/core
babel-preset-env
babelify
browserify
del
event-stream
gulp
gulp-base64
gulp-changed
gulp-connect
gulp-file-include
gulp-imagemin
gulp-plumber
gulp-postcss
gulp-rename
gulp-sass
gulp-sourcemaps
gulp-uglify
gulp-util
imagemin-pngquant
lodash.assign
postcss-px-to-viewport
vinyl-buffer
vinyl-source-stream
watchify -D

js打包和es6转化及browserify转化

和gulpfile.js同级 新建.babelrc文件并且配置

{
  "presets": [
    "env"
  ]
}

gulpfile.js

// JavaScript
function compileJs(done, isWatch, isBuild) {
  const getEntryJsFiles = () =>
    glob.sync(config.paths.script + "/**/*.js", {
      ignore: []
    });
  let files = getEntryJsFiles();
  const bundleTasks = files.map(entry => {
    var b = browserify(
      assign({}, watchify.args, {
        cache: {},
        packageCache: {},
        entries: [entry],
        debug: true,
        paths: ["./node_modules"] // 排除指定文件夹
      })
    );
    b.transform(babelify); // 在这里加入变换操作
    if (isWatch) {
      var b = watchify(b);
    }
    if (isBuild) {
      config.isDev = false;
      config.sourceMap = false;
    }
    function bundle() {
      return b
        .bundle()
        .pipe(plumber())
        .pipe(source(entry))
        .pipe(rename({ dirname: "", suffix: ".min" }))
        .pipe(buffer())
        .pipe(config.isDev ? sourcemaps.init() : gutil.noop())
        .pipe(uglify())
        .pipe(plumber.stop())
        .pipe(config.sourceMap ? sourcemaps.write("maps") : gutil.noop())
        .pipe(dest(config.pathsDev.script))
        .pipe(connect.reload());
    }
    if (isWatch) {
      b.on("update", bundle);
      b.on("log", gutil.log);
    }
    return bundle();
  });
  if (isWatch) {
    es.merge(bundleTasks).on("end", done);
  }
}
// watch
function watchJs(done) {
  compileJs(done, true);
}
function buildJs(done) {
  compileJs(done, false, true);
  done();
}

其他配置文件可以访问项目地址【gulp-config】查看，带注释基本都可以看懂

后期再加上雪碧图和svg图标配置