CSS and JS minification doesn't work with gulp

问题:

I'm working thorough johnpapa's course on automation with Gulp and seem to hit a weird wall: when I'm trying to run the CSS and JS concatenation and minification task it fails to do the minification.

This is the task:

gulp.task('optimize', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cssFilter = $.filter(['**/*.css'], {restore: true});
    var jsFilter = $.filter(['**/*.js'], {restore: true});

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore)
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore)
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest(config.indexLocation))
        ;
});

inject is the task that injects css and js references to the index file (works correctly), $ is require('gulp-load-plugins')({lazy: true}) and config.indexFile is index.jsp.

My file structure (unlike the one in the course) is:

- ModuleDir
    - dist
        - css
            - lib.css
            - app.css
        - fonts
        - images
        - js
            - lib.js
            - app.js
    - css
    - js
    - web-app
        - InnerDir
            - index.jsp
            - test.jsp
    - package.json, bower.json, etc. (all the required files)

Basically, index.jsp is processed for CSS and JS library and application assets, which are minified and concatenated into lib.css, lib.js, app.css and app.js. Later all these are injected into a copy of index.jsp which is called test.jsp.

The asset gathering, concatenation and injection works splendidly. The minification - not so much...

Any ideas or pointers will be appreciated.

回答1:

Just for reference useref also changed with v3.0.

Here's my code I got working with the latest versions of gulp-filters and gulp-useref. Might be handy for anyone working through JP's gulp course...

gulp.task('optimise', ['inject', 'fonts', 'images'], function() {
    log('Optimising the JavaScript, CSS, HTML');
       
    // $.useref looks for  <!-- build:js js/app.js -->  in index.html and compiles until  <!-- endbuild -->
    var templateCache = config.temp + config.templateCache.file;
    var cssFilter = $.filter('**/*.css', {restore: true});
    var jsFilter = $.filter('**/*.js', {restore: true});   
       
    return gulp
        .src(config.index)
        .pipe($.plumber())                                        
        .pipe($.inject(gulp.src(templateCache, {read: false}), {
            starttag: '<!-- inject:templates:js -->'                
        }))
        .pipe($.useref({searchPath: './'}))
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore)
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore)                                                                                     
        .pipe(gulp.dest(config.build));

});

Note: I also corrected the spelling of 'optimise' in the function name as I'm English :)

回答2:

Well, apparently filters no longer work that way, so I'm using gulp-if for that. Under the same premises, the working code is:

gulp.task('optimize', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.if('*.css', $.csso()))
        .pipe($.if('**/lib.js', $.uglify({preserveComments: 'license', mangle: false})))
        .pipe($.if('**/app.js', $.ngAnnotate()))
        .pipe($.if('**/app.js', $.uglify()))
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest(config.indexLocation))
        ;
});