Search code examples
node.jssassgruntjsautoprefixer

Setting a target or multiplefile for a grunt task with sass and autoprefixer?


I'm setting a grunt file for a task. My goal is to create a css file from a sass file (scss) and add an autoprefix to all the proprieties which require so. Initially I used the propriety multifiles but it didn't work, so now I'm using the target propriety that works fine, but my problem is, even if I target the very same file, it will create another file in my folder where I put all my sass files.

So far my file is the following:

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        sass: {
            dev: {
                options: {
                    style: 'expanded',
                    sourcemap: 'none',
                },
                files: {
                    '../style.css': 'scss/style.scss'
                }
            },
            dist: {
                options: {
                    style: 'compressed',
                    sourcemap: 'none',
                },
                files: {
                    '../style-min.css': 'scss/style.scss'
                }
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 6 versions']
            },
            target: {
                expand: true,
                flatten: true,
                src: '../style.css',
                dest: ''
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass', 'autoprefixer']
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.registerTask('default', ['watch']);
}

My goal is to set up a global task for all my css files, like so:

target: {
    expand: true,
    flatten: true,
    src: '*.css',
    dest: ''
}

but it is not working even if I try something like:

target: {
        expand: true,
        flatten: true,
        src: '../*.css',
        dest: ''
    }

Does anyone know why?


Solution

  • Use cwd (stands for current working directory) which is the path where grunt looks for the files matching the pattern in src. Also define the dest so that it would create the destination file in the same folder.

    target: {
        expand: true,
        flatten: true,
        cwd: '../',
        src: [ '**/*.css' ],
        dest: '../'
    }