I have only used webpack and vue before, and I only need npm I.
gulp and angular have been looking up for a long time, and I feel that each project can be started in a different way.

this is the directory downloaded from the beginning:

:npm init
: npm i
:

: gulp
: gulp
:

gulpfile file:

// http://www.gbtags.com/gb/share/5503.htm
// http://www.cnblogs.com/givebest/p/4707432.html?utm_source=tuicool&utm_medium=referral
var changed       = require("gulp-changed");
var concat        = require("gulp-concat");
var del           = require("del");
var filter        = require("gulp-filter");
var gulp          = require("gulp");
var gulpif        = require("gulp-if");
var htmlmin       = require("gulp-htmlmin");
var minifyCss     = require("gulp-minify-css");
var path          = require("path");
var replace       = require("gulp-replace");
var rename        = require("gulp-rename");
var rev           = require("gulp-rev");
var revReplace    = require("gulp-rev-replace");
var sequence      = require("run-sequence");
var templateCache = require("gulp-angular-templatecache");
var uglify        = require("gulp-uglify");
var useref        = require("gulp-useref");
var webserver     = require("gulp-webserver");

var dest = "dist";

gulp.task("build-clean", function() {
    return del([dest]);
});

gulp.task("build-archive", function() {
  
  var jsFilter = filter("**/*.js", { restore: true });
  var cssFilter = filter("**/*.css", { restore: true });
  var indexHtmlFilter = filter(["**/*", "!**/index.html"], { restore: true });

  var userefAssets = useref({
      // xxx.js?v=ssss => xxx.js
      transformPath: function(filePath) {
        var path = filePath;
        var index = filePath.indexOf("?");
        if ( index != -1 ) {
          path = filePath.substring(0, index)
        }
        // console.log(path)
        return path
      }
  })

  return gulp.src("src/index.html")
    .pipe(changed(dest)) //  http://www.gulpjs.com.cn/docs/recipes/only-pass-through-changed-files/
    .pipe(userefAssets) // 
    // .pipe(replace(/\?v=[0-9]+/g, "")) // remove version
    .pipe(cssFilter)
    .pipe(minifyCss())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(gulp.dest(dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dest))
});

gulp.task("build-config", function(){
  return gulp.src("src/*config/*config.app.sample.js")
        .pipe(gulp.dest(dest));
});

gulp.task("build-config-dist", function () {
  return gulp.src("src/*config/*config.app.js")
    .pipe(gulp.dest(dest));
});

gulp.task("build-templates", function() {
  
  return gulp.src(
      ["src/modules/**/*.html", "src/app/template/**/**/*.html", "!**/_**", "!**/**"], 
      { 
        "base": path.resolve(__dirname, ".") // https://github.com/miickel/gulp-angular-templatecache/blob/master/test/test.js-sharpL276
      }
    )
    .pipe(changed(dest)) //  http://www.gulpjs.com.cn/docs/recipes/only-pass-through-changed-files/
    .pipe(htmlmin())
    .pipe(replace(/\?v=[0-9]+/g, "")) // remove version
    .pipe(templateCache("app.templates.js", {module: "app", transformUrl: function(url) {
        // console.log(url.substring(5))
        return url.substring(5) // remove the "/src/"
    }}))
    // .pipe(uglify())                 // Minify any javascript sources
    .pipe(gulp.dest(dest + "/js"));
});

gulp.task("build-assets", function(){

  return gulp.src([
    "src/*libs*/**",
    "src/*fonts*/**",
    "src/*image*/**",
    "src/*l10n*/**",
  ])
  .pipe(gulp.dest(dest + "/"))
})

gulp.task("build-json", function () {

  return gulp.src([
    "src/app/mock/**/**/*.json",
  ])
    .pipe(gulp.dest(dest + "/app/mock"))
})

gulp.task("build-merge", function(){
  var mpath = "./" + dest + "/rev-manifest.json";
  var manifest = require(mpath);
  var appjs = manifest["js/app.angular.js"];

  return gulp.src([
    "dist/" + appjs,
    "dist/js/app.templates.js",
  ])
  .pipe(concat(appjs))
  .pipe(uglify({
    mangle: true,
      compress: {
        properties: false,
      },
      output: {
        quote_keys: true,
      }
  }))                 // Minify any javascript sources
  .pipe(gulp.dest(dest))
  .on("end",function () {
    del([
      "dist/js/app.templates.js",
    ]);
  })
})

gulp.task("build-index", function(){
  var mpath = "./" + dest + "/rev-manifest.json";
  var manifest = gulp.src(mpath);
  return gulp.src(["dist/index.html"])
  .pipe(replace("config.server.js", "config.server.js?v=" + (new Date()).valueOf())) // remove version
  .pipe(revReplace({manifest: manifest}))
  .pipe(gulp.dest(dest))
  .on("end",function () {
    del([mpath]);
  })
})

gulp.task("src", function () {
  gulp.src("src/")
    .pipe(webserver({
      fallback: "index.html",
      livereload: false,
      directoryListing: false,
      open: true
    }));
});

gulp.task("dist", function () {
  gulp.src("dist/")
    .pipe(webserver({
      fallback: "index.html",
      livereload: false,
      directoryListing: false,
      open: true
    }));
});

gulp.task("dist", function () {
  sequence("build-clean", "build-assets", "build-json", "build-config","build-config-dist", ["build-archive", "build-templates"], "build-merge", "build-index", function () {
    gulp.src(dest + "/")
      .pipe(webserver({
        fallback: "index.html",
        livereload: false,
        directoryListing: false,
        open: true
      }));
  });
});

gulp.task("release", function(cb){
  sequence("build-clean", "build-assets", "build-json", "build-config", ["build-archive", "build-templates"], "build-merge", "build-index", cb)
});

gulp.task("default", function(cb){
  sequence("build-clean", "build-assets", "build-json", "build-config", ["build-archive", "build-templates"], "build-merge", "build-index", cb)
});