调整打包gulp配置

bower.json

@@ -7,7 +7,6 @@
     "semantic": "^2.4.1",
     "jquery": "^3.5.1",
     "angular-animate": "^1.8.0",
-    "angular-cookies": "^1.8.0",
-    "angular-ui-router": "^1.0.28"
+    "angular-cookies": "^1.8.0"
   }
 }

gulpfile.js

@@ -8,7 +8,7 @@ var app = {
 };
 
 var htmlminOptions = {
-  removeComments: true, //清除HTML注释
+  removeComments: false, //清除HTML注释
   collapseWhitespace: true, //压缩HTML
   collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
   removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
@@ -18,15 +18,52 @@ var htmlminOptions = {
   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([
-    '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'
-  ])
+  gulp.src(vendors.map(function (item) { return item.src; }))
     .pipe(loader.plumber())
     .pipe(loader.ngAnnotate({ single_quotes: true }))
     .pipe(loader.concat('vendor.min.js'))
@@ -44,6 +81,19 @@ gulp.task('vendor', function (done) {
   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',
@@ -51,7 +101,7 @@ gulp.task('views', function (done) {
   ], { allowEmpty: true })
     .pipe(loader.plumber())
     .pipe(loader.htmlmin(htmlminOptions))
-    .pipe(loader.ngHtml2js({ prefix: 'app/', moduleName: 'Views' }))
+    .pipe(loader.ngHtml2js({ prefix: 'app/', moduleName: 'appView' }))
     .pipe(loader.uglify())
     .pipe(loader.concat('views.min.js'))
     .pipe(gulp.dest(app.distPath + 'js'))
@@ -59,6 +109,18 @@ gulp.task('views', function (done) {
   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())
@@ -72,12 +134,22 @@ gulp.task('less', function (done) {
   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.concat('app.min.js')) //合并成一个名为index.js文件
     .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();
@@ -105,10 +177,28 @@ gulp.task('fonts', function (done) {
   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();
@@ -122,12 +212,14 @@ gulp.task('clean', function (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('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('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], //服务启动的根目录

package.json

@@ -4,7 +4,7 @@
   "description": "Angular App Example",
   "main": "index.js",
   "scripts": {
-    "dev": "gulp clean && gulp build && gulp serve",
+    "dev": "gulp clean && gulp dev_build && gulp serve",
     "build": "gulp clean && gulp build"
   },
   "author": "Fatboo",
@@ -15,6 +15,7 @@
     "gulp-clean": "^0.4.0",
     "gulp-concat": "^2.6.1",
     "gulp-connect": "^5.7.0",
+    "gulp-html-replace": "^1.6.2",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^7.1.0",
     "gulp-less": "^4.0.1",

src/app/app.js

@@ -1,24 +1,22 @@
 angular
-  .module('app', ['ng', 'ui.router', 'Views'])
-  .config(function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
+  .module('app', ['ng', 'ngRoute', 'appView'])
+  .config(function ($httpProvider, $routeProvider, $locationProvider) {
     $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
-    $stateProvider
-      .state('index', {
-        url: '/',
+    $routeProvider
+      .when('/', {
         controller: 'IndexController',
         templateUrl: 'app/views/index/index.tpl.html'
       })
-      .state('info', {
-        url: '/info',
+      .when('/info', {
         controller: 'InfoController',
         templateUrl: 'app/views/info/info.tpl.html'
       });
-    $urlRouterProvider.otherwise('/'); // 未找到指定的路由地址，重定向到home页
+    $routeProvider.otherwise({ redirectTo: '/' }); // 未找到指定的路由地址，重定向到home页
     $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
     });
   })
-  .controller('AppController', function ($scope) {
+  .controller('AppController', function () {
     console.log('应用初始化！');
   });

src/index.html

@@ -6,13 +6,14 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Angular 1.x Learning</title>
-  <link rel="stylesheet" href="css/semantic.min.css">
-  <link rel="stylesheet" href="css/app.min.css">
+  <!-- build:css -->
+  <!-- endBuild -->
 </head>
 <body ng-controller="AppController">
-<div ui-view></div>
-<script src="js/vendor.min.js"></script>
-<script src="js/views.min.js"></script>
-<script src="js/app.min.js"></script>
+<div ng-view></div>
+<!-- build:vendor -->
+<!-- endBuild -->
+<!-- build:js -->
+<!-- endBuild -->
 </body>
 </html>