gulp - 缩小CSS时排除文件 [英] gulp - exclude a file when minifying CSS

问题描述

我已经能够成功地安装和连接并缩小我的.js和.css文件，但是，我想排除一个.css文件 - print.css

我遵循以下指示： https：//www.npmjs .org / package / gulp-ignore 将gulp-ignore安装在我的本地目录中，并将我的gulpfile.js修改为：

  //包含gulp 
 var gulp = require（'gulp'）; 
 
 //包含我们的插件
 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任务 - 非认证
 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任务 - 认证
 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（exclude（'Secure / css / print .css'））

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

解决方案

目前还不清楚你试图达到什么目的。如果我理解正确，您希望：

1. 缩小所有css文件（包括print.css）
   
2. 将除print.css以外的所有文件都转换为all.min.css


3. 将all.min.css和print.css缩小到目标文件夹中

为此，您可以使用 StreamQueue 。 （来源）

  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']，
}; 
 $ b 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'] 
  

Im new to Gulp.. I have been able to successfully install and concatenate and minify my .js and .css files, however, there is one .css file which i want to exclude - print.css

Ive followed the instructions here: https://www.npmjs.org/package/gulp-ignore install gulp-ignore in my local directory, and modified my gulpfile.js to:

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

Within my CSS Task - Secure, i have included .pipe(exclude('Secure/css/print.css'))

When i run gulp minify-css-secure, the task completes but upon inspecting the new all.min.css, i cant see the contents of print.css within there too.

解决方案

It's unclear what you are trying to achieve. If I get it right, you want to:

1. minify all css files (including print.css)
2. concat all files except print.css into all.min.css
3. put minified all.min.css and print.css into destination folder

To achieve that, you can use 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'))
});

If you want to just exclude some files, you don't need gulp-ignore. Gulp supports ignore globs. Just prefix the path to exclude with bang.
Like this:

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

这篇关于gulp - 缩小CSS时排除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！