🥇 Configure Node.js, Grunt e Node-Sass do zero

Veja o Github Repo

Para as atualizações mais recentes deste tutorial, consulte o Repo Github.

Execute as seguintes etapas dentro de um diretório limpo

Não tenho certeza se você está no mesmo barco que eu, mas não consegui encontrar nenhum recurso bom por aí que reunisse tudo isso. Portanto, aqui está um tutorial passo a passo para criar um aplicativo Node.js do zero, adicionando Grunt e, em seguida, Node-Sass. Sim, tente encontrar bons documentos sobre Node-Sass sozinho 🙁

Espero que isso ajude!

Crie seu projeto Node.js

npm init – criar um projeto de nó limpo
NOTA : certifique-se de adicionar "private": true,ao package.jsonpara que seu projeto não seja distribuído globalmente como um aplicativo npm

Instalar Express

npm install --save express– instale o pacote Express e salve em seu package.jsonarquivo

Instale o Grunt

npm install --save-dev grunt– instale o pacote Grunt e salve em seu package.jsonarquivo

Configurar estrutura de projeto de esqueleto

mkdir public – na raiz do projeto, crie um novo diretório ‘público’
mkdir public/stylesheets – crie um diretório de folhas de estilo dentro do diretório público

Inicie o aplicativo

touch app.js– criar o .jsarquivo principal do aplicativo

adicione o seguinte

// set variables for environment
var express = require('express');
var app = express();
var path = require('path');

// Set server port
app.listen(4000);
console.log('server is running');

Instale o idioma do modelo

npm install --save ejs – para instalar ejs – ou –
npm install --save jade – para instalar o jade
mkdir views – criar diretório de visualizações para visualizações de modelo
touch views/something.ejs – crie qualquer arquivo de visualização – ou –
touch views/something.jade – crie qualquer arquivo de visualização

Atualize o arquivo app.js

adicione o seguinte acima configurando a porta do servidor

// views as directory for all template files
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); // use either jade or ejs       // instruct express to server up static assets
app.use(express.static('public'));

Adicionando rotas, faça uma página inicial

NOTA : TODAS as rotas precisam vir ANTES app.listen(4000);
atualizar para refletir o modelo que está sendo usado para a rotaapp.js
mkdir views onde todos os modelos de visualização ficarão
touch views/index.jade – criar arquivo de índice de base

Abra e crie uma rota raiz que aponte para esse arquivo de modeloapp.js

// set routes
app.get('/', function(req, res) {
  res.render('index');
});

Pouco antes de </body>em seu arquivo de modelo, certifique-se de adicionar o script para LiveReload
```
<script src="//localhost:35729/livereload.js"></scrip>
```

Instale o Grunt-Sass

npm install --save-dev grunt-sass – instalar grunt-sass

Adicionar Sass ao projeto

mkdir sass – crie o diretório Sass na raiz do projeto

Criar Gruntfile

touch gruntfile.js – crie um novo Gruntfile na raiz do seu projeto, adicione o seguinte código ao arquivo vazio

module.exports = function(grunt) {
  grunt.initConfig ({
    sass: {
      dist: {
        files: {
          'public/stylesheets/style.css' : 'sass/style.scss'
        }
      }
    }

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

Instale o Grunt Watch

npm install grunt-contrib-watch --save-dev – instale o Grunt watcher e salve-o como um recurso Dev
Adicione o seguinte ao Gruntfile dentro do grunt.initConfig

Adicione a opção para que LiveReload funcione em seu projetolivereload: true

watch: {
  source: {
    files: ['sass/**/*.scss'],
    tasks: ['sass'],
    options: {
      livereload: true, // needed to run LiveReload
    }
  }
}

Nossa estrutura de arquivo desejada

|- node_modules/
|- public/
|--- stylesheets/
|- sass/
|- views/

Faça as coisas funcionarem

Agora que você tem um projeto básico configurado, precisamos colocar as coisas em execução. Normalmente, executarei três janelas / guias de terminal para isso.

terminal de usuário para navegação de arquivo
executar servidor Node $ node app.js
executar servidor grunt $ grunt watch

Agora você deve conseguir navegar e ver seu projeto em execução.http://localhost:4000/

Instale uma estrutura Sass

Para este projeto, escolhi usar a biblioteca Bourbon da Thoughtbot .

Embora esta biblioteca seja uma Ruby Gem, isso não coloca uma dependência Ruby em seu projeto. O Gem instala uma versão da biblioteca mixin Sass diretamente em seu projeto.

Antes de instalar a biblioteca, atualize sua estrutura de arquivos para conter um diretório dentro de seu diretório.lib/sass/

|- node_modules/
|- public/
|--- stylesheets/
|- sass/
|--- lib/
|- views/

Vamos instalar o Bourbon.

$ gem install bourbonou sudo gem install bourbon(se você não estiver executando o RVM)
$ cd sass/lib mude os diretórios para o novo diretório Sass lib
bourbon install instalar a biblioteca
Abra o arquivo e adicionestyle.scss@import "lib/bourbon/bourbon";

Instale a estrutura básica da IU

Dentro do diretório, precisamos instalar uma estrutura de diretório fundamental para começar a construir nosso site. Eu recomendo o seguinte:sass/

|- _buttons.scss
|- _config.scss
|- _forms.scss
|- _modules.scss
|- _reset.scss
|- _typography.scss
|- _vendors.scss
|- application.scss
|- buttons/
|- colors/
|- forms/
|- layouts/
|- lib/
|- modules/
|- ui_patterns/
|- vendors/

Em nosso arquivo, precisamos importar alguns arquivos para começar.application.scss

A redefinição que incluí neste projeto é uma versão modificada da redefinição de Eric Meyer, além de algumas idéias do projeto de redefinição do HTML5. Além disso, atualizei esta redefinição para ser mais orientada pelo Sass usando variáveis.

Em seguida, adicione os arquivos Sass individuais que formarão a base, o módulo, o fornecedor e as partes de layout do projeto

Isso completará a configuração inicial do projeto básico. A partir daqui, você poderá personalizar o Sass para se adequar ao design do seu projeto.