如何启动基于 gulp 和 angular 的项目？

Question

以前只用过 webpack 和 vue ，只需要 npm i 就可以了
gulp 和 angular 的查了好久，感觉每个项目启动方式都可以不一样..

这是一开始下载下来的目录：

我先初始化：npm init
然后下载： npm i
下载后输出如下：

这里就感觉不太对了
然后： gulp
就提示有包没有下载，都下载完后再运行： gulp
就输出如下：

gulpfile 文件：

// 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#L276
      }
    )
    .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)
});

Answer 1

原来Angular只要我一个web服务就行 不用编译
安装http-serve: npm i http-serve
运行：http-serve
就可以了