How to minified all js and css files using gruntfile.js in sails.js

Question

I'm quite new to sails and doesnt know much of using the gruntjs file. I've an application that loads quite a number of js and css files. I would like to minified all these js files into 1-2 minified js files, and all css files to 1 minified css file...

As of now, I dont know what to do, I've tried to implement this - How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) in my sailsjs application but didnt print the minified css file when viewed in sourcecodes.

Thanks in advance.

Here's the default gruntfile for sails v0.9.16

module.exports = function (grunt) {
 var cssFilesToInject = [ 'linker/**/*.css' ];
 var jsFilesToInject = [ 'linker/**/*.js' ];
 var templateFilesToInject = [ 'linker/**/*.html' ];
cssFilesToInject = cssFilesToInject.map(function (path) {
  return '.tmp/public/' + path;
});
jsFilesToInject = jsFilesToInject.map(function (path) {
  return '.tmp/public/' + path;
});
templateFilesToInject = templateFilesToInject.map(function (path) {
  return 'assets/' + path;
});

var depsPath = grunt.option('gdsrc') || 'node_modules/sails/node_modules';
 grunt.loadTasks(depsPath + '/grunt-contrib-clean/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-copy/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-concat/tasks');
 grunt.loadTasks(depsPath + '/grunt-sails-linker/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-jst/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-watch/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-uglify/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-cssmin/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-less/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-coffee/tasks');

 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),
copy: {
  dev: {
    files: [
      {
      expand: true,
      cwd: './assets',
      src: ['**/*.!(coffee)'],
      dest: '.tmp/public'
    }
    ]
  },
  build: {
    files: [
      {
      expand: true,
      cwd: '.tmp/public',
      src: ['**/*'],
      dest: 'www'
    }
    ]
  }
},

clean: {
  dev: ['.tmp/public/**'],
  build: ['www']
},

jst: {
  dev: {
    files: {
      '.tmp/public/jst.js': templateFilesToInject
    }
  }
},

less: {
  dev: {
    files: [
      {
      expand: true,
      cwd: 'assets/styles/',
      src: ['*.less'],
      dest: '.tmp/public/styles/',
      ext: '.css'
    }, {
      expand: true,
      cwd: 'assets/linker/styles/',
      src: ['*.less'],
      dest: '.tmp/public/linker/styles/',
      ext: '.css'
    }
    ]
  }
},

coffee: {
  dev: {
    options:{
      bare:true
    },
    files: [
      {
        expand: true,
        cwd: 'assets/js/',
        src: ['**/*.coffee'],
        dest: '.tmp/public/js/',
        ext: '.js'
      }, {
        expand: true,
        cwd: 'assets/linker/js/',
        src: ['**/*.coffee'],
        dest: '.tmp/public/linker/js/',
        ext: '.js'
      }
    ]
  }
},

concat: {
  js: {
    src: jsFilesToInject,
    dest: '.tmp/public/concat/production.js'
  },
  css: {
    src: cssFilesToInject,
    dest: '.tmp/public/concat/production.css'
  }
},

uglify: {
  dist: {
    src: ['.tmp/public/concat/production.js'],
    dest: '.tmp/public/min/production.js'
  }
},

cssmin: {
  dist: {
    src: ['.tmp/public/concat/production.css'],
    dest: '.tmp/public/min/production.css'
  }
},

