Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Up and Running with Grunt

Posted by Manav Misra
Manav Misra
11,778 Points

How can I get cssmin to have 'dist' and 'dev' options similar to uglify in the video?

Here is my gruntfile that was started thanks to the helpful video. Now, I would like cssmin to have an option for 'dist' and 'dev' like uglifyjs did - the purpose is to concatenate the files, but not 'uglify' them so that they are easy to debug.

Creating 'sub-objects' dist and dev works for uglify, but not for cssmin.

module.exports = function(grunt) {

// Configure tasks
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    csslint: {
        options: {
            quiet: true
        },
        src: ['src/css/heartland.css']
    },
    cssmin: {
        target: {
                files: {
                    'css/styles.min.css': ['src/css/*.css']
                }
            }
        },
    jshint: {
        // define the file(s) to lint
        files: ['src/js/heartland.js'],
        // configure JSHint (documented at http://www.jshint.com/docs/)
        options: {
            // more options here if you want to override JSHint defaults
            globals: {
                jQuery: true
            }
        }
    },
    uglify: {
        dist: {
            src: 'src/js/*.js',
            dest: 'js/script.min.js'
        },
        dev: {
            options: {
                beautify: true,
                mangle: false,
                compress: false,
                preserveComments: 'all'
            },

            // Developer's Note: These key-values are inside the dev object!
            src: 'src/js/*.js',
            dest: 'js/script.min.js' 
        }
    },
    watch:{
        js: {
            files: ['src/js/*.js'],
            tasks: ['jshint', 'uglify:dev']
        }
    }
});

// Load the plugins
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// Register task(s)
grunt.registerTask('default', ['cssmin', 'csslint', 'jshint', 'uglify:dev']);
grunt.registerTask('dist', ['uglify:dist']);

};

Brenna Holmes
Brenna Holmes
17,629 Points

Directly from grunt-contrib-cssmin's GitHub page, here's an example:

cssmin: {
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  target: {
    files: {
      'output.css': ['foo.css', 'bar.css']
    }
  }
}

options are what you want to look for, the shorthandCompacting: false should concat the files without minifying them.

However, I'd highly recommend switching over to Sass and using grunt-sass to concat everything, enable a sourcemap, and then just use cssmin to minify the resulting processed CSS file for production.

1 Answer

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

Thanks. Yes, Sass is something I need to learn, and after I brush up some more JavaScript, I will be doing the Sass Basics and CSS to Sass course.

Of course now, the rage seems to moving to PostCSS, which is where Bootstrap 5 will be. But Bootstrap 4 will be all SCSS, and I use Bootstrap for pretty much every site I build, so I need to at least step up to Sass.

Brenna Holmes
Brenna Holmes
17,629 Points

Hampton Catlin's courses, oh man you'll love them. I still don't do indented Sass as much as SCSS, but having 20 different SCSS files that are specific to the thing I'm styling is so much easier than one big giant CSS file. Good luck!