Download gulp plate - download do código-fonte gulp plate

gulp plate

Outras categorias

1.0.0

Baixar

Prato de gole

Padrão Gulp e sistema de construção.

Inclui as seguintes ferramentas, tarefas e fluxos de trabalho:

Webpack como empacotador de módulo JavaScript
webpack-dev-middleware para recarregamento ao vivo (compilação na memória para reconstruções mais rápidas durante o desenvolvimento)
Sintaxe ES2015 transpilada com Babel
ESLint para linting JavaScript
Mais bonito para formatação de código JavaScript
SASS compilado com libsass, mapas de origem, autoprefixer e Sass linting
BrowserSync para recarga ao vivo e servidor estático
svgo para compactação SVG.
gulp-svg-symbols para gerar um sprite de ícone SVG com tags <symbol> e <use>

Procurando a versão SilverStripe? Olhe aqui.

Dependências/Instalação

Gulp-plate depende das seguintes tecnologias:

node.js como ambiente host local para gulp (v. 7.5.0 ou superior) [1]
engolir como executor de tarefas
fio como gerenciador de dependências

[1] Recomenda-se instalar o nó através do nvm (Node Version Manager).

Para começar:

$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git    # Remove the link to the git repo
$ yarn          # Install dependencies

Comandos

 # Equivalent
$ yarn run build

Execute a tarefa padrão e gere uma versão dev do site na pasta dist .

 # Equivalent
$ yarn start
$ yarn run watch

Execute a tarefa padrão uma vez, inicie um servidor e observe as alterações no arquivo.

 # Equivalent
$ yarn run prod

Defina NODE_ENV='production' e gere uma versão de produção do site compactando js, css e html. Esta é a pasta que deve ficar no servidor.

Se você quiser executar qualquer outra tarefa gulp, basta anexar o nome da tarefa ao comando build /gulp:

 # Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite

Importante:

O diretório dist será excluído toda vez que você executar build/watch/prod. Não faça nenhuma alteração no diretório dist .

Estrutura de pastas

myProject/
  gulpfile.js/  # gulp tasks
  src/
    icons/      # SVG files to be included in he the sprite
    images/     # other images
    js/         # js code
    sass/       # Sass code, SCSS and Sass indented syntax possible
    html/       # html templates
      data/     # data in json format
      layouts/  # reusable layout templates
      macros/   # Nunjucks macros
      shared/   # reusable snippets

Configuração

Todos os caminhos e configurações de plugins foram resumidos em um arquivo centralizado: ./gulpfile.js/config.js . Adapte os caminhos e configurações à estrutura e necessidades do seu projeto.

Configuração SVG Sprite

O sprite cria uma imagem com o nome sprite.svg em ./dist/images/ . Ele também cria um arquivo Sass chamado: _sprite.scss em ./src/sass/base/ .

Os arquivos Sass gerados contêm informações úteis sobre os ícones do sprite, como as dimensões de cada ícone. O arquivo será alterado sempre que um ícone for adicionado, removido ou alterado, não o edite manualmente. Você pode alterar o arquivo alterando o modelo em ./gulpfile.js/tpl/_sprite.scss .

Ativos estáticos

Para mover ativos estáticos do diretório de origem sem transformações, por exemplo, arquivos de fontes. Adicione os caminhos src e dest à matriz static no config.js

Modelos HTML

Os modelos usam Nunjucks. Consulte a documentação para obter mais informações sobre como usá-los.

Atrevido

A sintaxe recuada Sass é usada por padrão. Os arquivos Sass principais precisam ter uma extensão .sass , caso contrário o compilador falhará. Parciais podem ser .sass e .scss .

Incluir arquivos CSS de fornecedores externos

Para incluir estilos de terceiros em seu css, inclua-os no arquivo main.sass :

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

Um plugin postcss irá então incorporar os arquivos preservando os mapas de origem. Após a compilação Sass.

Cuidado, pois o Sass moverá as instruções @import url(...) para o topo do arquivo CSS gerado, portanto, independentemente do local de inclusão, esses estilos sempre serão incluídos no topo do arquivo.

Erros Sass-lint

No momento em que este artigo foi escrito, sass-lint falha quando encontra seletores vazios. Isto é um bug, pode ser evitado adicionando um comentário recuado // após o seletor vazio:

 .mySelector
  //

.mySelector_child
  text-align : center

JavaScript

O arquivo ./gulpfile.js/config.js contém a configuração completa do webpack (veja a variável js ). Sinta-se à vontade para alterar conforme necessário. Tenha em mente que o babel-loader deve estar sempre presente, pois eslint dependerá dele.

Essa configuração será ligeiramente alterada dependendo da tarefa que você está executando. Ao usar a tarefa watch, a compilação Javascript acontecerá na memória, portanto, nenhum arquivo será gravado no disco ( ./dist/js/ estará vazio) e webpack-hot-middleware/client será injetado em todos os pacotes para que o recarregamento ao vivo funcione . Ao construir para produção, webpack.optimize.UglifyJsPlugin é usado para minificação. Dê uma olhada em ./gulpfile.js/util/getWebpackConfig.js para ver exatamente o que está acontecendo e altere conforme necessário.

Aqui estão algumas receitas úteis para você começar a trabalhar:

Declare aliases para arquivos frequentemente necessários

 // gulpfile.js/config.js

const js = {
  resolve : {
    extensions : [ '.js' ] ,
    alias : {
      // Path relative to `context`
      myModule : './myModule/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/some-file.js

import myModule from 'myModule' ;

myModule ( ) ;

Documentos: https://webpack.js.org/configuration/resolve/#resolve-alias

Shimming módulos não CommonJs

Plug-in jQuery

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  plugins : [
    // Make jQuery global, expected by the plugin.
    new webpack . ProvidePlugin ( {
      'window.jQuery' : 'jquery' ,
    } ) ,
  ] ,
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import 'myModule' ;

$ ( '.js-selector' ) . myModule ( ) ;

Módulo JavaScript normal

 // gulpfile.js/config.js

const js = {
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
  module : {
    rules : [
      // ...
      {
        include : require . resolve ( 'myModule/dist/myModule.js' ) ,
        loader : 'exports-loader?MyModule' ,
      } ,
    ] ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import MyModule from 'myModule' ;

const myInstance = new MyModule ( ) ;

Documentos: https://webpack.js.org/guides/shimming/

Vários pacotes JavaScript e compartilhamento de código de fornecedor

Para criar vários pacotes, adicione itens inteiros à entry

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

Isso irá gerar dois pacotes: main.js e other.js .

Se você fizer isso, provavelmente será uma boa ideia gerar outro pacote que contenha todo o código compartilhado do fornecedor:

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
    // List vendor modules here:
    vendor : [ 'jquery' , 'svg4everybody' ] ,
  } ,
  // ...
  plugins : [
    new webpack . optimize . CommonsChunkPlugin ( {
      name : 'vendor' , // Specify the common bundle's name
    } ) ,
  ] ,
  // ...
} ;