Unduh gulp plate - unduh kode sumber gulp plate

gulp plate

Kategori lainnya

1.0.0

Unduh

Piring tegukan

Teguk boilerplate & bangun sistem.

Termasuk alat, tugas, dan alur kerja berikut:

Webpack sebagai bundler modul JavaScript
webpack-dev-middleware untuk memuat ulang secara langsung (dalam kompilasi memori untuk membangun kembali lebih cepat saat pengembangan)
Sintaks ES2015 ditranspilasi dengan Babel
ESLint untuk linting JavaScript
Lebih cantik untuk pemformatan kode JavaScript
SASS dikompilasi dengan libsass, peta sumber, autoprefixer, dan Sass linting
BrowserSync untuk memuat ulang langsung dan server statis
svgo untuk kompresi SVG.
gulp-svg-symbols untuk menghasilkan sprite ikon SVG dengan tag <symbol> & <use>

Mencari versi SilverStripe? Lihat disini.

Ketergantungan / Instalasi

Gulp-plate bergantung pada teknologi berikut:

node.js sebagai lingkungan host lokal untuk gulp (v. 7.5.0 atau lebih tinggi) [1]
gulp sebagai pelari tugas
benang sebagai manajer ketergantungan

[1] Disarankan untuk menginstal node melalui nvm (Node Version Manager).

Untuk memulai:

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

Perintah

 # Equivalent
$ yarn run build

Jalankan tugas default dan buat situs versi dev di folder dist .

 # Equivalent
$ yarn start
$ yarn run watch

Jalankan tugas default satu kali, mulai server dan perhatikan perubahan file.

 # Equivalent
$ yarn run prod

Setel NODE_ENV='production' dan hasilkan versi produksi situs dengan mengompresi js, css & html. Ini adalah folder yang seharusnya masuk ke server.

Jika Anda ingin menjalankan tugas gulp lainnya cukup tambahkan nama tugas ke perintah build /gulp:

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

Penting:

Direktori dist akan dihapus setiap kali Anda menjalankan build/watch/prod. Jangan membuat perubahan apa pun pada direktori dist .

Struktur folder

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

Konfigurasi

Semua jalur dan pengaturan plugin telah diabstraksikan ke dalam file terpusat: ./gulpfile.js/config.js . Sesuaikan jalur dan pengaturan dengan struktur dan kebutuhan proyek Anda.

Konfigurasi Sprite SVG

Sprite membuat gambar dengan nama sprite.svg di ./dist/images/ . Itu juga membuat file Sass bernama: _sprite.scss di ./src/sass/base/ .

File Sass yang dihasilkan berisi informasi berguna tentang ikon sprite seperti dimensi setiap ikon. File akan berubah setiap kali ikon ditambahkan, dihapus atau diubah, jangan diedit secara manual. Anda dapat mengubah file dengan mengubah template di ./gulpfile.js/tpl/_sprite.scss .

Aset statis

Untuk memindahkan aset statis dari direktori sumber tanpa transformasi, misalnya file font. Tambahkan jalur src dan dest ke array static di config.js

Templat HTML

Template menggunakan Nunjucks. Lihat dokumen untuk informasi lebih lanjut tentang cara menggunakannya.

Kelancangan

Sintaks indentasi Sass digunakan secara default. File Sass utama harus memiliki ekstensi .sass , jika tidak, kompiler akan gagal. Parsial dapat berupa .sass dan .scss .

Sertakan file css vendor eksternal

Untuk menyertakan gaya pihak ketiga dalam penggunaan css Anda, sertakan gaya tersebut dalam file main.sass :

 // main.sass

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

Plugin postcss kemudian akan memasukkan file yang melestarikan peta sumber. Setelah kompilasi Sass.

Berhati-hatilah karena Sass akan memindahkan pernyataan @import url(...) ke bagian atas file CSS yang dihasilkan, jadi terlepas dari tempat penyertaannya, gaya ini akan selalu disertakan di bagian atas file.

Kesalahan Sass-lint

Pada saat penulisan sass-lint gagal ketika menemukan penyeleksi kosong. Ini adalah bug, dapat dicegah dengan menambahkan komentar yang menjorok ke dalam // setelah pemilih kosong:

 .mySelector
  //

.mySelector_child
  text-align : center

JavaScript

File ./gulpfile.js/config.js berisi konfigurasi webpack lengkap (lihat variabel js ). Jangan ragu untuk mengubahnya sesuai kebutuhan. Ingatlah bahwa babel-loader harus selalu ada karena eslint akan mengandalkannya.

Konfigurasi di sana akan sedikit diubah tergantung pada tugas yang Anda jalankan. Saat menggunakan tugas jam tangan, kompilasi Javascript akan terjadi di memori, jadi tidak ada file yang ditulis ke disk ( ./dist/js/ akan kosong) dan webpack-hot-middleware/client akan disuntikkan ke semua bundel agar pemuatan ulang langsung berfungsi . Saat membangun untuk produksi, webpack.optimize.UglifyJsPlugin digunakan untuk minifikasi. Lihat ./gulpfile.js/util/getWebpackConfig.js untuk melihat apa yang sebenarnya terjadi dan ubah sesuai kebutuhan.

Berikut adalah beberapa resep berguna untuk membuat Anda siap bekerja:

Deklarasikan alias untuk file yang sering dibutuhkan

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

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

Shimming modul non CommonJs

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

Modul JavaScript biasa

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

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

Berbagai bundel JavaScript & berbagi kode vendor

Untuk membuat beberapa bundel, tambahkan keseluruhan ke entry

 // gulpfile.js/config.js

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

Ini akan menghasilkan dua bundel: main.js & other.js .

Jika Anda melakukan ini, mungkin ada baiknya untuk membuat bundel lain yang berisi semua kode vendor bersama:

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