简体   繁体   中英

gulp - exclude a file when minifying 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']

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM