webpack - 缩小并合并 html 文件中的所有 js 文件
问题描述
假设我已经
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>
构建/index.html
<head>
<script type="text/javascript" src="js/script.min.js"></script>
</head>
有没有办法让某些实用程序自动读取我的 html 文件,缩小和组合所有 js 脚本条目,然后复制到构建目录。还删除所有这些 js 条目并替换为输出文件?
与 CSS 相同。请指教。
解决方案
您的文件夹结构:
gulpfile.js
/src
index.html
/css
/js
/file1.js
/file2.js
/file3.js
/build
index.html
/css
/js
在src/index.html中使用这些注释:
<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'))
});
在命令行中运行构建任务后,它会自动创建构建文件夹和内部文件。
推荐阅读
- photoshop-script - 无法在 Photoshop 中编写 Blackmagic 插件脚本
- python - 如何在 Python Dataframe 中增加列名和行名?
- mysql - 在 ReactNative 应用程序中显示 MySQL 数据
- javascript - 将括号添加到字符串数组中的最小和最大数字
- laravel - Laravel livewire,渲染性能问题。如何管理数百个组件?
- google-cloud-platform - 无法使用 Google 部署管理器将 iam 策略绑定添加到服务帐户
- ios - 如何为 ios 获取旧版本的 expo 客户端应用程序
- angular-schematics - 角度示意图是否可以针对某个随机绝对路径上的路径?
- c++ - 为什么默认隐藏模板基类的公共成员类型?
- python - 防止matplotlib ginput注册点击小部件按钮