打包部署静态网站 via Gulp 及 favicon 引入

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

打包一个静态网站，如果用 Webpack，实在有些麻烦。使用 Gulp，就好像它对自己的定义那样：

Gulp

使用 Gulp 需要安装如下依赖：

"devDependencies": {
    "gulp": "^4.0.0",
    "gulp-cache": "^1.1.1",
    "gulp-csso": "^3.0.1",
    "gulp-filter": "^5.1.0",
    "gulp-imagemin": "^5.0.3",
    "gulp-notify": "^3.2.0",
    "gulp-rev": "^9.0.0",
    "gulp-rev-replace": "^0.4.4",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "^3.1.6",
    "imagemin-pngcrush": "^6.0.0"
  }

随后项目根目录下新建 gulpfile.js 文件：

const gulp = require('gulp');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');
const useref = require('gulp-useref');
const filter = require('gulp-filter');
const uglify = require('gulp-uglify');
const csso = require('gulp-csso');
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache');
const notify = require('gulp-notify');

gulp.task('default',  function(){
  const jsFilter = filter('**/*.js', {restore: true});
  const cssFilter = filter('**/*.css', {restore: true});
  const indexHtmlFilter = filter(['**/*', '!**/*.html'], {restore: true});

  const stream = gulp.src('*.html')
    .pipe(useref())
    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())
    .pipe(indexHtmlFilter.restore)
    .pipe(revReplace())
    .pipe(gulp.dest('dist'));

  return stream;

});

//打包图片，新增图片，则需重新执行此任务
gulp.task('images', function() {
  return gulp.src('img/**/*')
    .pipe(cache(imagemin({
      optimizationLevel: 3,
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/img'))
    .pipe(notify({
      message: 'Images task complete'
    }));
});

//用于打包 favicon， 其不改变的情况下，无需执行
gulp.task('favicon', function () {
  return gulp.src('favicon.ico')
    .pipe(cache(imagemin({
      optimizationLevel: 3,
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/'))
    .pipe(notify({
      message: 'Icon task complete'
    }));
});

在 HTML 文件引入的 CSS 和 js 文件的部分添加如下注释，以便 Gulp Task 识别并进行打包任务的执行：

---

打包后生成的 dist 文件目录结构如下：

.
├── css
│   └── combined-82e2623401.css
├── favicon.ico
├── img
│   ├── list1.jpg
│   ├── list2.jpg
│   ├── list3.jpg
│   ├── logo.png
│   └── main.jpg
├── index.html
└── scripts
    └── combined-bf741cdc1d.js

Favicon 的引入，type 要定义为 favicon：

部署到服务器，将打包后生成的 dist 文件夹复制粘贴到服务器的 Tomcat ROOT 目录下：

apache-tomcat-7.0.59/webapps/ROOT

设置好端口号，'remote server ip: port#' 就可以访问了。