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

时间:2016-01-07 16:04:36

标签: javascript gulp gulp-uglify gulp-useref gulp-if

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

在我的JavaScript文件中,我混合使用预缩小非缩小文件。

我只想对尚未缩小的文件进行uglify(出于构建性能原因),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

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

参考

3 个答案:

答案 0 :(得分:2)

对于遇到此问题的其他人:我发现一旦我开始将我的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));
});

然后它对我来说很完美。

答案 1 :(得分:1)

这里的问题是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 -->

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

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

答案 2 :(得分:0)

你试过这个吗?

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