gulp - 在缩小CSS时排除文件

时间:2014-03-12 11:57:27

标签: javascript optimization preprocessor gulp

我是Gulp的新手..我已经能够成功安装和连接并缩小我的.js和.css文件,但是,有一个我要排除的.css文件 - print.css

我按照这里的说明操作:https://www.npmjs.org/package/gulp-ignore在我的本地目录中安装gulp-ignore,并将我的gulpfile.js修改为:

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var exclude = require('gulp-ignore').exclude;


var paths = {
  scriptsNonAuth: ['Non-Auth/javascript/*.js'],
  scriptsAuth: ['Auth/javascript/*.js'],
  stylesNonAuth: ['Non-Auth/css/*.css'],
  stylesAuth: ['Auth/css/*.css'],
};

// CSS Task - Non Authenticated
gulp.task('minify-css-non-auth', function() {
  gulp.src(paths.stylesNonAuth)
    .pipe(minifyCSS(opts))
    .pipe(concat('all.min.css'))
    .pipe(gulp.dest('Non-Auth/css'))
});

// CSS Task - Authenticated
gulp.task('minify-css-auth', function() {
  gulp.src(paths.stylesAuth)
    .pipe(minifyCSS(opts))
    **.pipe(exclude('Auth/css/print.css'))**
    .pipe(concat('all.min.css'))
    .pipe(gulp.dest('Auth/css'))
});

在我的CSS任务中 - 安全,我已经包含.pipe(排除(' Secure / css / print.css'))

当我运行gulp minify-css-secure时,任务完成但是在检查新的all.min.css时,我也看不到print.css的内容。

1 个答案:

答案 0 :(得分:20)

目前还不清楚你想要实现的目标。如果我做对了,你想:

  1. 缩小所有css文件(包括print.css)
  2. 将除print.css以外的所有文件连接到all.min.css
  3. 将minized all.min.css和print.css放入目标文件夹
  4. 要实现这一目标,您可以使用StreamQueue。 (source

    var streamqueue = require('streamqueue');
    
    var paths = {
      scriptsNonAuth: ['Non-Auth/javascript/*.js'],
      scriptsAuth: ['Auth/javascript/*.js'],
      stylesNonAuth: ['Non-Auth/css/*.css'],
      stylesAuth: ['Auth/css/*.css', '!Auth/css/print.css'],
    };
    
    gulp.task('minify-css-auth', function() {
      return streamqueue({ objectMode: true },
        gulp.src(paths.stylesAuth)
            .pipe(minifyCSS(opts))
            .pipe(concat('all.min.css')),
        gulp.src('Auth/css/print.css'))
            .pipe(minifyCSS(opts))
      )
       .pipe(gulp.dest('Auth/css'))
    });
    

    如果您只想排除某些文件,则不需要gulp-ignore。 Gulp支持忽略全局。 只需在路径前加上排除即可 像这样:

    stylesAuth: ['Auth/css/*.css', '!Auth/css/print.css']