CSS和JS缩小不适用于gulp-filter，gulp-csso，gulp-uglify [英] CSS and JS minification doesn't work with gulp-filter, gulp-csso, gulp-uglify

问题描述

我正在使用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.in dexLocation））
; 
}）; 
  

注入是注入css和js引用索引文件（正常工作）， $ 是 require（'gulp-load-plugins'）（{lazy：true}）和 config.indexFile 是 index.jsp 。

我的文件结构（与课程中的不同）是：

   -  ModuleDir 
  - dist 
  -  css 
  -  lib.css 
  -  app.css 
  - 字体
  - 图像
  -  js 
  -  lib.js 
  -  app.js 
  -  css 
  -  js 
  -  web-app 
  -  InnerDir 
  -  index.jsp 
  -  test.jsp 
  -  package.json，bower.json等（所有必需的文件）
  

基本上，为CSS和JS库和应用程序资产处理index.jsp，这些资源被缩小并连接到lib.css，lib.js，app.css和app.js.后来，所有这些都被注入了一个名为test.jsp的index.jsp副本。

资产收集，连接和注入工作非常出色。缩小 - 不是那么多...

任何想法或指针都将被赞赏。

解决方案

好吧，显然过滤器不再以这种方式工作，所以我使用gulp-如果是这样的话。在相同的前提下，工作代码是：

  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））
 ; 
}）; 
  

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.

解决方案

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

这篇关于CSS和JS缩小不适用于gulp-filter，gulp-csso，gulp-uglify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！