缩小并合并 html 文件中的所有 js 文件答案

【问题标题】：minify and combine all js files from an html file缩小并合并 html 文件中的所有 js 文件
【发布时间】：2018-11-17 16:39:32
【问题描述】：

假设我已经

src/index.html

<head>
<script type="text/javascript" src="js/file1.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
<script type="text/javascript" src="js/file3.js"></script>
</head>

build/index.html

<head>
<script type="text/javascript" src="js/script.min.js"></script>
</head>

有没有办法让一些实用程序自动读取我的 html 文件，缩小和合并所有 js 脚本条目，并复制到构建目录。还要删除所有这些 js 条目并替换为输出文件？

与 CSS 相同。请指教。

【问题讨论】：

参见 gulp-useref 例如：github.com/jonkemp/gulp-useref 和 stackoverflow.com/questions/21072880/…

标签： webpack gulp minify google-closure-compiler bundling-and-minification

【解决方案1】：

您的文件夹结构：

gulpfile.js
/src
    index.html
    /css
    /js
       /file1.js
       /file2.js
       /file3.js

/build
    index.html
    /css
    /js

在 src/index.html 中使用这些 cmets：

<head>
  <!--build:js js/scripts.min.js -->
  <script type="text/javascript" src="js/file1.js"></script>
  <script type="text/javascript" src="js/file2.js"></script>
  <script type="text/javascript" src="js/file3.js"></script>
  <!-- endbuild -->

  <!--build:css css/styles.min.css-->
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="css/mdb.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <!--endbuild-->
</head>

在gulpfile.js中写下这段代码：

var gulp = require('gulp');
// This plugin concatenates any number of CSS and JavaScript files into a single file
var useref = require('gulp-useref');
// Requires the gulp-uglify plugin for minifying js files
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
// Requires the gulp-cssnano plugin for minifying css files
var cssnano = require('gulp-cssnano')


gulp.task('build', function () {
    return gulp.src('app/*.html')
      .pipe(useref())
      // Minifies only if it's a JavaScript file
      .pipe(gulpIf('*.js', uglify()))
      // Minifies only if it's a CSS file
      .pipe(gulpIf('*.css', cssnano()))
      .pipe(gulp.dest('dist'))
});

在命令行运行构建任务后，它会自动创建构建文件夹和内部文件。

【讨论】：