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

};

`