更新

Question

首先，这是我的完整设置，以便您可以测试它。 https://mega.nz/#!cZQUjZJR!eiDBDtDPKvn2LVsoQk_JfdU4alzrYx4ydSf_kuzkzvE

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

使用gulp build运行构建时，一切正常，除了我的自定义JS inits始终从最终结果中排除的事实。意思是，custom.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') 
如何修复文档中的所有相对路径，因为在开发过程中，它们指的是本地服务器，例如：结果CSS文件中的所有内容都应该具有以下路径url("../，而现在一切都是url("/。

无论你认为哪些可能被删除/优化，请分享一些智慧。

提前谢谢大家！

Answer 1

在index.html中，我可以看到build：js wrapper

</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 -->

它没有考虑行，因此不包括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 -->

将custom.js带到script.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 这一事实，所以基本的html评论是我在我的哈巴狗文件中使用过，不是这样做的充分方法：

<!-- 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

Gulp dist构建优化

2 个答案:

更新