gulp
2 के गुलपज -1 के साथ फ्रंट-एंड वर्कफ़्लो ऑटोमेशन के लिए व्यापक गाइड
खोज…
वाक्य - विन्यास
- npm स्थापित करें [प्लगइन-नाम] -save-dev
- npm स्थापित करें [प्लगइन-नाम] -save
- समारोह
<function-name>(ग्लोब) {$ .src (ग्लोब)। पिप ([प्लगइन 1])। पाइप ([प्लगइन 2]) .... पाइप ([प्लगइन एन])। पाइप ($। डस्ट)<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
टिप्पणियों
पढ़ना जारी रखें - एक डिफ़ॉल्ट कार्य बनाना और ब्राउज़र-सिंक सेट करना
संदर्भ
पैकेज से सभी प्लगइन्स लोड हो रहा है। JSON
मान लें, आपके पास gulp को स्थापित करने का तरीका है, तो हमें अपने प्रोजेक्ट रूट फ़ोल्डर के तहत पैकेज से सभी gulp- निर्भरता की आवश्यकता के लिए नीचे गोता लगाने दें।
यदि आपके पास अभी तक एक गुलगुला नहीं है, तो कृपया नाम के साथ एक खाली फ़ाइल बनाएं
gulpfile.js
सबसे पहले, हमें गल्प की आवश्यकता है। इस तरह:
var $ = require('gulp');
अगला, नीचे स्निपेट द्वारा हमारे सभी प्लगइन्स को अपने gulpfile में लोड करें
ध्यान दें
कृपया सभी स्निपेट्स में टिप्पणियों के माध्यम से पढ़ें जिन्हें हम इस रीड में शामिल करेंगे, वे हर कार्यक्षमता में अधिक अंतर्दृष्टि प्रदान करते हैं
/*
require gulp-load-plugins, and call it
gulp-load-plugins will require individually,
all the plugins installed in package.json at the root directory
these required plugins, are lazy loaded
that is, gulp-load-plugins will only require them when they are referenced in this file
plugins are available for perusal, via camelcased names, minus gulp
eg: gulp-clean-css is accessed by $$.cleanCss
*/
var $$ = require('gulp-load-plugins')();
ध्यान दें
लेख में हमारे पास कई उदाहरण होंगे, हम उपनाम
- $ के रूप में gulp और
- $ $ के रूप में गुल-लोड-प्लगइन्स
टाइपिंग में आसानी के लिए।
उत्तरदायी छवियों के लिए प्लगइन्स स्थापित करना | Css Minification | Js minification
हमारा लक्ष्य, है
- विभिन्न चौड़ाई की छवियों की एक बैटरी पैदा करके, और उन्हें छोटा करने के लिए, आपकी छवियों को चौड़ाई और पैमाने के अनुरूप बनाएं
- अपनी जावास्क्रिप्ट को लिंट करें
- अपनी संपत्ति को कम करें - जेएस / सीएसएस / एचटीएमएल, इस प्रकार आपको सबसे हल्के कोड की तुलना में हल्का होस्ट करने में सक्षम बनाता है
- बदलाव के लिए सीएसएस / जेएस / छवि फ़ाइलों को देखें, और अनुकूलन का पुनर्निर्माण करें
- अपनी साइट पर सेवा देने वाले ब्राउज़र पर, विकास में अपने परिवर्तनों को सिंक करना।
हमें बहुत सारे प्लगइन्स की आवश्यकता है, इसलिए हम उन सभी को स्थापित करें। कृपया प्रोजेक्ट के रूट फ़ोल्डर में इन सभी को चलाएं।
छवि प्रसंस्करण प्लगइन्स
bash $ npm install --save-dev gulp-responsive
bash $ npm install --save-dev gulp-imagemin
bash $ npm install --save-dev imagemin
bash $ npm install --save-dev imagemin-jpeg-recompress
bash $ npm install --save-dev imagemin-pngquant
एसेट ऑप्टिमाइज़र प्लगइन्स
bash $ npm install --save-dev gulp-clean-css
bash $ npm install --save-dev gulp-uglify
bash $ npm install --save-dev gulp-minify-html
bash $ npm install --save-dev gulp-jshint
bash $ npm install --save-dev gulp-concat
bash $ npm install --save-dev gulp-autoprefixer
एक गल्प समारोह का एनाटॉमी
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
ध्यान दें
पाइप एक ऐसी विधि है जो ग्लोब इनपुट से मेल खाने वाली सभी फाइलों को हमारे प्लगइन्स (इस मामले में minifyhtml) में प्रवाहित करती है।
इसे इस तरह से चित्रित करना सरल है:
। / $ .src द्वारा स्ट्रीम की गई फ़ाइलें बनाता है
कहाँ ,
$ -> गुल
$ $ -> गुल-लोड-प्लगइन्स
एसेट ऑप्टिमाइज़ेशन एंड मिनिमाइज़ेशन
इसलिए, ऑप्टिमाइज़र फ़ंक्शन लिखने से पहले, हमें कुछ कैशिंग प्लग इन को स्थापित करने की आवश्यकता है।
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
आपको आश्चर्य हो सकता है कि दो कैश क्यों आह! gulp- कैश्ड , केवल अन्य प्लगइन्स के लिए पाइपलाइन के नीचे संशोधित या नई सामग्री को पारित करता है। इसलिए, जब से हम चाहते हैं कि बदलाव के बिना फाइलें एक ही फाइल प्रति परिसंपत्ति (css | js) में समाप्त करने के लिए उपयोग की जाएं, तो हमें जिप-कैश्ड के अलावा gulp- याद रखना चाहिए ।
सबसे पहले हम उन फ़ाइलों की सूची बनाने के लिए gulp-cached का उपयोग करते हैं जो बदल गई हैं
दूसरा, हमें मेमोरी में उस सूची से गुजरने वाली सभी फ़ाइलों का ट्रैक रखने के लिए gulp- याद रखना चाहिए।
फ़र्स्ट रन: कोई फ़ाइल कैश नहीं की जाती है, इसलिए gulp-cached उन सभी को gulp- याद रखेगी
इसके बाद के रन: केवल संशोधित या नई फ़ाइलों को पाइप-कैश्ड द्वारा पाइप किया जाता है। चूंकि वर्तमान फ़ाइल की सामग्री बदल गई है, gulp- याद है कि इसका कैश अपडेट करता है।
कूल, हमें अपना पहला ऑप्टिमाइज़र लिखें
स्टाइल ऑप्टिमाइज़र
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is autoprefixed with cross browser compatible prefixes for any css property ( justify-content for e.g)
b. Is concatenated into app.css
3. app.css is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'images/**/*' or '**/*.css' or, an array eg ['glob1','glob2']
*/
var optimizeStyles = function(src) {
return $.src(src).
pipe($$.cached('styles')).
pipe($$.autoprefixer({
browsers: ['last 2 versions']
})).
pipe($$.remember('auto-prefixed-stylesheets')).
pipe($$.concat('app.css')).
pipe($.dest('build/css')).
pipe($$.cleanCss()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/css'))
}
ध्यान दें
$ -> गुल
$ $ -> गुल-लोड-प्लगइन्स
$ .src -> sb के रूप में पारित ग्लोब से मेल खाती फाइल स्ट्रीम बनाता है
$ .dest -> निर्दिष्ट पथ में हेरफेर की गई फ़ाइल को सहेजती है
स्क्रिप्ट ऑप्टिमाइज़र
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is linted with jshint
b. Is concatenated into app.js
3. app.js is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'js/**/*' or '**/*.js' or, an array eg ['glob1','glob2']
*/
var optimizeScripts = function(src) {
return $.src(src).
pipe($$.cached('scripts')).
pipe($$.jshint()).
pipe($$.jshint.reporter('default')).
pipe($$.jshint.reporter('fail')).
pipe($$.remember('linted-scripts')).
pipe($$.concat('app.js')).
pipe($.dest('build/js')).
pipe($$.uglify()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/js'))
}
ध्यान दें
$ -> गुल
$ $ -> गुल-लोड-प्लगइन्स
$ .src -> sb के रूप में पारित ग्लोब से मेल खाती फाइल स्ट्रीम बनाता है
$ .dest -> निर्दिष्ट पथ में हेरफेर की गई फ़ाइल को सहेजती है
उत्तरदायी छवियां बनाएं
अब हम इमेज प्रोसेसिंग पर जाते हैं। तो, उद्देश्य, प्रत्येक छवि के लिए आकार की एक सरणी है जो आप सेवा करने जा रहे हैं।
क्यों?
ठीक है, यह समझने के लिए कि हमें चौड़ाई की एक श्रृंखला के साथ छवियों की बैटरी की आवश्यकता क्यों है, हमें इस तथ्य पर विचार करने की आवश्यकता है, कि संभवत: विभिन्न प्रस्तावों वाले उपकरणों के zillions हैं। हमें बहुत अधिक पिक्सेल के बिना पैमाने पर एक छवि चाहिए। उसी समय, हमें केवल एक छवि को डाउनलोड करके, पृष्ठ लोड समय में सुधार करने की आवश्यकता है, जो कि इसके द्वारा समाहित चौड़ाई को फिट करता है, और ऐसा करने के लिए सबसे छोटे संभव आयाम के साथ भी है। एरिक पोर्टिस द्वारा लिखे गए विद्वानों के ब्लॉग हैं, जो सिर्फ मीडिया प्रश्नों की अप्रभावीता को उजागर करता है और लिपस्टिक और आकारों जैसी अवधारणाओं को समझने के लिए एक व्यापक मार्गदर्शक के रूप में कार्य करता है।
आप एरिक पोर्टिस के महाकाव्य का उल्लेख कर सकते हैं
अब, हमारे कार्य, एक ग्लोब, और इनपुट के रूप में एक चौड़ाई लेने की जरूरत है, और अपने जादू करते हैं और फ़ाइल को प्रत्येक रन जेनरेट करते हैं, एक गंतव्य तक और जिम्मेदार छवि को छोटा करते हैं।
हमने अपने पहले उदाहरण में दो छवि संपीड़न प्लगइन्स स्थापित किए हैं
चूंकि ये प्लगइन्स एक "गुलप" के साथ शुरू नहीं होते हैं , इसलिए उपसर्ग के बाद, हमें मैन्युअल रूप से उन्हें अपने गुलदस्ते पर लोड करने की आवश्यकता है।
तो चलिए अपने gulpfile के शीर्ष पर gulp-load-plugins की घोषणा के बाद, हमें मैन्युअल रूप से उनकी आवश्यकता है।
इस तरह:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
यह ध्यान देने योग्य है, कि गुल-उत्तरदायी तेज छवि प्रोसेसर के साथ आता है, जो इमेजमैजिक BY BYAAA से बेहतर है। शार्प वह है जो आपकी छवियों को वांछित चौड़ाई में क्रॉप करने के लिए gulp-responsive द्वारा उपयोग किया जाता है।
कॉन्फ़िगरेशन पैराम की व्यापक सूची के लिए, आप gulp-responsive-configuration-options को देख सकते हैं। मैंने केवल उपयोग किया है
- चौड़ाई - एक चौड़ाई w के रूप में हमारी छवियों को क्रॉप करने के लिए, एक पैरामीटर के रूप में पारित किया गया
- नाम - छवि के नाम में एक प्रत्यय जोड़ने के लिए, ताकि यह अद्वितीय बना रहे
नीचे मेरे विन्यास समारोह में। तो हमारे कार्य, इनपुट के रूप में पारित चौड़ाई के लिए छवि को क्रॉप करेंगे, सभी मेलिंग छवियों के लिए ग्लोब इनपुट के माध्यम से डिक्रिप्ट। फिर, प्रत्येक छवि को jpeg-recompress या pngquant का उपयोग करके संपीड़ित किया जाता है और बिल्ड / छवियों के अंदर सहेजा जाता है।
इसे ध्यान में रखते हुए, हमारा कार्य ऐसा होगा:
/*
@generateResponsiveImages
*@Description:takes in a src of globs, to stream matching image files , a width,
*to resize the matching image to, and a dest to write the resized and minified files to
*@src - input a glob pattern - a string eg 'images/** /*' or 'images/*' or, an array
eg ['glob1','glob2']
*@return returns a stream
*/
var generateResponsiveImages = function(src, width, dest) {
//declare a default destination
if (!dest)
dest = 'build/images';
//case 1: src glob - images/**/*
// the base is the directory immediately preceeding the glob - images/ in this case
//case 2: images/fixed/flourish.png : the base here is images/fixed/ - we are overriding
// that by setting base to images.This is done so that, the path beginning after images/
// - is the path under our destination - without us setting the base, dest would be,
//build/images/flourish.png.But with us setting the base, the destination would be
// build/images/fixed/flourish.png
return $.src(src, {
base: 'images'
})
//generate resized images according to the width passed
.pipe($$.responsive({
//match all pngs within the src stream
'**/*.png': [{
width: width,
rename: {
suffix: '-' + width
},
withoutEnlargement: false,
}],
//match all jpgs within the src stream
'**/*.jpg': [{
width: width,
rename: {
suffix: '-' + width
},
progressive: true,
withoutEnlargement: false,
}]
}, {
errorOnEnlargement: false,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
}))
//once the file is resized to width, minify it using the plugins available per format
.pipe($$.if('*.jpg', compressJpg({
min: 30,
max: 90,
target: 0.5
})()))
//use file based cache gulp-cache and it will minify only changed or new files
//if it is not a new file and if the contents havent changed, the file is served from cache
.pipe($$.cache($$.imagemin({
verbose: true
})))
//write to destination - dest + path from base
.pipe($.dest(dest));
}
ध्यान दें
$ -> गुल
$ $ -> गुल-लोड-प्लगइन्स
$ .src -> sb के रूप में पारित ग्लोब से मेल खाती फाइल स्ट्रीम बनाता है
$ .dest -> निर्दिष्ट पथ में हेरफेर की गई फ़ाइल को सहेजती है
आगे के संदर्भ
HTML न्यूनतम
*
*@minifyHtml
*Description:takes in a glob src, and minifies all '.html' files matched by the glob
*@src - input a glob pattern - a string eg '/**/*.html /*' or '*.html' or, an array eg ['glob1','glob2']
*@dest=file.base means, the modified html file will be in the same directory as the src file being minified
*often means, the process is just a modification on the existing src file
*@return returns a stream
*/
var minifyHtml = function(src) {
return $.src(src)
.pipe($$.minifyHtml())
.pipe($.dest(function(file) {
//file is provided to a dest callback -
// Refer here https://github.com/gulpjs/gulp/blob/master/docs/API.md#path
return file.base;
}));
}
एक गल्प कार्य का एनाटॉमी
कार्य परिभाषा का शारीरिक रचना ऐसा है:
$.task(<taskname> , [dependencies] , <body>);
निर्भरताएं, उन कार्यों की एक सरणी है जो आपके द्वारा परिभाषित किए जा रहे वर्तमान कार्य से पहले समाप्त हो जाती है, चलती है। डिफ़ॉल्ट अतुल्यकालिक कार्यक्षमता के बजाय एक तुल्यकालिक निष्पादन को मजबूर करने की तरह।
गुल टास्क जोड़ना
तो, अब हमारे पास है
- शैलियाँ अनुकूलित करने के लिए एक फ़ंक्शन ऊपर दिया गया है
- स्क्रिप्ट को ऑप्टिमाइज़ करने के लिए एक फ़ंक्शन ऊपर दिया गया है
- HTML को ऑप्टिमाइज़ करने के लिए उपरोक्त फ़ंक्शन परिभाषित किया गया है
- प्रति छवि एकाधिक छवियों को उत्पन्न करने के लिए एक फ़ंक्शन
अब हमें केवल इतना ही करना है कि जरूरत पड़ने पर उनका आह्वान किया जाए।
हम पहले परिभाषित किए गए सिंटैक्स के अनुसार अपने कार्यों को लिखते हैं
/*
* $.task('name','dependency array',function)
results in building a task object as below
task:{
'name':name,
'dep':[array of dependencies],
'fn':function
}
*/
//*@return returns a stream to notify on task completion
$.task('optimizeHtml', function() {
var src = ['**/*.html', '!{node_modules}/**/*.html'];
return minifyHtml(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeScripts', function() {
var src = ['js/**/*.js'];
return optimizeScripts(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeStyles', function() {
var src = ['css/**/*.css', 'fonts/google/**/*.css'];
return optimizeStyles(src);
});
//Take in a callback to ensure notifying the gulp engine, that the task is done
//required since, you are not returning a stream in this task
$.task('generateResponsiveImages', function(callback) {
var src = ['images/**/*.{jpg,png}'];
for (var i = widths.length - 1; i >= 0; i--) {
generateResponsiveImages(src, widths[i]);
}
callback();
});