angular-app-example/gulpfile.js

var gulp = require('gulp');
var loader = require('gulp-load-plugins')(); //按需加载插件，其他插件不用一个一个的引入
var historyApiFallback = require('connect-history-api-fallback');

var app = {
  srcPath: 'src/',
  distPath: 'dist/'
};

var htmlminOptions = {
  removeComments: true, //清除HTML注释
  collapseWhitespace: true, //压缩HTML
  collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
  removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
  removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
  removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
  minifyJS: true, //压缩页面JS
  minifyCSS: true //压缩页面CSS
};

gulp.task('views', function (done) {
  gulp.src([
    app.srcPath + 'app/**/*.html',
    app.srcPath + 'common/**/*.html'
  ], {allowEmpty: true})
    .pipe(loader.plumber())
    .pipe(loader.htmlmin(htmlminOptions))
    .pipe(loader.ngHtml2js({prefix: 'app/', moduleName: 'Views'}))
    .pipe(loader.uglify())
    .pipe(loader.concat('views.min.js'))
    .pipe(gulp.dest(app.distPath + 'js'));
  done();
});

gulp.task('index', function (done) {
  gulp.src(app.srcPath + 'index.html')
    .pipe(loader.plumber())
    .pipe(loader.htmlmin(htmlminOptions))
    .pipe(gulp.dest(app.distPath))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('less', function (done) {
  gulp.src(app.srcPath + 'less/**/*.less')
    .pipe(loader.sourcemaps.init())
    .pipe(loader.plumber()) //源自于gulp-plumber，处理错误进程，输出错误日志
    .pipe(loader.less())
    .pipe(loader.sourcemaps.write()) //文件底部写入sourcemaps
    .pipe(loader.minifyCss()) //压缩css成一行
    .pipe(loader.concat('app.min.css'))
    .pipe(gulp.dest(app.distPath + 'css'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('js', function (done) {
  gulp.src(app.srcPath + '**/*.js')
    .pipe(loader.plumber())
    .pipe(loader.ngAnnotate({single_quotes: true})) // 自动注入
    .pipe(loader.concat('app.min.js')) //合并成一个名为index.js文件
    .pipe(loader.uglify()) //源自于gulp-uglify，功能压缩js
    .pipe(gulp.dest(app.distPath + 'js'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('images', function (done) {
  gulp.src(app.srcPath + 'assets/images/*.*')
    .pipe(loader.plumber())
    .pipe(gulp.dest(app.distPath + 'images'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('vendor', function (done) {
  gulp.src([
    'vendor/angular/angular.js',
    'vendor/angular-ui-router/release/angular-ui-router.js',
    'vendor/angular-animate/angular-animate.js',
    'vendor/angular-cookies/angular-cookies.js',
    'vendor/jquery/dist/jquery.js',
    'vendor/semantic/dist/semantic.js'
  ])
    .pipe(loader.plumber())
    .pipe(loader.ngAnnotate({single_quotes: true}))
    .pipe(loader.concat('vendor.min.js'))
    .pipe(loader.uglify())
    .pipe(gulp.dest(app.distPath + 'js'))
    .pipe(loader.connect.reload());
  gulp.src('vendor/semantic/dist/themes/**/*.*')
    .pipe(loader.plumber())
    .pipe(gulp.dest(app.distPath + 'css/themes'))
    .pipe(loader.connect.reload());
  gulp.src('vendor/semantic/dist/semantic.min.css')
    .pipe(loader.plumber())
    .pipe(gulp.dest(app.distPath + 'css'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('fonts', function (done) {
  gulp.src([
    app.srcPath + '**/*.woff2',
    app.srcPath + '**/*.woff',
    app.srcPath + '**/*.eot',
    app.srcPath + '**/*.ttf',
    app.srcPath + '**/*.otf',
    app.srcPath + '**/*.svg'
  ])
    .pipe(gulp.dest(app.distPath))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('clean', function (done) {
  gulp.src(app.distPath, {allowEmpty: true}).pipe(loader.clean());
  done();
});

// gulp.parallel 并行执行, gulp.series 串行执行
gulp.task('build', gulp.series('vendor', 'index', 'views', 'less', 'js', 'images', 'fonts'));

gulp.task('serve', function () {
  //gulp.watch 监听任务，目录下的之资源changed，执行任务流
  gulp.watch('vendor/**/*', gulp.series('vendor'));
  gulp.watch(app.srcPath + '**/*.html', gulp.series('views'));
  gulp.watch(app.srcPath + 'less/*.less', gulp.series('less')); //当所有src/less下的 .less文件发生改变时，调用less任务
  gulp.watch(app.srcPath + '**/*.js', gulp.series('js'));
  gulp.watch(app.srcPath + 'assets/**/*.*', gulp.series('images'));
  loader.connect.server({ //前端启动服务，源自于gulp-connect
    root: [app.distPath], //服务启动的根目录
    livereload: true, //即时刷新
    port: 8000, //端口
    middleware: function (connect, opt) {
      return [historyApiFallback()];
    }
  });
});

gulp.task('default', gulp.series('clean', function () {
  gulp.start('serve');
}));