'sails-linker': {

  devJs: {
    options: {
      startTag: '<!--SCRIPTS-->',
      endTag: '<!--SCRIPTS END-->',
      fileTmpl: '<script src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/**/*.html': jsFilesToInject,
      'views/**/*.html': jsFilesToInject,
      'views/**/*.ejs': jsFilesToInject
    }
  },

  prodJs: {
    options: {
      startTag: '<!--SCRIPTS-->',
      endTag: '<!--SCRIPTS END-->',
      fileTmpl: '<script src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/**/*.html': ['.tmp/public/min/production.js'],
      'views/**/*.html': ['.tmp/public/min/production.js'],
      'views/**/*.ejs': ['.tmp/public/min/production.js']
    }
  },

  devStyles: {
    options: {
      startTag: '<!--STYLES-->',
      endTag: '<!--STYLES END-->',
      fileTmpl: '<link rel="stylesheet" href="%s">',
      appRoot: '.tmp/public'
    },

    files: {
      '.tmp/public/**/*.html': cssFilesToInject,
      'views/**/*.html': cssFilesToInject,
      'views/**/*.ejs': cssFilesToInject
    }
  },

  prodStyles: {
    options: {
      startTag: '<!--STYLES-->',
      endTag: '<!--STYLES END-->',
      fileTmpl: '<link rel="stylesheet" href="%s">',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/index.html': ['.tmp/public/min/production.css'],
      'views/**/*.html': ['.tmp/public/min/production.css'],
      'views/**/*.ejs': ['.tmp/public/min/production.css']
    }
  },

  // Bring in JST template object
  devTpl: {
    options: {
      startTag: '<!--TEMPLATES-->',
      endTag: '<!--TEMPLATES END-->',
      fileTmpl: '<script type="text/javascript" src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/index.html': ['.tmp/public/jst.js'],
      'views/**/*.html': ['.tmp/public/jst.js'],
      'views/**/*.ejs': ['.tmp/public/jst.js']
    }
  },
  devJsJADE: {
    options: {
      startTag: '// SCRIPTS',
      endTag: '// SCRIPTS END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': jsFilesToInject
    }
  },

  prodJsJADE: {
    options: {
      startTag: '// SCRIPTS',
      endTag: '// SCRIPTS END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/min/production.js']
    }
  },

  devStylesJADE: {
    options: {
      startTag: '// STYLES',
      endTag: '// STYLES END',
      fileTmpl: 'link(rel="stylesheet", href="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': cssFilesToInject
    }
  },

  prodStylesJADE: {
    options: {
      startTag: '// STYLES',
      endTag: '// STYLES END',
      fileTmpl: 'link(rel="stylesheet", href="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/min/production.css']
    }
  },
  devTplJADE: {
    options: {
      startTag: '// TEMPLATES',
      endTag: '// TEMPLATES END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/jst.js']
    }
  }
},

watch: {
  api: {

    // API files to watch:
    files: ['api/**/*']
  },
  assets: {
    files: ['assets/**/*'],
    tasks: ['compileAssets', 'linkAssets']
  }
}
});

 grunt.registerTask('default', [
 'compileAssets',
 'linkAssets',
 'watch'
]);

grunt.registerTask('compileAssets', [
 'clean:dev',
 'jst:dev',
 'less:dev',
 'copy:dev',    
 'coffee:dev'
]);

grunt.registerTask('linkAssets', [
'sails-linker:devJs',
'sails-linker:devStyles',
'sails-linker:devTpl',
'sails-linker:devJsJADE',
'sails-linker:devStylesJADE',
'sails-linker:devTplJADE'
]);
grunt.registerTask('build', [
'compileAssets',
'linkAssets',
'clean:build',
'copy:build'
]);
grunt.registerTask('prod', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'sails-linker:prodJsJADE',
'sails-linker:prodStylesJADE',
'sails-linker:devTplJADE'
]);
};

Answer 1

concat: {
  js: {
    src: jsFilesToInject,
    dest: '.tmp/public/concat/production.js'
  },
  css: {
    src: cssFilesToInject,
    dest: '.tmp/public/concat/production.css'
  }
},

This is the portion that does what you want. concat will concatenate JS/CSS files into one huge file each. As you see, there is a src and dest for each of the subtasks. In order for this to work, you need to add the locations of your JS/CSS files to the jsFilesToInject and cssFilesToInject arrays:

 var cssFilesToInject = [ 'linker/**/*.css' ];
 var jsFilesToInject = [ 'linker/**/*.js' ];

Note that * will match any filename, while /**/ will go recursively down the file structure.

Finally, notice that this concat task is only done when you run the prod task. Thus, you will need to execute sails lift --prod in order for your files to compile.

grunt.registerTask('prod', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'sails-linker:prodJsJADE',
'sails-linker:prodStylesJADE',
'sails-linker:devTplJADE'
]);