ดาวน์โหลด gulp plate - ดาวน์โหลด gulp plate ซอร์สโค้ด

gulp plate

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

อึกจาน

อึกสำเร็จรูปและระบบการสร้าง

ประกอบด้วยเครื่องมือ งาน และเวิร์กโฟลว์ต่อไปนี้:

Webpack เป็นตัวรวมโมดูล JavaScript
webpack-dev-middleware สำหรับการโหลดซ้ำแบบสด (ในการคอมไพล์หน่วยความจำเพื่อการสร้างใหม่ที่เร็วขึ้นในขณะที่กำลังพัฒนา)
ไวยากรณ์ ES2015 ถ่ายทอดด้วย Babel
ESLint สำหรับ JavaScript Linting
สวยกว่าสำหรับการจัดรูปแบบโค้ด JavaScript
SASS คอมไพล์ด้วย libsass, ซอร์สแมป, โปรแกรมแก้ไขอัตโนมัติ และ Sass linting
BrowserSync สำหรับการโหลดซ้ำสดและเซิร์ฟเวอร์แบบคงที่
svgo สำหรับการบีบอัด SVG
gulp-svg-สัญลักษณ์เพื่อสร้างสไปรต์ไอคอน SVG พร้อมแท็ก <symbol> & <use>

กำลังมองหาเวอร์ชัน SilverStripe อยู่ใช่ไหม? ดูที่นี่

การพึ่งพา / การติดตั้ง

Gulp-plate ขึ้นอยู่กับเทคโนโลยีต่อไปนี้:

node.js เป็นสภาพแวดล้อมโฮสต์ท้องถิ่นสำหรับอึก (v. 7.5.0 หรือสูงกว่า) [1]
อึกเป็นนักวิ่งงาน
เส้นด้ายเป็นผู้จัดการการพึ่งพา

[1] ขอแนะนำให้ติดตั้ง node trough nvm (Node Version Manager)

ในการเริ่มต้น:

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

คำสั่ง

 # Equivalent
$ yarn run build

รันงานเริ่มต้นและสร้างเวอร์ชัน dev ของไซต์ในโฟลเดอร์ dist

 # Equivalent
$ yarn start
$ yarn run watch

รันงานเริ่มต้นหนึ่งครั้ง เริ่มเซิร์ฟเวอร์และดูการเปลี่ยนแปลงไฟล์

 # Equivalent
$ yarn run prod

ตั้งค่า NODE_ENV='production' และสร้างเวอร์ชันที่ใช้งานจริงของไซต์โดยการบีบอัด js, css & html นี่คือโฟลเดอร์ที่ควรอยู่บนเซิร์ฟเวอร์

หากคุณต้องการรันงานอึกอื่นๆ เพียงเพิ่มชื่องานต่อท้ายคำสั่ง build /gulp:

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

สำคัญ:

ไดเร็กทอรี dist จะถูกลบทุกครั้งที่คุณรัน build / watch / prod อย่าทำการเปลี่ยนแปลงใดๆ ในไดเร็กทอรี dist

โครงสร้างโฟลเดอร์

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

การกำหนดค่า

การตั้งค่าเส้นทางและปลั๊กอินทั้งหมดได้รับการสรุปเป็นไฟล์ส่วนกลาง: ./gulpfile.js/config.js ปรับเส้นทางและการตั้งค่าให้เข้ากับโครงสร้างและความต้องการของโปรเจ็กต์ของคุณ

การกำหนดค่า SVG สไปรท์

สไปรท์สร้างรูปภาพที่มีชื่อ sprite.svg ใน ./dist/images/ / นอกจากนี้ยังสร้างไฟล์ Sass ชื่อ: _sprite.scss ใน ./src/sass/base/ /

ไฟล์ Sass ที่สร้างขึ้นมีข้อมูลที่เป็นประโยชน์เกี่ยวกับไอคอนสไปรท์ เช่น ขนาดของแต่ละไอคอน ไฟล์จะเปลี่ยนแปลงทุกครั้งที่มีการเพิ่ม ลบ หรือเปลี่ยนแปลงไอคอน ห้ามแก้ไขด้วยตนเอง คุณสามารถเปลี่ยนไฟล์ได้โดยการเปลี่ยนเทมเพลตใน ./gulpfile.js/tpl/_sprite.scss

สินทรัพย์คงที่

