Grunt workflow for sass & coffee
Here's my workflow for Grunt for a simple frontend. Can be used with WordPress.
Package.json
{
    "name" : "random-website",
    "version" : "1.0.0",
    "devDependencies" : {
        "grunt" :                       "latest",
        "grunt-contrib-cssmin":         "*",
        "grunt-contrib-sass":           "*",
        "grunt-contrib-uglify":         "*",
        "grunt-contrib-imagemin":       "*",
        "grunt-contrib-watch":          "*",
        "grunt-contrib-jshint":         "*",
        "grunt-contrib-coffee":         "*",
        "grunt-cssc":                   "*",
        "grunt-htmlhint":               "*",
        "grunt-rsync":                  "*",
        "matchdep":                     "*"
    }
}Gruntfile.js
'use strict';
module.exports = function(grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    grunt.initConfig({
        appDir: './assets',
        sassDir: '<%= appDir %>/stylesheets/sass',
        cssDir: '<%= appDir %>/stylesheets/css',
        coffeeDir: '<%= appDir %>/scripts/coffee',
        jsLibsDir: '<%= appDir %>/scripts/libs',
        jsDir: '<%= appDir %>/scripts/js',
        pkg: grunt.file.readJSON("package.json"),
        // watch for changes and trigger compass, jshint, uglify and livereload
        watch: {
            js: {
                files: '<%= jshint.all %>',
                tasks: ['uglify']
            },
            coffee: {
                files: ['<%= coffeeDir %>/*'],
                tasks: ['coffee']
            },
            css: {
                files: ['<%= sassDir %>/*.scss'],
                tasks: ['sass'],
                options: {
                    livereload: true
                }
            }
        },
        sass: {
            dist: {
                options: {
                    // nested, compact, compressed, expanded
                    style: 'expanded'
                },
                files: {
                    '<%= cssDir %>/main.css': '<%= sassDir %>/main.scss'
                }
            }
        },
        // javascript linting with jshint
        jshint: {
            all: [
                'Gruntfile.js'
            ]
        },
        // uglify to concat, minify, and make source maps
        uglify: {
            dist: {
                files: {
                    '<%= jsDir %>/plugins.js': [
                        '<%= jsLibsDir %>/*.js'
                    ],
                    '<%= jsDir %>/scripts.js': [
                        '<%= jsDir %>/scripts.js'
                    ]
                }
            }
        },
        // uglify to concat, minify, and make source maps
        coffee: {
            compile: {
                files: {
                    '<%= jsDir %>/scripts.js': [
                        '<%= coffeeDir %>/*',
                    ]
                }
            }
        },
        // image optimization
        imagemin: {
            dist: {
                options: {
                    optimizationLevel: 7,
                    progressive: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= appDir %>/images/',
                    src: '**/*',
                    dest: '<%= appDir %>/images/'
                }]
            }
        },
        // deploy via rsync
        deploy: {
            options: {
                args: ["--verbose"],
                exclude: ['.git*', '.sass-cache*', "*.scss", 'node_modules', 'Gruntfile.js', 'package.json', '.DS_Store', 'README.md'],
                recursive: true
            },
            production: {
                options: {
                    src: "./",
                    dest: "~/public_html/",
                    host: "figursky@somehost.com",
                    syncDestIgnoreExcl: true
                }
            }
        },
    });
    // rename tasks
    grunt.renameTask('rsync', 'deploy');
    // register task
    grunt.registerTask('default', ['watch']);
};Written by Eugene F
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
 #Js 
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#

 
 
 
 
