活動頁及小項目共用一套配置，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圖標配置