monify-and-concat-with-grunt.md

Minify and concat css/js with grunt

Sources

• https://www.youtube.com/watch?v=TMKj0BxzVgw&ab_channel=LearnCode.academy
• https://stackoverflow.com/questions/15529583/grunt-uglify-css-files-with-uglifyjs
• https://stackoverflow.com/questions/21675011/grunt-cssmin-for-min-css-files
• https://www.youtube.com/watch?v=Gkv7pA0PMJQ&list=LL&index=2&t=497s&ab_channel=TechCBT

Installation

• npm install -g grunt-cli
• npm i --save grunt-contrib-concat
• npm i --save grunt-contrib-uglify
• npm i --save grunt-contrib-cssmin

Setup

• touch Gruntfile.js

module.exports = function( grunt ){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
		uglify: {
			options: {
				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
			},
			dist: {
				files: {
					'public/js/<%= pkg.name %>.min.js': ['public/js/*']
				}
			}
    	},
        concat: {
            css: {
                src: ['public/css/*'],
                dest: 'public/css/main.css'
            }
        },
        cssmin: {
            minify: {
              expand: true,
              src: ['public/css/main.css', '*.min.css'],
              dest: '',
              ext: '.css'
            }
        }
	});
	grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.registerTask('default', ['uglify', 'concat', 'cssmin']);
}

Run

• grunt