Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Conveter arquivos sass em pastas diferentes

Boa Tarde!

Eu tenho no meu projeto duas pastas diferentes que contém arquivos sass

Essa e a arvore do meu projeto atual

public
|_assets
    |_ sass
|_trabalhos
|    |_projeto1
|    |    |_assets
|    |        |_sass
|    |_projeto2
|        |_assets
|            |_sass
|_index.html

Ate o momento eu consigo fazer eu consigo verificar e converter da pasta assets os arquivos sass normalmente

Agora já os arquivos que estão dentro da pasta trabalhos eu não consigo converter de maneira nenhuma

Meu arquivo gruntfile

sass: {
    dist:{
        options:{
            style: 'compressed',
                sourcemap: 'none',
                noCache: true
        },
        files: [{
            expand: true,
            cwd: 'public/assets/sass',
            src: ['*.scss', '*.sass'],
            dest: 'public/assets/css',
            ext: '.css'
        }]
    }    
}

**Meu processo de watch**
watch: {
    less: {
        options: {
        event: ['added', 'changed']
        },
        files: 'public/assets/**/*.less',
        tasks: 'less:compilar'
    },
    sass: {
        options:{
        event: ['added', 'changed']
        },
        files: [
            'public/assets/**/*.scss', 
            'public/assets/**/*.sass',
        ],
        tasks: ['sass']
    }
}

Eu queria saber como faço para colocar cada css em sua devida pasta em cada projeto

Quais configuração eu tenho que fazer?

5 respostas

Você reparou que em nenhum momento você referência as pastas que você quer compilar? Só referência public/assets?

Eu verifiquei e só não sei como fazer para fazer que cada arquivo sass fique em cada pasta de trabalhos

solução!

Bom, você sabe isso sim. Aliás, você demonstra esse conhecimento em seu arquivo:

files: [{
            expand: true,
            cwd: 'public/assets/sass',
            src: ['*.scss', '*.sass'],
            dest: 'public/assets/css',
            ext: '.css'
        }]

Você pega todos os arquivos dentro de public/assets/sass e o resultado da compilação vai para public/assets/css.

Agora, lembre-se que no Grunt uma tarefa pode ter sub tarefas, correto? Quantas subtarefas você tem aqui:

sass: {
    dist:{
        options:{
            style: 'compressed',
                sourcemap: 'none',
                noCache: true
        },
        files: [{
            expand: true,
            cwd: 'public/assets/sass',
            src: ['*.scss', '*.sass'],
            dest: 'public/assets/css',
            ext: '.css'
        }]
    }    
}

Você tem apenas uma, a dist. Já pensou em adicionar mais uma subtarefa para cada pasta que você deseja compilar o sass?

sass: {
    dist:{
        options:{
            style: 'compressed',
                sourcemap: 'none',
                noCache: true
        },
        files: [{
            expand: true,
            cwd: 'public/assets/sass',
            src: ['*.scss', '*.sass'],
            dest: 'public/assets/css',
            ext: '.css'
        }]
    } ,
   outraTarefa: { /* coloca o caminho seguindo a estrutura do dist */}   
}

Uma tarefa no grunt pode ter várias subtarefas. Na sua tarefa watch você tem:

watch: {
    less: {
        options: {
        event: ['added', 'changed']
        },
        files: 'public/assets/**/*.less',
        tasks: 'less:compilar'
    },
    sass: {
        options:{
        event: ['added', 'changed']
        },
        files: [
            'public/assets/**/*.scss', 
            'public/assets/**/*.sass',
        ],
        tasks: ['sass']
    }
}

Veja que no sassvocê executa tasks: ['sass']. Se a task sass tiver mais de uma subtarefa, as duas ou três ou quatro serão executadas.

Tente mais uma vez, quebre a cabeça um pouquinho. Você é um bom aluno, tenho o acompanhado aqui no Alura Lucas.

Oi Lucas, vi que marcou minha resposta como solução. Mas você conseguiu o que queria? Só marque se realmente conseguiu. Aguardo seu feedback.

Sim eu consigo eu tinha me esquecido da possibilidade de criar mas de uma sub tarefa

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software