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 引用注入索引文件的任务（正常工作），$ 是 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

好吧，显然过滤器不再那样工作，所以我使用 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))
        ;
});

Answer 2

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

});

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

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

CSS and JS minification doesn't work with gulp-filter, gulp-csso, gulp-uglify

javascript

minify

gulp

gulp-filter

gulp-uglify