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: false, //清除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
};

var vendors = [
  {
    dist: 'js/angular.js',
    src: 'vendor/angular/angular.js'
  },
  {
    dist: 'js/angular-route.js',
    src: 'vendor/angular-route/angular-route.js'
  },
  {
    dist: 'js/angular-animate.js',
    src: 'vendor/angular-animate/angular-animate.js',
  },
  {
    dist: 'js/angular-cookies.js',
    src: 'vendor/angular-cookies/angular-cookies.js',
  },
  {
    dist: 'js/jquery.js',
    src: 'vendor/jquery/dist/jquery.js',
  },
  {
    dist: 'js/semantic.js',
    src: 'vendor/semantic/dist/semantic.js'
  }
];

gulp.task('dev_vendor', function (done) {
  gulp.src(vendors.map(function (item) { return item.src; }))
    .pipe(loader.plumber())
    .pipe(loader.ngAnnotate({ single_quotes: true }))
    .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.css')
    .pipe(loader.plumber())
    .pipe(gulp.dest(app.distPath + 'css'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('vendor', function (done) {
  gulp.src(vendors.map(function (item) { return item.src; }))
    .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('dev_views', function (done) {
  gulp.src([
    app.srcPath + 'app/**/*.html',
    app.srcPath + 'common/**/*.html'
  ], { allowEmpty: true })
    .pipe(loader.plumber())
    .pipe(loader.ngHtml2js({ prefix: 'app/', moduleName: 'appView' }))
    .pipe(loader.concat('views.js'))
    .pipe(gulp.dest(app.distPath + 'js'))
    .pipe(loader.connect.reload());
  done();
});

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: 'appView' }))
    .pipe(loader.uglify())
    .pipe(loader.concat('views.min.js'))
    .pipe(gulp.dest(app.distPath + 'js'))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('dev_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.concat('app.css'))
    .pipe(gulp.dest(app.distPath + 'css'))
    .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('dev_js', function (done) {
  gulp.src(app.srcPath + '**/*.js')
    .pipe(loader.plumber())
    .pipe(loader.ngAnnotate({ single_quotes: true })) // 自动注入
    .pipe(loader.concat('app.js')) //合并成一个名为index.js文件
    .pipe(gulp.dest(app.distPath + 'js'))
    .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.uglify()) //源自于gulp-uglify，功能压缩js
    .pipe(loader.concat('app.min.js')) //合并成一个名为index.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('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('dev_index', function(done) {
  gulp.src(app.srcPath + 'index.html')
    .pipe(loader.plumber())
    .pipe(loader.htmlReplace({
      css: ['css/semantic.css', 'css/app.css'],
      vendor: vendors.map(function (item) { return item.dist; }),
      js: ['js/views.js', 'js/app.js']
    }))
    .pipe(gulp.dest(app.distPath))
    .pipe(loader.connect.reload());
  done();
});

gulp.task('index', function(done) {
  gulp.src(app.srcPath + 'index.html')
    .pipe(loader.plumber())
    .pipe(loader.htmlmin(htmlminOptions))
    .pipe(loader.htmlReplace({
      css: ['css/semantic.min.css', 'css/app.min.css'],
      vendor: ['js/vendor.min.js'],
      js: ['js/views.min.js', 'js/app.min.js']
    }))
    .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', 'views', 'less', 'js', 'images', 'fonts', 'index'));

gulp.task('dev_build', gulp.series('dev_vendor', 'dev_views', 'dev_less', 'dev_js', 'images', 'fonts', 'dev_index'))

gulp.task('serve', function () {
  //gulp.watch 监听任务，目录下的之资源changed，执行任务流
  gulp.watch('vendor/**/*', gulp.series('dev_vendor', 'dev_index'));
  gulp.watch(app.srcPath + '**/*.html', gulp.series('dev_views', 'dev_index'));
  gulp.watch(app.srcPath + 'less/*.less', gulp.series('dev_less', 'dev_index')); //当所有src/less下的 .less文件发生改变时，调用less任务
  gulp.watch(app.srcPath + '**/*.js', gulp.series('dev_js', 'dev_index'));
  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');
}));