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

Question

I want to use gulp-useref to concatenate all of my JavaScript files into one.

Within my JavaScript files I have a mixture of pre-minified and non-minified files.

I would like to only uglify files which are not already minified (for build performance reasons) and https://github.com/jonkemp/gulp-useref#transform-streams suggests that this is possible (in fact, it looks easy). The following is my Gulp task definition:

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));
});

This works, in that I get a concatenated file but the non-minified files remain unminified (pre-minified files are still minified -- as expected).

My code is partially based on this: https://github.com/craigjennings11/gulp-uglifyjs

Any idea why my files are not being minified?

References

score 2 · Answer 1 · answered Jun 09 '18 at 02:14

For anyone else encountering this problem: I found I had to use the **/ wildcard pattern once I started putting my globs inside an array in the condition parameter of the gulpif e.g.

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));
});

Then it worked perfectly for me.

score 1 · Answer 2 · answered May 05 '17 at 20:31

The problem here is that useref is only passing through the concatinated file names, not the individual file names that get concatinated.

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

So what ever you pipe after will have to be applied to the entire concatinated file.

But with a little rearranging you could do something like this:

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

That way you can use gulp-if to isolate main.js to uglify:

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

score 0 · Answer 3 · answered Jan 11 '16 at 16:00

0

Have you tried this?

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

answered Jan 11 '16 at 16:00

jonkemp

86
2

Hey, yes, that was my original code but as far as I can tell I just get one concatenated file at that stage, so it just minifies everything. – atwright147 Jan 12 '16 at 12:48
Isn't that what you want? The gulp-useref plugin concatenates the files by default, so you would need to use the no-concat option to split them out and then concatenate them again somewhere else. – jonkemp Jan 12 '16 at 20:20
Ultimately, yes. However, I want to process some of those files prior to the concatenation -- hence the use of the transform stream (https://github.com/jonkemp/gulp-useref#transform-streams) – atwright147 Jan 13 '16 at 11:07
the docs suggest that transform streams are for this very purpose ("Transform assets before concat.") -- am I misunderstanding? – atwright147 Jan 21 '16 at 17:17
Minification doesn't really fit that use case though. That use case is more for something like transpiling css or javascript files before concatenating them. As you can see, the gulp task above is a much simpler way to do it, if you just want minification. – jonkemp Jan 22 '16 at 17:29

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

3 Answers3