CSS和JS缩小不适用于gulp-filter，gulp-csso，gulp-uglify

Question

我正在使用Gulp完成johnpapa关于自动化的课程，并且似乎遇到了一个奇怪的问题：当我试图运行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引用的任务（正常工作）， $ is 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。

资产收集，连接和注入工作精彩。 缩小 - 而不是......

任何想法或指针将不胜感激。

Answer 1

仅供参考，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)); }); 

注意：我还更正了函数名称中'optimize'的拼写，因为我是英文:)

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