Минимизация CSS и JS не работает с gulp-filter, gulp-csso, gulp-uglify

Я тщательно прорабатываю курс Джоннапапа по автоматизации с Gulp и, похоже, наткнулся на странную стену: когда я пытаюсь выполнить задачу конкатенации и минимизации CSS и JS, она не выполняет минификацию.

Это задача:

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 это задача, которая вставляет css и js ссылки в индексный файл (работает правильно), $ является require('gulp-load-plugins')({lazy: true}) а также config.indexFile является index.jsp,

Моя файловая структура (в отличие от той, что в курсе):

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

По сути, index.jsp обрабатывается для библиотечных и прикладных ресурсов CSS и JS, которые минимизируются и объединяются в lib.css, lib.js, app.css и app.js. Позже все это внедряется в копию index.jsp, которая называется test.jsp.

Сбор активов, объединение и впрыск работают великолепно. Минификация - не так много...

Любые идеи или указатели будут оценены.

Источник

2 ответа

Решение

Ну, очевидно, фильтры больше не работают таким образом, поэтому я использую gulp-if для этого. В тех же условиях рабочий код:

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))
        ;
});
Источник

Просто для справки useref также изменен с v3.0.

Вот мой код, который я получил, работая с последними версиями gulp-filters и gulp-useref. Может быть пригодится всем, кто работает по курсу Глп Джп...

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

});

Примечание: я также исправил написание слова "optimize" в названии функции, так как я англичанин:)

Источник
Другие вопросы по тегам