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: 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.

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.

• javascript
• optimization
• preprocessor
• gulp

1 Answer 1

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']