Descarga de gulp plate - Descarga de código fuente gulp plate

gulp plate

Otras categorias

1.0.0

Descargar

Placa de trago

Traga texto estándar y sistema de construcción.

Incluye las siguientes herramientas, tareas y flujos de trabajo:

Webpack como paquete de módulos JavaScript
webpack-dev-middleware para recarga en vivo (compilación en memoria para reconstrucciones más rápidas durante el desarrollo)
Sintaxis de ES2015 transpilada con Babel
ESLint para linting de JavaScript
Más bonito para formatear código JavaScript
SASS compilado con libsass, mapas fuente, autoprefixer y Sass linting
BrowserSync para recarga en vivo y servidor estático
svgo para compresión SVG.
gulp-svg-symbols para generar un icono SVG con etiquetas <symbol> y <use>

¿Busca la versión SilverStripe? Mira aquí.

Dependencias / Instalación

La placa de trago depende de las siguientes tecnologías:

node.js como entorno de host local para gulp (v. 7.5.0 o superior) [1]
tragar como corredor de tareas
hilo como administrador de dependencias

[1] Se recomienda instalar el nodo a través de nvm (Node Version Manager).

Para empezar:

$ 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

Ejecute la tarea predeterminada y genere una versión de desarrollo del sitio en la carpeta dist .

 # Equivalent
$ yarn start
$ yarn run watch

Ejecute la tarea predeterminada una vez, inicie un servidor y observe los cambios en los archivos.

 # Equivalent
$ yarn run prod

Establezca NODE_ENV='production' y genere una versión de producción del sitio comprimiendo js, css y html. Esta es la carpeta que debería ir en el servidor.

Si desea ejecutar cualquier otra tarea gulp, simplemente agregue el nombre de la tarea al comando build /gulp:

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

Importante:

El directorio dist se eliminará cada vez que ejecute build/watch/prod. No realice ningún cambio en el directorio dist .

Estructura de carpetas

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

Configuración

Todas las rutas y configuraciones de complementos se han resumido en un archivo centralizado: ./gulpfile.js/config.js . Adapta los recorridos y escenarios a la estructura y necesidades de tu proyecto.

Configuración de sprites SVG

El sprite crea una imagen con el nombre sprite.svg en ./dist/images/ . También crea un archivo Sass llamado: _sprite.scss en ./src/sass/base/ .

Los archivos Sass generados contienen información útil sobre los íconos de sprites, como las dimensiones de cada ícono. El archivo cambiará cada vez que se agregue, elimine o cambie un ícono; no lo edite manualmente. Puede cambiar el archivo cambiando la plantilla en ./gulpfile.js/tpl/_sprite.scss .

Activos estáticos

Para mover activos estáticos desde el directorio de origen sin transformaciones, por ejemplo, archivos de fuentes. Agregue las rutas src y dest a la matriz static en config.js

Plantillas HTML

Las plantillas utilizan Nunjucks. Consulte los documentos para obtener más información sobre cómo usarlos.

Hablar con descaro a

La sintaxis con sangría Sass se utiliza de forma predeterminada. Los archivos principales de Sass deben tener una extensión .sass ; de lo contrario, el compilador fallará. Los parciales pueden ser tanto .sass como .scss .

Incluir archivos CSS de proveedores externos

Para incluir estilos de terceros en su uso CSS, inclúyalos en el archivo main.sass :

 // main.sass

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

Luego, un complemento postcss incorporará los archivos conservando los mapas fuente. Después de la compilación de Sass.

Tenga en cuenta que Sass moverá las declaraciones @import url(...) a la parte superior del archivo CSS generado, por lo que, independientemente del lugar de inclusión, estos estilos siempre se incluirán en la parte superior del archivo.

Errores de pelusa descarada

Al momento de escribir este artículo, sass-lint falla cuando encuentra selectores vacíos. Esto es un error, se puede evitar agregando un comentario con sangría // después del selector vacío:

 .mySelector
  //

.mySelector_child
  text-align : center

javascript

El archivo ./gulpfile.js/config.js contiene la configuración completa del paquete web (consulte la variable js ). Siéntase libre de modificarlo según sea necesario. Tenga en cuenta que babel-loader siempre debe estar presente ya que eslint dependerá de él.

La configuración se modificará ligeramente según la tarea que esté ejecutando. Cuando se utiliza la tarea de vigilancia, la compilación de Javascript se realizará en la memoria, por lo que no se escribirán archivos en el disco ( ./dist/js/ estará vacío) y se inyectará webpack-hot-middleware/client en todos los paquetes para que funcione la recarga en vivo. . Al compilar para producción, webpack.optimize.UglifyJsPlugin se utiliza para minificación. Eche un vistazo a ./gulpfile.js/util/getWebpackConfig.js para ver exactamente qué está sucediendo y cambiarlo según sea necesario.

Aquí hay algunas recetas útiles que lo ayudarán a comenzar a trabajar:

Declarar alias para archivos requeridos con frecuencia

 // 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

Calce de módulos que no son CommonJs

complemento 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/

Múltiples paquetes de JavaScript y código compartido de proveedores

Para crear varios paquetes, agregue paquetes completos a entry

 // gulpfile.js/config.js

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

Esto generará dos paquetes: main.js y other.js .

Si hace esto, probablemente sea una buena idea generar otro paquete que contenga todo el código de proveedor compartido:

 // 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
    } ) ,
  ] ,
  // ...
} ;