Compiling Sass

    Resumo/Informações Live-server
    • Terminal commands:
      Instalar: sudo npm install live-server -g
      Rodar: entrar na pasta do projeto e digitar somente "live-server" e enter. Irá abrir o site no browser.
    Compiling Sass
    • Para o Sass funcionar, foi necessário:
    • a) Adicionar o package.json ao projeto (criado através do comando no terminal).
    • b) Informar alguns códigos através do terminal para adiconar o arquivo do Sass na pasta do node.js.
    • c) Escrever o script de compilamento do Sass no arquivo package.json "compile:sass": "node-sass sass/main.scss css/style.css".
      Sintaxe: "compile:sass": "node-sass pastaSass/arquivoSass pastaCSS/arquivoCSS".
    • d) No terminal, executar o comando npm run compile:sass.
    • e) Será adicionado ao arquivo style.css na pasta do CSS o Sass compilado.
    • f) Agora, no arquivo package.json, adicionar no final do comando compile:sass o -w (watch), para que ele fique assistindo as mudanças no Sass e compilando para o CSS.
      Ficando então: node-sass sass/main.scss css/style.css -w"
    • g) Rodar uma vez o romando npm run compile:sass -w no terminal.
    • h) Agora ao trocarmos algo e salvar, a mudança será detectada e o terminal irá rodar o compile:sass.

      • Building Process
    • Sequence of tasks that are performed automatically after we finish developing a product, or a certain feature of a product.
    • The result of the build process are one or more final files, which are then ready for production (meaning ready to be deployed to a web server).


    • main.sass arquivo com o Sass digitado.
      style.comp.css comp stands for compile, ou seja, o código agora em css normal.
      style.concat.css concatenate the existing css files, juntando todas as files até o momento, como fontes e estilos em somente um arquivo.
      style.prefix.css adiciona os prefix (-webkit-) a todas as propriedades que podem precisar dele, fazendo-as funcionar em outros browsers.
      compress.css esse irá comprimir o código completo de CSS até aqui para gerar um style.min.css, de tamanho bem menor e leitura mais rápida.
      style.css agora o style.css possui os arquivos de font, style escrito em sass, prefixes necessários e está comprimido, tendo um tamanho menor.

      • Começando:
    • Adicionado algumas tasks (compile:sass é uma task), portanto alguns comandos foram utilizados.
    • No arquivo package.json, foi alterado o compile:sass para watch:sass, adicionado um novo compile:sass e adicionado o concat:css.
    • Após adicionar o compile:sass, rodado o comando npm run compile:sass, para ele criar o arquivo de output (style.comp.css).
    • Para adicionar as pastas do concat:sass, utilizar o comando npm install concat --save-dev no terminal, lembrando que o --sav-dev é utilizado para baixar esses arquivos como parte do projeto, onde ao passar esse projeto para outra pessoa e ela digitar o comando de baixar os pacotes necessários para compilar o sass, ele irá realizar o download de todos os que foram adicionados com --save-dev.
    • Adicionado o "concat:sass": "concat -o output.css ./1.css ./2.css ./3.css"
      -o significa output.
      output.css será o local onde ficará o arquivo criado.
      ./1.css input files.
      Então temos:
      "concat:sass": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css"
      Portanto, o nosso output será css/style.concat.css, e com isso os arquivos icon-font.css e style.comp.css serão concatenados e adicionados no arquivo style.concat.css.

    • Adicionado o prefix:css, adicionado os pacotes npm install autoprefixer --save-dev e npm install postcss-cli --save-dev (cli: command line interface) para ele funcionar.

    • prefix:css
      O que ele faz: o prefix irá adicionar o -webkit- em todas as propriedades que precisem, fazendo com que elas funcionem corretamente em outros browsers.
      "prefix:css": "postcss --use autoprefixer -b"
      --use autoprefixer utilizada para fazer o autoprefixer funcionar.
      -b stands for browsers, specify which browsers we want to target. Example: 'last 10 versions'.
      css/style.concat.css input file.
      -o output parameter + output que queremos, portanto:
      -o css/style.prefix.css
      Process: irá recuperar as informações de css/style.concat.css and then write the output to the style.prefix.css file.
      Terminal command: Rodado o npm run prefix:css no terminal, para adicionar a pasta do style.prefix.css

    • compress:css
      "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
      utilizado para comprimir o style.css em style.min.css, porém não foi utilizado esse nome para não termos um style.css de desenvolvimento e um diferente para produção.
      Terminal command: npm run compress:css

    • build:css
      Processo que automatiza todos, a execução desse executa todos os anteriores.
      Terminal command: npm install npm-run-all --save-dev para adicionar o pacote.
      Sintaxe: "build:css": "npm-run-all taskNames"
      Exemplo: "build:css": "npm-run-all compile:sass concat:sass prefix:css compress:css"
      Terminal command para rodar: npm run build:css

      • Automatização para quando salvar um arquivo, atualizar a página

    • "watch:sass": "node-sass sass/main.scss css/style.css -w",
      "devserver": "live-server",
      "start": "npm-run-all --parallel devserver watch:sass",

      a) watch:sass para observer mudanças no main.scss e converter para .css
      b) devserver para ativar o live-server, onde ao salvar um arquivo na IDE, atualizar a página do browser.
      c) start para ativar o devserver e watch:sass.
      --parallel ativar os dois ao mesmo tempo, diferente de build:css, que irá rodar em uma sequencia (compile:sass, concat:css, prefix:css e compress:css).
    • Comando para ativar: na pasta do sass, npm run start. IMPORTANTE: ao ativar esse comando, ele irá overwrite o css com os prefix e etc, então precisa-se descomentar a linha do icon-font no html. Essa somente pode estar comentada no final do projeto, visto que ela será adicionada ao style.css através do building process.