CODEWITHSUNDEEP
node.jssassgruntjs
beta208
beta208

Reputation: 627

Getting started on minifying CSS/SCSS with Grunt?

After inheriting a project, I've found the developer was using SCSS and Grunt to Minify his code. I'm new to both, but noticed I had to install grunt-cli locally. I've done so and need to make some edits to the style sheets, but am still working through how to get the scss to minify after making changes.

The structure of the grunt/scss area is:

_ (root folder)
_/css
_/grunt
_/img
_/inc
_/img
_/js
_/misc
_/sass

Inside _/grunt is:

gruntfile.js
npm-debug.log
package.json

Steveax helped me figure our that I was missing the local grunt setup: 

npm install

I've found the SCSS files inside the _/scss folder and am comfortable editing them for the purposes of updating styles; however, after saving one I've noticed that they don't automatically update the minified css in the _/css folder, and am left looking through the files and documentation for a solution. I think an experienced eye will know what command I've missed.

Here is an example of an scss file, _/sass/common.scss, I'd like to be able to save and replace the css equivalent, _/css/common.css

EDIT: Per the help of Robert Levy (below), it seems I just need to run Grunt after making changes.

(x-See edit above) Do I simply run uglify from the _ directory?

 uglify /sass/common.scss -o /css/common.css -p 1

Inside of package.json is:

{
  "name": "exampletheme.com",
 "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "^0.3.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-imagemin": "^0.5.0",
    "grunt-contrib-watch": "^0.6.0",
    "grunt-contrib-compass": "^0.7.2",
    "grunt-contrib-sass": "^0.7.3"
  }
}

Inside of _/grunt/gruntfile.js is:

module.exports = function(grunt) {

// All configuration goes here 
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
        // Configuration for concatinating files goes here.
        dist: {
            src: [
                    '../js/libs/owl.carousel.js',
                    '../js/libs/jquery.actual.js',
                    '../js/libs/chosen.jquery.js',
                    '../js/libs/jquery.parallax.js',
                    '../js/src/common.js'  
            ],
            dest: '../js/pro/global.js',
        },
    },

    uglify: {
        build: {
            src: '../js/pro/global.js',
            dest: '../js/pro/global.min.js',
        },
    },


    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: '../img/src/',
                src: ['**/*.{png,jpg,gif}'],
                dest: '../img/pro/'
            }]
        }
    },

    compass: {
        dev: {
            options: {              
                sassDir: '../sass',
                cssDir: '../css',
                fontsDir: '../fonts',
                imagesDir: '../img/',
                images: '../img/',
                javascriptsDir: '../js/pro',
                //environment: 'development',
                outputStyle: 'compressed',
                relativeAssets: false,
                httpPath: '.',
            }
        },
    },

    watch: {
        scripts: {
            files: ['../js/**/**.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            },
        },
        images: {
            files: ['../img/src/**.{png,jpg,gif}'],
            tasks: ['imagemin'],
            options: {
                spawn: false,
            }
        },
        compass: {
            files: ['../**/*.{scss,sass}'],
            tasks: ['compass:dev'],
        }

    },

    svgstore: {
        defaults: {
            options: {
                prefix : 'icon-',
            },
            files: {
                '../img/svg-defs.svg': ['../img/svg/*.svg']
            }
        }
    },


});

// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');

// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);

};

Upvotes: 0

Views: 1638

Answers (1)

Robert Levy
Robert Levy

Reputation: 29073

just run grunt and it will invoke the default task which you can see in the last line of your gruntfile.js will in turn run concat, uglify, compass, svgstore, and watch.

compass is the one which is compiling the scss and minifying it.

the watch task is interesting because it tells grunt to continue running, keep an eye on your files, and recompile when things change.

Upvotes: 2

Related Questions