Multiple targets

[talatbaig]

Hi,

concat allows multiple targets as follows: https://github.com/gruntjs/grunt-contrib-concat#multiple-targets

can we have the same for grunt-purifycss

Thanks

[talatbaig]

Not sure how active this repository is or if it worth a PR but the following works

module.exports = function (grunt) {

    grunt.registerMultiTask('purifycss', 'Clean unnecessary CSS', function () {
        // Merge task-specific and/or target-specific options with these defaults.
        var options = this.options({write: false, info: true});


        // Iterate over all file pairs.
        this.files.forEach(function (f) {

            var src = [];
            f.src.forEach(function (pathPattern) {
                var files = glob.sync(pathPattern);
                console.log("Source Files: ", files);
                src = src.concat(files);
            });

            var styles = [];
            f.css.forEach(function (pathPattern) {
                var style = glob.sync(pathPattern);
                console.log("Style Files: ", style);
                styles = styles.concat(style);
            });

            var pure = purify(src, styles, options);

            grunt.file.write(f.dest, pure);
            grunt.log.writeln('File "' + f.dest + '" created.');
        });
    });

};

[steve-buri]

Thanks @talatbaig for the hint.
I had some troubles so I extended your suggestion for the guys who google this issue:

be sure you have installed both packages:
`npm i glob purify-css'

Add at the top of your Gruntfile.js:

var glob = require("glob");
var purifycss = require("purify-css");

Add next to your grunt.registerTask the grunt.registerMultiTask as already discussed:

grunt.registerMultiTask('purifycss', 'Clean unnecessary CSS', function() {
  // Merge task-specific and/or target-specific options with these defaults.
  var options = this.options({
    write: false,
    info: true
  });

  // Iterate over all file pairs.
  this.files.forEach(function(f) {

    var src = [];
    f.src.forEach(function(pathPattern) {
      var files = glob.sync(pathPattern);
      console.log("Source Files: ", files);
      src = src.concat(files);
    });

    var styles = [];
    f.css.forEach(function(pathPattern) {
      var style = glob.sync(pathPattern);
      console.log("Style Files: ", style);
      styles = styles.concat(style);
    });

    var pure = purifycss(src, styles, options);

    grunt.file.write(f.dest, pure);
    grunt.log.writeln('File "' + f.dest + '" created.');
  });
});

Now your multiple task config inside grunt.initConfig() looks like this (target level is missing compared to the default setup:

purifycss: {
  options: {
    minify: true
  },
  frontend: {
    src: [
      './html/index.html',
      './assets/*.js'
    ],
    css: ['./css/frontend.css'],
    dest: './dist/css/frontend.min.css'
  },
  backend: {
    src: [
      './html/backend-*.html',
      './assets/*.js'
    ],
    css: ['./css/backend.css'],
    dest: './dist/css/backend.min.css'
  },
},

[AmeenShaikh025]

@steve-buri @talatbaig

This is my gruntfile.js, when I execute purify css task I am getting a built.min.css file with no css. but when I concat I have code concated in built.css .

The Output is as follows:

`> grunt purifycss
Running "purifycss:frontend" (purifycss) task
Source Files: [ './index.html' ]
PS G:\Freelance\Asaya-all> grunt purifycss
Running "purifycss:frontend" (purifycss) task
Source Files: [ './index.html' ]
Source Files: [ './dist/built.js' ]
Style Files: []

________________________________________________
|
|   PurifyCSS has reduced the file size by ~ NaN%
|
________________________________________________

File "./dist/css/built.min.css" created.

Done.
`
Any help will be appriciated :)
Thanks

`
var purifycss = require("purify-css");
var glob = require("glob");

module.exports = function (grunt) {
grunt.initConfig({
concat: {
css: {
src: [
'css/bootstrap.min.css',
'css/font-awesome.min.css',
'css/elegant-icons.css',
'css/nice-select.css',
'css/magnific-popup.css',
'css/jquery-ui.min.css',
'css/slicknav.min.css',
'css/slick-theme.css',
'css/slick.css',
'css/style.css',
'css/custom.css',
],
dest: 'dist/built.css',
},
js: {
src: [
'js/jquery-3.3.1.min.js',
'js/bootstrap.min.js',
'js/jquery.nice-select.min.js',
'js/jquery-ui.min.js',
'js/jquery.nicescroll.min.js',
'js/jquery.magnific-popup.min.js',
'js/jquery.slicknav.js',
'js/slick.min.js',
'js/lazysizes.min.js',
'js/modernizr-custom.js',
'js/main.js'
],
dest: 'dist/built.js',
},
},
purifycss: {
options: {
minify: true
},
frontend: {
src: [
'./index.html',
'./dist/built.js'
],
css: ['./css/built.css'],
dest: './dist/css/built.min.css'
},
},
uglify: {
my_targets: {
files: { 'dist/built-min.js' : ['dist/built.js'] }
}
}
});

`

`
// Load the plugins
// grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-purifycss');

// Default tasks
grunt.registerTask('default', ['concat:js','concat:css','uglify']);

grunt.registerMultiTask('purifycss', 'Clean unnecessary CSS', function() {
    // Merge task-specific and/or target-specific options with these defaults.
    var options = this.options({
      write: false,
      info: true
    });
  
    // Iterate over all file pairs.
    this.files.forEach(function(f) {
  
      var src = [];
      f.src.forEach(function(pathPattern) {
        var files = glob.sync(pathPattern);
        console.log("Source Files: ", files);
        src = src.concat(files);
      });
  
      var styles = [];
      f.css.forEach(function(pathPattern) {
        var style = glob.sync(pathPattern);
        console.log("Style Files: ", style);
        styles = styles.concat(style);
      });
  
      var pure = purifycss(src, styles, options);
  
      grunt.file.write(f.dest, pure);
      grunt.log.writeln('File "' + f.dest + '" created.');
    });
  });

};

`