NPM ติดตั้ง Gulp-Save-Dev
อึกคืออะไร?
Gulp เป็นเครื่องมือสร้างโครงการรุ่นใหม่รุ่นใหม่ คุณสามารถใช้ Gulp และปลั๊กอินเพื่อรวบรวมรหัสโครงการของคุณ (น้อยกว่า, sass) และยังสามารถบีบอัดรหัส JS และ CSS ของคุณและแม้แต่บีบอัดภาพของคุณ อึกมี API เพียงเล็กน้อยเท่านั้นดังนั้นจึงง่ายต่อการเรียนรู้ Gulp ใช้สตรีมเพื่อประมวลผลเนื้อหา โหนดได้วางไข่เครื่องมืออัตโนมัติจำนวนมากเช่น Bower, Yeoman, Grunt ฯลฯ
ความเหมือนและความแตกต่างระหว่างอึกและเสียงฮึดฮัด
ใช้งานง่าย: ใช้รหัสผ่านกลยุทธ์การกำหนดค่า Gulp ช่วยให้งานง่ายและซับซ้อนสามารถจัดการได้
มีประสิทธิภาพ: ด้วยการใช้ประโยชน์จากสตรีมที่ทรงพลังของ node.js คุณสามารถทำการก่อสร้างให้เสร็จเร็วขึ้นโดยไม่ต้องเขียนไฟล์กลางไปยังดิสก์
คุณภาพสูง: แนวทางปลั๊กอินที่เข้มงวดของ Gulp เพื่อให้แน่ใจว่าปลั๊กอินนั้นง่ายและทำงานตามที่คุณคาดหวัง
ง่ายต่อการเรียนรู้: โดยการลด APIs ให้น้อยที่สุดคุณสามารถเรียนรู้อึกในเวลาอันสั้น งานบิลด์เป็นเหมือนที่คุณจินตนาการ: มันเป็นชุดของท่อไหล
เนื่องจาก Gulp เขียนใน node.js คุณต้องติดตั้ง NPM บนเทอร์มินัลของคุณ NPM เป็นตัวจัดการแพ็คเกจ Node.js ดังนั้นก่อนอื่นให้ติดตั้ง node.js บนเครื่องของคุณ
คำสั่งการติดตั้ง Gulp
sudo npm ติดตั้ง -g gulp
สร้างไฟล์ package.json ใหม่ในไดเรกทอรีรูท
NPM init.
ติดตั้งแพ็คเกจ Gulp
หลังจากการติดตั้งให้ป้อน Gulp -V อีกครั้งเพื่อดูหมายเลขเวอร์ชันดังที่แสดงในรูปต่อไปนี้มันจะสำเร็จ:
ติดตั้งปลั๊กอิน
ติดตั้งปลั๊กอินที่ใช้กันทั่วไป:
การรวบรวม SASS (Gulp-Ruby-sass)
เพิ่มคำนำหน้า CSS โดยอัตโนมัติ (Gulp-AutopreFixer)
บีบอัด CSS (Gulp-Minify-CSS)
การตรวจสอบรหัส JS (Gulp-jshint)
รวมไฟล์ JS (Gulp-concat)
รหัส JS บีบอัด (Gulp-Uglify)
ภาพบีบอัด (Gulp-Imagemin)
รีเฟรชหน้าโดยอัตโนมัติ (Gulp-Livereload)
CACHE IMAGE
เปลี่ยนการเตือนความจำ (Gulp-Notify)
ล้างไฟล์ (del)
ในการติดตั้งปลั๊กอินเหล่านี้คุณต้องเรียกใช้คำสั่งต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
$ npm ติดตั้ง gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename
-save และ -save -dev สามารถประหยัดขั้นตอนในการแก้ไขไฟล์ package.json ด้วยตนเอง
NPM ติดตั้งโมดูลชื่อ -SAVE
เพิ่มโมดูลและหมายเลขเวอร์ชันโดยอัตโนมัติในส่วนการพึ่งพา
npm ติดตั้งโมดูลชื่อ -save-dev
เพิ่มหมายเลขโมดูลและเวอร์ชันโดยอัตโนมัติในส่วน DevDependencies
คำสั่งอึก
คุณต้องรู้คำสั่ง 5 อึกเท่านั้น
gulp.task (ชื่อ [, deps], fn) กำหนดชื่องาน: ชื่องาน deps: ชื่องานพึ่งพา fn: ฟังก์ชันการโทรกลับ
gulp.run (งาน ... ): ทำงานหลายงานแบบขนานให้มากที่สุดเท่าที่จะทำได้
gulp.watch (glob, fn): เมื่อเนื้อหาของลูกโลกเปลี่ยนแปลงให้ดำเนินการ fn
gulp.src (glob): ตั้งค่าเส้นทางไปยังไฟล์ที่จะประมวลผลซึ่งสามารถเป็นหลายไฟล์ในรูปแบบของอาร์เรย์หรือสามารถเป็นปกติ
gulp.dest (path [, ตัวเลือก]): ตั้งค่าเส้นทางเพื่อสร้างไฟล์
GLOB: สามารถเป็นเส้นทางไฟล์โดยตรง ความหมายของเขาคือการจับคู่รูปแบบ
ไฟล์ที่จะประมวลผลโดย Gulp Guide ที่เกี่ยวข้องกับปลั๊กอินผ่าน Pipeline (Pipe ()) API รันงานประมวลผลไฟล์ผ่านปลั๊กอิน
gulp.task ('default', function () {... });Gulp.task API ใช้ในการสร้างงาน คุณสามารถป้อน $ gulp [ค่าเริ่มต้น] บนบรรทัดคำสั่ง (ไม่บังคับสำหรับวงเล็บ) เพื่อดำเนินการงานข้างต้น
เอกสาร API อย่างเป็นทางการของ Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Gulp Plug-in Collection: http://gulpjs.com/plugins/
เริ่มสร้างโครงการ
สร้างไฟล์ gulpfile.js ใหม่ในไดเรกทอรีรูทของโครงการและวางรหัสต่อไปนี้:
// แนะนำอึกและปลั๊กอิน ughify ในโปรเจ็กต์รูทไดเรกทอรี var gulp = ต้องการ ('gulp'); var uglify = ต้องการ ('gulp-uglify'); gulp.task ('บีบอัด', ฟังก์ชัน () {return gulp.src ('script/*. js')หมายเหตุ: ไม่สามารถเปลี่ยนชื่อไฟล์ gulpfile.js ได้
โครงการจำเป็นต้องใช้ uglify และเปลี่ยนชื่อปลั๊กอินและดำเนินการคำสั่งต่อไปนี้เพื่อติดตั้ง:
การติดตั้ง NPM-SAVE-DEV GULP-UGLIFYNPM ติดตั้ง-SAVE-DEV GULP-RENAME
นำตัวอย่างของฉันป้อนไดเรกทอรีที่ Gulpfile.js ตั้งอยู่:
ซีดี/ผู้ใช้/Trigkit4/Gulp-test
จากนั้นป้อน:
var gulp = ต้องการ ('gulp'); var uglify = ต้องการ ('gulp-uglify'); var rename = ต้องการ ('gulp-rename'); gulp.task ('compress', function () {return gulp.src ('script/*. js'). .pipe (gulp.dest ('dist'));});คำสั่งนี้จะติดตั้งการพึ่งพาทั้งหมดภายใต้ package.json ดังที่แสดงในรูปต่อไปนี้:
กรอก gulpfile.js
// โหลดปลั๊กอิน var gulp = ต้องการ ('gulp'), sass = ต้องการ ('gulp-ruby-sass'), autoprefixer = ต้องการ ('gulp-autoprefixer'), minifycss = ต้องการ ('gulp-minify-css'), jshint = ต้องการ = ต้องการ ('Gulp-imagemin'), Rename = require ('gulp-rename'), สะอาด = ต้องการ ('gulp-clean'), concat = ต้องการ ('gulp-concat'), แจ้ง = ต้องการ ('gulp-notify'), แคช = ต้องการ ( // style gulp.task ('styles', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({{style: 'ขยาย',})) .pipe (Autoprefixer 4 ')) .pipe (gulp.dest (' dist/styles ')) .pipe (เปลี่ยนชื่อ ({คำต่อท้าย:' .min '})) .pipe (minifycss ()) .pipe (gulp.dest (' dist/styles ')) // สคริปต์ gulp.task ('สคริปต์', ฟังก์ชั่น () {return gulp.src ('src/scripts/**/*. js') .pipe (jshint ('. js') .pipe (jshint (js ')) .pipe (jshintrc') .pipe (concat ('main.js')) .pipe (gulp.dest ('dist/scripts')) .pipe (เปลี่ยนชื่อ ({คำต่อท้าย: '.min'})) .pipe (Uglify ()) // image gulp.task ('images', function () {return gulp.src ('src/images/**/*') .pipe (cache (imagemin ({{optimizationLevel: 3, progressive: true, interlaced: true})))) - // ทำความสะอาด gulp.task ('สะอาด', ฟังก์ชั่น () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/images'], {อ่าน: false}) .pipe (clean ());}); // งานที่ตั้งไว้ล่วงหน้า gulp.task ('default', ['clean'], function () {gulp.start ('styles', 'สคริปต์', 'images');}); // guard gulp.task ('watch', function () {// guard. sscss ไฟล์ทั้งหมด gulp.watch ('src/styles/**/*. scss', ['styles']); // guard ไฟล์. js '' scrips ' gulp.watch ('src/scripts/**/*. js', ['scripts']); gulp.watch (['dist/**']). on ('เปลี่ยน', ฟังก์ชั่น (ไฟล์) {server.changed (file.path);});}); -หมายเหตุ: Pipe () เป็นวิธีการส่งสตรีมข้อมูลในโมดูลสตรีม พารามิเตอร์แรกคือวิธีการปลั๊กอิน ปลั๊กอินจะได้รับไฟล์ที่ไหลจากต้นน้ำประมวลผลแล้วไหลลง
gulp.task ('ชื่องาน', function () {return gulp.src ('เส้นทางไฟล์') .pipe (... ) .pipe (... ) // จนกระทั่งขั้นตอนสุดท้ายของ task.pipe (... );});ปลั๊กอินอึก
Gulp-GH-PAGES: ใช้ Gulp เพื่อสร้างเอกสาร HTML โดย Markdown และอัปโหลดไปยัง Git Pages
https://github.com/shinnn/gulp-gh-pages
var gulp = ต้องการ ('gulp'); var ghpages = ต้องการ ('gulp-gh-pages'); gulp.task ('ปรับใช้', ฟังก์ชั่น () {return gulp.src ('./ dist/**/*') .pipe (ghpages ());});ปลั๊กอิน Gulp-Jade: รวบรวมหยกลงในไฟล์ HTML
ปลั๊กอินที่ไม่มีอึก: รวบรวมน้อยลงในไฟล์ CSS
var less = ต้องการ ('gulp-less'); var path = ต้องการ ('path'); gulp.task ('Less', function () {return gulp.src ('./ น้อยกว่า/**/*. น้อยกว่า') .pipe (น้อยกว่า ({paths: [path.join (__ dirname, 'Less', ')})) .pipe (gulp.dest ('. เซิร์ฟเวอร์ var gulp = ต้องการ ('gulp'); var gls = ต้องการ ('gulp-live-server'); gulp.task ('serve', function () {// 1. เสิร์ฟพร้อมการตั้งค่าเริ่มต้น var server = gls.static (); // เท่ากับ gls.static ('สาธารณะ', 3000); server.start (); // 2 เสิร์ฟที่พอร์ตพอร์ตที่กำหนดเอง '.tmp']); server.start ();Gulp-LiverEload สามารถบันทึกและรีเฟรชในเวลาจริงดังนั้นจึงไม่จำเป็นต้องกด F5 และสลับอินเตอร์เฟส
Gulp-load-plugins: โหลดปลั๊กอินอึกโดยอัตโนมัติในไฟล์ package.json ของคุณโดยอัตโนมัติ
$ NPM Install-Save-Dev Gulp-Load-Plugins
ตัวอย่างเช่นไฟล์ package.json ที่กำหนดมีดังนี้:
{"การพึ่งพา": {"gulp-jshint": "*", "gulp-concat": "*"}}เพิ่มรหัสต่อไปนี้ใน gulpfile.js:
var gulp = ต้องการ ('gulp'); var gulploadplugins = ต้องการ ('gulp-load-plugins'); var plugins = gulploadplugins (); plugins.jshint = ต้องการ ('gulp-jshint'); ปลั๊กอินGulp-Babel: Babel Plugin ของ Gulp
$ NPM ติดตั้ง-Save-Dev Gulp-Babel Babel-Preset-ES2015
วิธีใช้:
const gulp = ต้องการ ('gulp'); const babel = ต้องการ ('gulp-babel'); gulp.task ('default', () => {return gulp.src ('src/app.js')GitHub อย่างเป็นทางการ: https://github.com/gulpjs/gulp