เพื่อย้ายสินทรัพย์คงที่จากไดเร็กทอรีต้นทางโดยไม่มีการแปลง เช่น ไฟล์ฟอนต์ เพิ่มเส้นทาง src และ dest ไปยังอาร์เรย์ static ใน config.js

เทมเพลต HTML

เทมเพลตใช้ Nunjucks ดูเอกสารสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการใช้งาน

สัส

ไวยากรณ์เยื้อง Sass ถูกใช้เป็นค่าเริ่มต้น ไฟล์ Sass หลักต้องมีนามสกุล .sass ไม่เช่นนั้นคอมไพเลอร์จะล้มเหลว บางส่วนสามารถเป็นได้ทั้ง .sass และ .scss

รวมไฟล์ css ของผู้จำหน่ายภายนอก

หากต้องการรวมสไตล์ของบุคคลที่สามใน css ของคุณ ให้รวมสไตล์เหล่านั้นไว้ในไฟล์ main.sass :

 // main.sass

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

ปลั๊กอิน postcss จะแทรกไฟล์ที่เก็บรักษาซอร์สแมปไว้ในบรรทัด หลังจากการรวบรวม Sass

ระวังว่า Sass จะย้ายคำสั่ง @import url(...) ไปที่ด้านบนของไฟล์ CSS ที่สร้างขึ้น ดังนั้นสไตล์เหล่านี้จึงจะถูกรวมไว้ที่ด้านบนของไฟล์โดยไม่ขึ้นอยู่กับตำแหน่งที่รวมไว้เสมอ

ข้อผิดพลาด Sass-lint

ในขณะที่เขียน sass-lint จะล้มเหลวเมื่อพบตัวเลือกว่าง นี่เป็นข้อผิดพลาด ซึ่งสามารถป้องกันได้โดยเพิ่มความคิดเห็นที่เยื้อง // หลังตัวเลือกว่าง:

 .mySelector
  //

.mySelector_child
  text-align : center

จาวาสคริปต์

ไฟล์ ./gulpfile.js/config.js มีการกำหนดค่า webpack แบบเต็ม (ดูตัวแปร js ) ปรับเปลี่ยนได้ตามต้องการ โปรดทราบว่าควรมี babel-loader อยู่เสมอ เนื่องจาก eslint จะพึ่งพามัน

การกำหนดค่าจะมีการเปลี่ยนแปลงเล็กน้อยขึ้นอยู่กับงานที่คุณกำลังดำเนินการอยู่ เมื่อใช้งานการเฝ้าดู การคอมไพล์ Javascript จะเกิดขึ้นในหน่วยความจำ ดังนั้นจึงไม่มีการเขียนไฟล์ลงดิสก์ ( ./dist/js/ จะว่างเปล่า) และ webpack-hot-middleware/client จะถูกฉีดเข้าไปในบันเดิลทั้งหมดเพื่อให้การโหลดซ้ำแบบเรียลไทม์ทำงานได้ . เมื่อสร้างสำหรับการผลิต webpack.optimize.UglifyJsPlugin ใช้สำหรับการลดขนาด ลองดูที่ ./gulpfile.js/util/getWebpackConfig.js เพื่อดูว่าเกิดอะไรขึ้นและเปลี่ยนแปลงตามความจำเป็น

ต่อไปนี้เป็นสูตรอาหารที่มีประโยชน์บางส่วนที่จะช่วยให้คุณเริ่มต้นใช้งานได้:

ประกาศนามแฝงสำหรับไฟล์ที่ต้องการบ่อย

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

เอกสาร: https://webpack.js.org/configuration/resolve/#resolve-alias

โมดูล Shimming ที่ไม่ใช่ CommonJs

ปลั๊กอิน 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 ( ) ;

โมดูล JavaScript ปกติ

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

เอกสาร: https://webpack.js.org/guides/shimming/

ชุด JavaScript หลายชุดและการแชร์รหัสผู้ขาย

หากต้องการสร้างหลายบันเดิลให้เพิ่มข้อมูลทั้งหมดลงใน entry

 // gulpfile.js/config.js

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

สิ่งนี้จะสร้างสองบันเดิล: main.js & other.js

หากคุณทำเช่นนี้ อาจเป็นความคิดที่ดีที่จะสร้างบันเดิลอื่นที่มีรหัสผู้จำหน่ายที่ใช้ร่วมกันทั้งหมด:

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