How to stop Grunt.js from minifying my Yeoman webapp

Question

I'm trying to build my webapp using generator-webapp(sass w/compass + boostrap-sass). However, I don't want it to minify any of the files. (At least just the css, but ideally nothing will be minified). At my job I'll be doing a bit of backend that is done in .NET/C# as well as but mostly front end, hence why I need the HTML to not be minified so I can import the front end into Visual Studio and be able to manipulate it.

Currently, I'm trying to configure my gruntfile to stop the minification but I'm having a difficult time finding a solution.

Here is my gruntfile (it's just the default one that is generated)

// Generated on 2014-02-27 using generator-webapp 0.4.7
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {

// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);

// Define the configuration for all the tasks
grunt.initConfig({

    // Project settings
    yeoman: {
        // Configurable paths
        app: 'app',
        dist: 'dist'
    },

    // Watches files for changes and runs tasks based on the changed files
    watch: {
        js: {
            files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
            tasks: ['jshint'],
            options: {
                livereload: true
            }
        },
        jstest: {
            files: ['test/spec/{,*/}*.js'],
            tasks: ['test:watch']
        },
        gruntfile: {
            files: ['Gruntfile.js']
        },
        compass: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
            tasks: ['compass:server', 'autoprefixer']
        },
        styles: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
            tasks: ['newer:copy:styles', 'autoprefixer']
        },
        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '<%= yeoman.app %>/{,*/}*.html',
                '.tmp/styles/{,*/}*.css',
                '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
            ]
        }
    },

    // The actual grunt server settings
    connect: {
        options: {
            port: 9000,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    '<%= yeoman.app %>'
                ]
            }
        },
        test: {
            options: {
                port: 9001,
                base: [
                    '.tmp',
                    'test',
                    '<%= yeoman.app %>'
                ]
            }
        },
        dist: {
            options: {
                open: true,
                base: '<%= yeoman.dist %>',
                livereload: false
            }
        }
    },

    // Empties folders to start fresh
    clean: {
        dist: {
            files: [{
                dot: true,
                src: [
                    '.tmp',
                    '<%= yeoman.dist %>/*',
                    '!<%= yeoman.dist %>/.git*'
                ]
            }]
        },
        server: '.tmp'
    },

    // Make sure code styles are up to par and there are no obvious mistakes
    jshint: {
        options: {
            jshintrc: '.jshintrc',
            reporter: require('jshint-stylish')
        },
        all: [
            'Gruntfile.js',
            '<%= yeoman.app %>/scripts/{,*/}*.js',
            '!<%= yeoman.app %>/scripts/vendor/*',
            'test/spec/{,*/}*.js'
        ]
    },


    // Mocha testing framework configuration options
    mocha: {
        all: {
            options: {
                run: true,
                urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
            }
        }
    },




    // Compiles Sass to CSS and generates necessary files if requested
    compass: {
        options: {
            sassDir: '<%= yeoman.app %>/styles',
            cssDir: '.tmp/styles',
            generatedImagesDir: '.tmp/images/generated',
            imagesDir: '<%= yeoman.app %>/images',
            javascriptsDir: '<%= yeoman.app %>/scripts',
            fontsDir: '<%= yeoman.app %>/styles/fonts',
            importPath: '<%= yeoman.app %>/bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '/images/generated',
            httpFontsPath: '/styles/fonts',
            relativeAssets: false,
            assetCacheBuster: false
        },
        dist: {
            options: {
                generatedImagesDir: '<%= yeoman.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    },

    // Add vendor prefixed styles
    autoprefixer: {
        options: {
            browsers: ['last 1 version']
        },
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/styles/',
                src: '{,*/}*.css',
                dest: '.tmp/styles/'
            }]
        }
    },

    // Automatically inject Bower components into the HTML file
    'bower-install': {
        app: {
            html: '<%= yeoman.app %>/index.html',
            ignorePath: '<%= yeoman.app %>/'
        }
    },

    // Renames files for browser caching purposes
    rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/images/{,*/}*.{gif,jpeg,jpg,png,webp}',
                    '<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
                ]
            }
        }
    },

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: '<%= yeoman.app %>/index.html'
    },

    // Performs rewrites based on rev and the useminPrepare configuration
    usemin: {
        options: {
            assetsDirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
    },

    // The following *-min tasks produce minified files in the dist folder
    imagemin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.{gif,jpeg,jpg,png}',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    svgmin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.svg',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    htmlmin: {
        dist: {
            options: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeCommentsFromCDATA: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true,
                removeRedundantAttributes: true,
                useShortDoctype: true
            },
            files: [{
                expand: true,
                cwd: '<%= yeoman.dist %>',
                src: '{,*/}*.html',
                dest: '<%= yeoman.dist %>'
            }]
        }
    },

    // By default, your `index.html`'s <!-- Usemin block --> will take care of
    // minification. These next options are pre-configured if you do not wish
    // to use the Usemin blocks.
    // cssmin: {
    //     dist: {
    //         files: {
    //             '<%= yeoman.dist %>/styles/main.css': [
    //                 '.tmp/styles/{,*/}*.css',
    //                 '<%= yeoman.app %>/styles/{,*/}*.css'
    //             ]
    //         }
    //     }
    // },
    // uglify: {
    //     dist: {
    //         files: {
    //             '<%= yeoman.dist %>/scripts/scripts.js': [
    //                 '<%= yeoman.dist %>/scripts/scripts.js'
    //             ]
    //         }
    //     }
    // },
    // concat: {
    //     dist: {}
    // },

    // Copies remaining files to places other tasks can use
    copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*',
                    'bower_components/' + (this.includeCompass ? 'sass-' : '') + 'bootstrap/' + (this.includeCompass ? 'fonts/' : 'dist/fonts/') +'*.*'
                ]
            }]
        },
        styles: {
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
        }
    },


    // Generates a custom Modernizr build that includes only the tests you
    // reference in your app
    modernizr: {
        devFile: '<%= yeoman.app %>/bower_components/modernizr/modernizr.js',
        outputFile: '<%= yeoman.dist %>/bower_components/modernizr/modernizr.js',
        files: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            '!<%= yeoman.dist %>/scripts/vendor/*'
        ],
        uglify: true
    },

    // Run some tasks in parallel to speed up build process
    concurrent: {
        server: [
            'compass:server',
            'copy:styles'
        ],
        test: [
            'copy:styles'
        ],
        dist: [
            'compass',
            'copy:styles',
            'imagemin',
            'svgmin'
        ]
    }
});


grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'concurrent:server',
        'autoprefixer',
        'connect:livereload',
        'watch'
    ]);
});

grunt.registerTask('server', function () {
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
    grunt.task.run(['serve']);
});

grunt.registerTask('test', function(target) {
    if (target !== 'watch') {
        grunt.task.run([
            'clean:server',
            'concurrent:test',
            'autoprefixer',
        ]);
    }

    grunt.task.run([
        'connect:test',
        'mocha'
    ]);
});

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'modernizr',
    'rev',
    'usemin',
    'htmlmin'
]);

grunt.registerTask('default', [
    'newer:jshint',
    'test',
    'build'
]);
};

Thanks for any help!

Answer 1

I had the same desire to modify the Yeoman webapp build so that the results (javascript, css, and index.html) were not minified. My approach was to try and modify only the Gruntfile. I wanted to avoid making any changes directly by hand to the index.html structure already provided by Yeoman. And I wanted to avoid making any post-build manual changes to the resultant build files (too tedious). Just wanted to build and go - no minification.

Here's what I've come up with, in case it might be helpful to others. I narrowed this down to making two changes to the Gruntfile, as follows.

First, I modified the UseminPrepare configuration to concatenate but not uglify js files or minify css files:

In UseminPrepare, I changed this:

js: ['concat', 'uglifyjs'],
css: ['cssmin']

To this:

js: ['concat'],
css: ['cssmin']

Second, I modified the build task series by eliminating the 'uglify' and 'htmlmin' tasks, but somewhat paradoxically you must leave the 'UseminPrepare' and 'usemin' tasks in the series. By doing so, you leverage usemin for concatenation and copying but avoid having it minify.

Change the build task by commenting out 'uglify' and 'htmlmin' (don't forget to be sure the usemin task, now last in the series, does not end with a comma :)):

grunt.registerTask('build', [
 'clean:dist',
 'bowerInstall',
 'useminPrepare',
 'concurrent:dist',
 'autoprefixer',
 'concat',
 'ngmin',
 'copy:dist',
 'cdnify',
 'cssmin',
 //'uglify',
 'rev',
 'usemin'
 //'htmlmin'
]);

Now simply run grunt build and it's done. Worked for me.

I hope that might be helpful to someone else.