Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

message: 'Unexpected token: punc (.)', while using uglify in grunt

Goal

My goal is to concatenate all my css,js files and minify all of them. I can minify my concat.js, but I'm struggling trying to minify my concat.css.


Gruntfile.js

module.exports = function(grunt) {
    "use strict";

    grunt.initConfig({

        concat: {

            js: {
                src: [

                    'js/bootstrap.min.js',
                    'js/jquery-1.10.2.min.js',

                    'js/jquery.easypiechart.min.js',
                    'js/jquery.isotope.min.js',
                    'js/jquery.magnific-popup.min.js',
                    'js/waypoints.min.js',
                    'js/respond.min.js',
                    'js/jquery.vegas.min.js',
                    'js/modernizr-2.6.2.min.js',
                    'js/jquery.nav.js',
                    'js/html5shiv.js',
                    'js/jquery.scrollTo.js',
                    'js/jquery.sticky.js',
                    'js/jquery.validate.js',
                    'js/main.js',

                ],
                dest: 'dist/concat.js'
            },

            css: {
                src: [


                    'css/magnific-popup.css',
                    'css/main.css',
                    'css/xl.css',
                    'css/lg.css',
                    'css/md.css',
                    'css/sm.css',
                    'css/xs.css',
                    'css/print.css',
                    'css/bootstrap.min.css',
                    'css/font-awesome.min.css',

                ],
                dest: 'dist/concat.css'
            }
        },

        watch: {

            js: {

                files: ['js/*.js'],
                task: ['concat:js']
            },

            css: {
                files: ['css/*.css'],
                task: ['concat:css']
            }
        },

        uglify: {

            js: {
                files: {
                    'dist/minified.js': ['dist/concat.js']
                }
            },

            css: {
                files: {
                    'dist/minified.css': ['dist/concat.css']
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['concat', 'uglify']);

};

Result

I concatenate all my css and js files succesfully, and they're generated at :

  • dist/concat.js
  • dist/concat.css

Then, I can also minify my concat.js with no problem, but I'm struggling trying to minify my concat.css.

I kept getting this error in the bottom of my Terminal :

Running "uglify:css" (uglify) task
{ message: 'Unexpected token: punc (.)',
  filename: 'concat.css',
  line: 4,

and line4 is just the beginning of my class : .mfp-bg {

Can someone please give me a little push here ? Also, should I perform minify after concatenation or the other way around ? Is there a better way to do this ?

like image 451
code-8 Avatar asked Mar 16 '23 02:03

code-8


1 Answers

uglify is for minimising JavaScript only, not CSS.

If you want to minimise CSS you can use the cssmin task for Grunt instead.

like image 197
Andy Avatar answered Apr 25 '23 12:04

Andy