gulp setup

การตั้งค่าอึกที่สมบูรณ์แบบ

โครงการนี้มีจุดมุ่งหมายเพื่อสร้างการตั้งค่าอึกแบบแยกส่วนและกำหนดค่าได้ รับโครงการอัตโนมัติของโครงการและทำงานโดยมีส่วนร่วมขั้นต่ำ Gulp-Setup เขียนและดูแลโดย @alexgrozav

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

ตัวอย่าง gulpfile.js

การตั้งค่า Gulp โดยใช้ Gulp-Setup นั้นง่ายกว่าที่เคย

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

งานเริ่มต้น

โดยค่าเริ่มต้น Gulp-Setup มาพร้อมกับงานที่ทำไว้ล่วงหน้าหลากหลาย

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

อึก

งาน default จะเรียกใช้ลำดับของ build , browser-sync และ watch ตามที่คุณมักจะทำใน Gulp

บิล

โดยค่าเริ่มต้นงานบิลด์จะดำเนินการงาน clean หลังจากนั้นจะรันงานอื่น ๆ ทั้งหมดที่ให้พารามิเตอร์ pattern

อึกสะอาด

งานนี้จะลบโฟลเดอร์ build และ dist ที่มีอยู่

นาฬิกาอึก

งาน watch จะดูการเปลี่ยนแปลงและสร้างงานใด ๆ ที่ให้พารามิเตอร์ pattern นอกจากนี้ gulp-setup ยังสร้าง partials graph ซึ่งจะสร้างไฟล์ใด ๆ ที่ขึ้นอยู่กับไฟล์ที่เปลี่ยนแปลง

ผ้าสำลี

งานนี้จะทำงานใด ๆ ที่ลงท้ายด้วย -lint

Gulp HTML

สำเนาไฟล์ .html ไปยังโฟลเดอร์สร้างจากนั้นลดลงและส่งออกใน dist

Gulp CSS

AutopRefixes .css ไฟล์และส่งออกไปยังโฟลเดอร์บิลด์จากนั้นลดลงและส่งออกในระยะ

อึกทึก

รวบรวมและ AutopRefixes .sass และ .scss และส่งออกไปยังโฟลเดอร์ Build จากนั้นลดลงและส่งออกใน DIST

_{งานนี้ใช้ประโยชน์จาก partials graph ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในบางส่วนจะทำให้เกิดการสร้างใหม่บนไฟล์พาเรนต์}

สไตลัสอึก

รวบรวมและ AutopRefixes .styl และส่งออกไปยังโฟลเดอร์ Build จากนั้นลดลงและส่งออกใน DIST อินสแตนซ์สไตลัสยังมีฟังก์ชั่น rucksack-css

_{งานนี้ใช้ประโยชน์จาก partials graph ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในบางส่วนจะทำให้เกิดการสร้างใหม่บนไฟล์พาเรนต์}

Gulp JavaScript

รวบรวมไฟล์ ES6 .js และส่งออกไปยังโฟลเดอร์ Build จากนั้นลดลงและส่งออกใน DIST งาน javascript สามารถใช้ webpack หรือ browserify เพื่อประมวลผลและรวมไฟล์ที่ระบุโดยใช้ตัวเลือกพารามิเตอร์ options.bundler (ดังที่เห็นในตัวอย่างการกำหนดค่าด้านล่าง)

_{งานนี้ใช้ประโยชน์จาก partials graph ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในบางส่วนจะทำให้เกิดการสร้างใหม่บนไฟล์พาเรนต์}

Gulp CoffeeScript

รวบรวมไฟล์ .coffee และส่งออกไปยังโฟลเดอร์บิลด์จากนั้นลดลงและส่งออกใน Dist เช่นเดียวกับในงาน javascript คุณสามารถใช้ webpack หรือ browserify เพื่อรวมไฟล์

_{งานนี้ใช้ประโยชน์จาก partials graph ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในบางส่วนจะทำให้เกิดการสร้างใหม่บนไฟล์พาเรนต์}

Gulp typescript

รวบรวมไฟล์ .ts และส่งออกไปยังโฟลเดอร์ Build จากนั้นลดลงและส่งออกใน DIST เช่นเดียวกับในงาน javascript คุณสามารถใช้ webpack หรือ browserify เพื่อรวมไฟล์

_{งานนี้ใช้ประโยชน์จาก partials graph ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในบางส่วนจะทำให้เกิดการสร้างใหม่บนไฟล์พาเรนต์}

อิมเมจ

เพิ่มประสิทธิภาพ .svg , .jpg , .png และ .gif และส่งออกไปยังโฟลเดอร์ build และ dist

ฟอนต์อึก

สำเนา .eot , .svg , .ttf , .woff และ .woff2 ไฟล์ไปยังโฟลเดอร์ build และ dist

การกำหนดค่า

นี่คือการกำหนดค่าตัวอย่างสำหรับ Gulp-Setup ที่ตั้งค่าตัวเลือกสำหรับงาน javascript เริ่มต้นที่มีอยู่และสร้างงาน Gulp ใหม่ที่เรียกว่า javascript-ext โดยขยาย javascript พื้นฐาน คุณสามารถแทนที่พารามิเตอร์งานเริ่มต้นใด ๆ เมื่อขยายงาน

คีย์วัตถุ tasks กำหนดชื่อของงานอึก

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

การเขียนงาน

งานที่มีอยู่ในการตั้งค่าอึกนั้นทำจากสององค์ประกอบ: process และ base พารามิเตอร์อื่น ๆ ทั้งหมดเช่น pattern มีให้ในส่วนประกอบเหล่านี้

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

งาน ฐาน

งาน base ทำหน้าที่เป็นเทมเพลตสำหรับงานอื่น ๆ มันทำให้ตะขอสี่ท่อมีอยู่: init , build , dist และ end สำหรับการรวมกระบวนการเข้ากับมัน หากงาน base หายไป process จะถูกพิจารณาว่าเป็นงานแบบสแตนด์อโลนและจะไม่ใช้เทมเพลต

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

แพ็คเกจ Gulp-Setup ให้ฐาน Premade ต่อไปนี้: gulp-setup/bases/base , gulp-setup/bases/compile และ gulp-setup/bases/lint คุณสามารถใช้ฐานเหล่านี้สำหรับงานกระบวนการที่กำหนดเอง

งาน ประมวล ผล

งานกระบวนการคือการประมวลผลหลักที่งานเกี่ยวข้อง งานประมวลผลโดยปกติจะใช้ เทมเพลต ซึ่งเป็นงาน base ที่พวกเขารวมเข้าด้วยกันโดยการจัดหา init build , dist หรือ end hooks หรือคุณสามารถเขียนกระบวนการเป็นงานอึก เดี่ยว

เทมเพลต

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

แบบสแตนด์อโลน

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

การมีส่วนร่วมข้อบกพร่องและคำขอคุณสมบัติ

มีข้อผิดพลาดหรือคำขอคุณสมบัติ? โปรดอ่านแนวทางปัญหาก่อนและค้นหาปัญหาที่มีอยู่และปิด หากปัญหาหรือความคิดของคุณยังไม่ได้รับการแก้ไขโปรดเปิดปัญหาใหม่