CODEWITHSUNDEEP
javascriptcsssassgruntjs
gempir
gempir

Reputation: 1901

grunt sass and js autoloader

I've tried a few things but can't come to a good solution. I'm using grunt to compile my sass and minify my javascript.

Is it possible to autoload every .sass file and every .js file in a specific directory?

I've tried stuff like this

sass: {
            options: {
                sourceMap: false
            },
            dist: {
                src: 'src/sass/**/*.sass',
                dest: 'dist/css/style.css'
            }
        }

but this will only load the very first sass file. I'm not sure what concat even does but I tried it aswell and didn't find the solution I was looking for.

Basicly all files in the folder sass/ should be compiled to 1 big style.css file the same with javascript.

Sure I could manually import each file in a main.sass file or so, but I would love a autoload function so I don't get lazy and don't create new files because I would have to add them.

edit:

So with this

files: [{
                    expand: true,
                    cwd: "src/sass/",
                    src: ["**/*.sass"],
                    dest: "dest/css",
                    ext: ".css"
                }]

I can actually do what I want. The problem is my mixins get loaded too late and it's thorwing an error because it doesn't find the mixin I wanted to include.

Upvotes: 0

Views: 174

Answers (1)

Kenney
Kenney

Reputation: 9093

This is a format to generate a single output file from multiple source files:

concat: {
    whatever: {
        options: { separator: '\n' },
        src: ['src/sass/**/*.sass'],
        dest: 'build/tmp.sass'   // make sure the temporary build/ dir exists!
    }
}

It only works on tasks supporting combining multiple files; in this case the grunt-contrib-concat task. It produces dist/css/sass.tmp, which you will need to process with the sass task:

sass: {
    dist: {
        files: [{        
            src: 'build/tmp.sass',
            dest: 'dist/css/style.css'
        }]
    }
}

You would make sure they are run in sequence with something like this:

grunt.registerTask( 'default', ['concat', 'sass'] ); // add your uglify/cssmin here

However, I don't recommend this, because the order of the sass files is uncontrollable, and it won't make mixin's available, even if they are compiled to css first - which is pointless, because they loose their 'mixin' format. It's best to run sass on a single source file and import your other files in that source file.

Update

Regarding auto-loading of mixin files, the SASS Reference does mention you can use custom importers (written in Ruby) that take care of @import; I'm not sure whether this is only for top-level importing of files, or also for @import mixin-name(foo) within rules, but I don't think so.

There is an alternative approach you could use, based on concat, assuming that you have one main sass file. You would need to add a single @import 'all-mixins' to it. This all-mixins.sass is a generated file:

concat: {
    all_mixins: {
        options: { separator: '\n' },
        src: ['src/sass/mixins/*.sass'],
        dest: 'build/all-mixins.sass'
    }
}

And you would specify the sass option loadPath to add build/ to the path:

sass: {
    dist: {
        options: {
            loadPath: 'build/'
        },
        files: [{        
            src: 'build/tmp.sass',
            dest: 'dist/css/style.css'
        }]
    }
}

This is as close to auto-loading as it gets without extending sass itself.

Upvotes: 1

Related Questions