在Revel Go框架中串联CSS文件

Question

I would like to separate my css into component files just as i'm currently separating js files in to components. There seems to be no default support for this concatenating the css files in revel. Is there a simple way to integrate this in the server startup or build process?

I'm looking for a way to create custom "build/startup" code that is supported in the framework. I want to make sure I don't invent the wheel again, so to speak.

Answer 1

The revel build is pretty hard to hook into. What I have is a separate styles project with its own grunt build file that watches for changes and then packages the css up into the revel public directory.

For grunt see http://gruntjs.com/

This Gruntfile.js should help, it uses bower and sass :

module.exports = function(grunt) {
    grunt.initConfig({   
        watch: {
            files: ['scss/*.scss'],
            tasks: ['sass']
        },
        bower: {
            install: {
                options: {
                    copy: false
                }
            }
        },
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: [
                    {
                        expand: true,
                        cwd: 'scss',
                        src: ['*.scss'],
                        dest: '../project/public/css',
                        ext: '.css'
                    }
                ]
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['bower', 'sass']);
};