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

Я тщательно изучаю курс johnpapa по автоматизации с помощью 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.

Сбор активов, конкатенация и инъекция работают великолепно. Минификация - не очень...

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


javascript gulp minify gulp-uglify gulp-filter
person st2rseeker    schedule 16.09.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

});

Примечание. Я также исправил написание «оптимизировать» в названии функции, так как я англичанин :)

person Paul Hale    schedule 29.02.2016
comment
Идеальный! Как раз то, что я искал :) - person Chris Knight; 27.06.2016

arrow_upward
3
arrow_downward

Ну, очевидно, фильтры больше не работают таким образом, поэтому я использую для этого 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))
        ;
});
person st2rseeker    schedule 20.09.2015