GULP DIST构建优化

Question

首先，这是我的完整设置，因此您可以对其进行测试。https://mega.nz/#！czqujzjr！

一切正常，但是我有两个我不知道如何解决的问题。

1. 使用gulp build运行构建时，一切正常，除了我的自定义JS Inits总是被排除在最终结果之外的事实。含义，custom.js文件的内容在js/scripts.js文件中找不到。我每次都必须手动添加它，这很烦人。

   <!-- build:js js/scripts.js --> script(src='js/jquery-3.2.1.slim.min.js') script(src='js/popper.min.js') script(src='js/bootstrap.min.js') script(src='js/highlight.js') script(src='js/clipboard.min.js') script(src='js/custom.js') <!-- endbuild -->

2. 我如何修复文档中的所有相对路径，因为开发时，它们是指本地服务器，例如结果CSS文件中的所有内容都应具有以下路径url("../，而现在所有内容均为url("/。

以及您认为可能被删除/优化的什么，请分享一些智慧。

预先感谢大家！

Answer 1

在index.html中，我可以看到构建：JS包装器

</div><!-- build:js js/scripts.js -->
    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/custom.js"></script><!-- endbuild -->

它不考虑使用<!-- endbuild -->的行，因此不包括custom.js

将其更改为

</div>
    <!-- build:js js/scripts.js -->
    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/custom.js"></script>
    <!-- endbuild -->

将custy.js带到脚本

更新

使用此=操作员编写线路断路

= 'n'
<!-- build:js js/scripts.js -->
script(src='js/jquery-3.2.1.slim.min.js')
script(src='js/popper.min.js')
script(src='js/bootstrap.min.js')
script(src='js/highlight.js')
script(src='js/clipboard.min.js')
script(src='js/custom.js') 
= 'n'
<!-- endbuild -->

Answer 2

所以，长话短说，我必须使用 Gulp-Replace 才能整理相对和绝对路径问题。因此，我添加了一项小型GULP任务来处理此操作：

gulp.task('fixCssPath', function(){
  gulp.src(['./dist/css/styles.css'])
    .pipe(replace('/fonts/', '../fonts/'))
    .pipe(gulp.dest('./dist/css/'));
});

另一个问题来自以下事实： gulp-useref 不了解我用于模板的 pugjs 文件不是足够的方法：

<!-- build:js js/scripts.js -->
script(src='js/jquery-3.2.1.slim.min.js')
script(src='js/popper.min.js')
script(src='js/bootstrap.min.js')
script(src='js/highlight.js')
script(src='js/clipboard.min.js')
script(src='js/custom.js')
<!-- endbuild -->

这样做的正确方法是使用pugjs本机注释，但没有破折号(//(，因为与仪表板一起使用它，简单地指出，在我的pugjs中发表评论，然后将其从最终结果中删除，因此Useref不起作用。因此，如果您使用的是PUGJS：

，这是正确的方法

// build:js js/scripts.js
script(src='js/jquery-3.2.1.slim.min.js')
script(src='js/popper.min.js')
script(src='js/bootstrap.min.js')
script(src='js/highlight.js')
script(src='js/clipboard.min.js')
script(src='js/custom.js')
// endbuild