Formas de compilar o CSS

[baltazarparra]

Alguém poderia me esclarecer?

O Sass por exemplo, oferece um --watch nativo, então porque grande parte dos desenvolvedores passa essa tarefa para um taskrunner?

[felipefialho]

Opa @baltazarparra, tomei a liberdade de editar o seu titulo, beleza?

Então, é porque normalmente utilizamos o watch dos task-runners junto com outras várias funções, como:

• Concatenação/Minificação de JavaScript
• Lint do código
• Otimização de imagens
• etc, etc, etc

Então, ao usar o watch do task-runner, evitamos ter que rodar outro serviço para rodar uma aplicação especifica.

Meu ponto de vista.

[baltazarparra]

@lfeh Obrigado pela resposta cara, e tranquilo sobre o titulo.

Então, se eu quiser apenas compilar o sass, não teria problemas em não usar um taskrunner pra isso? Meu ponto de vista, eu uso o gulp para fazer a build, ou seja, eu só concateno/minifico e otimizo as imagens no final do processo, então queria separar o processo de compilar o css dessas outras tarefas, por isso me veio a dúvida.

[bernardodiasc]

@baltazarparra acho que o @lfeh ja respondeu, só pra reforçar, sim, é de boa ter tarefas separadas em diferentes programas (gulp, sass, webpack, make, node, npm run, etc) pra cada coisa se isso fizer sentido no seu workflow. Essa redundância de formas de fazer as coisas existe mesmo, escolhe o que funciona melhor e manda brasa. O legal é tentar entender a ponto forte e o porquê de usar determinada ferramenta, e nem sempre precisamos mesmo desses benefícios, as vezes o mais simples funciona melhor, como o sass com --watch nativo (pra ambiente dev ta ok, pra prod usa a task de build que vc falou mesmo hehe).

[jhonnymoreira]

Acho até bacana ressaltar que essas linhas de comando acabam sendo uteis quando ao invés de um task runner no molde do gulp e do grunt, acaba sendo utilizado um npm run, por exemplo. Tem um artigo bem bacana do Substack (James Halliday) falando sobre e uma apresentaćão do @mabrasil sobre!

• Substack (:us:)
  • http://substack.net/task_automation_with_npm_run
• Matheus
  • https://medium.com/pensamentos-js/um-olhar-alternativo-sobre-automadores-339d0df6a4cc#.dy76dtey6
  • http://nug-ce-repensando-automacao.surge.sh/

[baltazarparra]

@jhonnymoreira sempre quis usar o npm desta forma, me faltava artigos assim pra dar o start, muito obrigado mano.

[felipefialho]

@baltazarparra Teve uma discussão monstra sobre isso na issue #17 =D

[baltazarparra]

@lfeh Valeu pela referência, vou lá agora.

[wilkerviana]

@lfeh sei que a issue já tá antiga..rs
Mas tenho a seguinte dúvida juvenil: É possível usar o watch sass simultaneamente com o browser-sync no Grunt? Nunca consegui e acabo tendo que sempre rodar dois serviços em paralelo.

[lagden]

@wilkerviana basta colocar o browser-sync para escutar o seu css...
aqui tem um exemplo https://github.com/lagden/pepsi

{
  browserSync: {
    dev: {
      bsFiles: {
        src: 'seu-caminho/css/*.css'
      },
      options: {
        notify: true,
        watchTask: true,
        port: 8183,
        server: {
          baseDir: ['seu-caminho']
        }
      }
    }
  }
}

é que no lagden/pepsi ta escrito em coffee

Hope this helps!

[lagden]

bem que o browserSync foi feito pra testar um webapp em vários dispositivos ao mesmo tempo!!
no próprio devTools do Chrome da fazer esse comportamento de auto-update de css.

[lagden]

@jhonnymoreira já fiz tudo via npm e fica uma bosta!! huahuahua...
vale a pena mesclar, ou seja, um pouco de gulp + bash + npm
é apenas o meu humilde e verdadeiro comment!!!

[wilkerviana]

@lagden valeu pela resposta cara.
Mas não consegui fazer funcionar não.
Hoje tenho as tasks da seguinte forma:

function...
sass:{
      dist:{
        files:{
          'public/css/main.css' : 'public/sass/main.scss'
        }
      }
    },
    browserSync: {
      public:{
        bsFiles:{
          watchTask: true,
          src: ['public/**/*']
        },
        options:{
            server:{
                baseDir:"public"
            }
        },
      }
    }

grunt.registerTask('server',['browserSync']);

Já tentei configurar diferente disso pra rodar o Sync incluindo o Sass mas não rolou!

[wilkerviana]

@lagden passando só pra avisar que li mais um pouquinho a documentação da parada e funcionou.
Estava errando na watchTask que deveria estar em options e não no bsFiles.

Valeu aeew!

[lagden]

@wilkerviana isso aeee!! 👍

não tem segrego...

task-sass
  sass -> pasta-do-css

watch-sass
  **/*.sass -> executa task-sass

browserSync
  bsFiles -> pasta-do-css/*.css
  options
     watchTask true

No bsFiles é possível colocar também outros tipos (js, html, etc...), mas esses acontece um reload mesmo!!