gulp plate Download - gulp plate -Quellcode herunterladen

gulp plate

Andere Kategorien

1.0.0

Herunterladen

Gulp-Platte

Gulp Boilerplate & Build-System.

Enthält die folgenden Tools, Aufgaben und Arbeitsabläufe:

Webpack als JavaScript-Modul-Bundler
webpack-dev-middleware für Live-Neuladen (In-Memory-Kompilierung für schnellere Neuerstellungen während der Entwicklung)
Mit Babel transpilierte ES2015-Syntax
ESLint für JavaScript-Linting
Hübscher für die Formatierung von JavaScript-Code
SASS kompiliert mit libsass, Quellkarten, Autoprefixer und Sass-Linting
BrowserSync für Live-Neuladen und statischen Server
SVGO für SVG-Komprimierung.
gulp-svg-symbols zum Generieren eines SVG-Symbol-Sprites mit den Tags <symbol> und <use>

Suchen Sie nach der SilverStripe-Version? Schauen Sie hier.

Abhängigkeiten / Installation

Gulp-Plate hängt von den folgenden Technologien ab:

node.js als lokale Hostumgebung für gulp (v. 7.5.0 oder höher) [1]
gulp als Task-Runner
Garn als Abhängigkeitsmanager

[1] Es wird empfohlen, den Knoten über nvm (Node Version Manager) zu installieren.

Um zu beginnen:

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

Befehle

 # Equivalent
$ yarn run build

Führen Sie die Standardaufgabe aus und generieren Sie eine Entwicklungsversion der Site im dist -Ordner.

 # Equivalent
$ yarn start
$ yarn run watch

Führen Sie die Standardaufgabe einmal aus, starten Sie einen Server und achten Sie auf Dateiänderungen.

 # Equivalent
$ yarn run prod

Setzen Sie NODE_ENV='production' und generieren Sie eine Produktionsversion der Site durch Komprimieren von js, css und html. Dies ist der Ordner, der auf dem Server liegen sollte.

Wenn Sie eine andere Gulp-Aufgabe ausführen möchten, hängen Sie einfach den Aufgabennamen an den Befehl build /gulp an:

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

Wichtig:

Das dist -Verzeichnis wird jedes Mal gelöscht, wenn Sie build/watch/prod ausführen. Nehmen Sie keine Änderungen im dist -Verzeichnis vor.

Ordnerstruktur

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

Konfiguration

Alle Pfade und Plugin-Einstellungen wurden in einer zentralen Datei zusammengefasst: ./gulpfile.js/config.js . Passen Sie die Pfade und Einstellungen an die Struktur und Bedürfnisse Ihres Projekts an.

SVG-Sprite-Konfiguration

Das Sprite erstellt ein Bild mit dem Namen sprite.svg in ./dist/images/ . Außerdem wird eine Sass-Datei mit dem Namen _sprite.scss in ./src/sass/base/ erstellt.

Die generierten Sass-Dateien enthalten nützliche Informationen zu den Sprite-Symbolen, wie z. B. die Abmessungen der einzelnen Symbole. Die Datei ändert sich jedes Mal, wenn ein Symbol hinzugefügt, entfernt oder geändert wird. Bearbeiten Sie sie nicht manuell. Sie können die Datei ändern, indem Sie die Vorlage in ./gulpfile.js/tpl/_sprite.scss ändern.

Statische Vermögenswerte

Zum Verschieben statischer Assets aus dem Quellverzeichnis ohne Transformationen, z. B. Schriftartdateien. Fügen Sie die src und dest zum static Array in config.js hinzu

HTML-Vorlagen

Vorlagen verwenden Nunjucks. Weitere Informationen zu deren Verwendung finden Sie in den Dokumenten.

Sass

Standardmäßig wird die eingerückte Sass-Syntax verwendet. Die Haupt-Sass-Dateien müssen die Erweiterung .sass haben, sonst schlägt der Compiler fehl. Teilzeichen können sowohl .sass als auch .scss sein.

Fügen Sie CSS-Dateien externer Anbieter hinzu

Um Stile von Drittanbietern in Ihr CSS einzubinden, fügen Sie diese in die Datei main.sass ein:

 // main.sass

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

Ein Postcss-Plugin integriert dann die Dateien und behält die Quellzuordnungen bei. Nach der Sass-Zusammenstellung.

Beachten Sie, dass Sass @import url(...) -Anweisungen an den Anfang der generierten CSS-Datei verschiebt, sodass diese Stile unabhängig vom Ort der Einbindung immer oben in der Datei eingefügt werden.

Sass-Lint-Fehler

Zum Zeitpunkt des Schreibens schlägt sass-lint fehl, wenn es auf leere Selektoren trifft. Dies ist ein Fehler. Er kann durch Hinzufügen eines eingerückten Kommentars // nach dem leeren Selektor verhindert werden:

 .mySelector
  //

.mySelector_child
  text-align : center

JavaScript

Die Datei ./gulpfile.js/config.js enthält die vollständige Webpack-Konfiguration (siehe die js Variable). Bei Bedarf können Sie jederzeit Änderungen vornehmen. Beachten Sie, dass der babel-loader immer vorhanden sein sollte, da eslint darauf angewiesen ist.

Die Konfiguration ändert sich je nach ausgeführter Aufgabe geringfügig. Bei Verwendung der Überwachungsaufgabe erfolgt die Javascript-Kompilierung im Speicher, sodass keine Dateien auf die Festplatte geschrieben werden ( ./dist/js/ ist leer) und webpack-hot-middleware/client in alle Bundles eingefügt wird, damit das Live-Neuladen funktioniert . Beim Erstellen für die Produktion wird webpack.optimize.UglifyJsPlugin zur Minimierung verwendet. Schauen Sie sich ./gulpfile.js/util/getWebpackConfig.js an, um genau zu sehen, was passiert, und ändern Sie es bei Bedarf.

Hier sind einige nützliche Rezepte, die Ihnen den Einstieg erleichtern:

Deklarieren Sie Aliase für häufig benötigte Dateien

 // 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 ( ) ;

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

Shimmen von Nicht-CommonJs-Modulen

jQuery-Plugin

 // 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 ( ) ;

Reguläres JavaScript-Modul

 // 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 ( ) ;

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

Mehrere JavaScript-Bundles und Anbietercode-Sharing

Um mehrere Bundles zu erstellen, fügen Sie dem entry Ganze hinzu

 // gulpfile.js/config.js

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

Dadurch werden zwei Bundles generiert: main.js und other.js .

Wenn Sie dies tun, ist es wahrscheinlich eine gute Idee, ein weiteres Bundle zu generieren, das den gesamten gemeinsam genutzten Anbietercode enthält:

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