使用gullow-if与gullow-useref和gullow-uglify

Using gulp-if with gulp-useref and gulp-uglify

本文关键字：gullow-uglify gullow-useref gullow-if 使用      更新时间：2023-09-26

我想使用gulp-useref将我的所有JavaScript文件连接到一个文件中。

在我的JavaScript文件中，我混合了预缩小和未缩小

我只想丑化尚未缩小的文件（出于构建性能的原因）和https://github.com/jonkemp/gulp-useref#transform-streams表明这是可能的（事实上，这看起来很容易）。以下是我的Gulp任务定义：

gulp.task('compile', function () {
    return gulp.src('index.html')
        .pipe(useref({}, lazypipe().pipe(function() {
            return gulpif(['*.js', '!*.min.js'], uglify());
        })))
        .pipe(gulp.dest(paths.build));
});

这是有效的，因为我得到了一个连接的文件，但未缩小的文件仍然没有缩小（预缩小的文件仍在缩小——正如预期的那样）。

我的代码部分基于此：https://github.com/craigjennings11/gulp-uglifyjs

知道为什么我的文件没有被缩小吗？

参考

  • 狼吞虎咽
  • gullow useref
  • 如果
  • 狼吞虎咽
  • 玻璃管

对于其他遇到此问题的人：我发现一旦我开始将globs放入gulpif的条件参数中的数组中，就必须使用**/通配符模式，例如

gulp.task('compile', function () {
    return gulp.src('index.html')
        .pipe(useref({}, lazypipe().pipe(function() {
            return gulpif(['**/*.js', '!**/*.min.js'], uglify());
        })))
        .pipe(gulp.dest(paths.build));
});

然后它对我来说非常有效。

这里的问题是useref只传递已连接的文件名，而不是已连接的单个文件名。

//in html
<!-- build:js assets/scripts/concat.js --> // <-- this one
<script src="assets/scripts/jquery.min.js"></script> // <-- not this one
<script src="assets/scripts/gsap.min.js"></script> // <-- not this one
<script src="assets/scripts/script1.js"></script> // <-- not this one
<script src="assets/scripts/script2.js"></script> // <-- not this one
<!-- endbuild -->

因此，在管道之后的内容必须应用于整个凹入的文件。

但只要稍微重新排列一下，你就可以做这样的事情：

//in html
<!-- build:js assets/scripts/libs.js -->
<script src="assets/scripts/jquery.min.js"></script>
<script src="assets/scripts/gsap.min.js"></script>
<!-- endbuild -->
<!-- build:js assets/scripts/main.js -->
<script src="assets/scripts/script1.js"></script>
<script src="assets/scripts/script2.js"></script>
<!-- endbuild -->

这样，你就可以使用gullow-if将main.js隔离到uglify:

.pipe(gulpif('main.js', uglify()))

你试过这个吗？

gulp.task('compile', function () {
    return gulp.src('index.html')
        .pipe(useref())
        .pipe(gulpif(['*.js', '!*.min.js'], uglify()))
        .pipe(gulp.dest(paths.build));
});
相关文章：