एनपीएम स्क्रिप्ट्स गल्प के समान कर सकते हैं, लेकिन लगभग 50x कम कोड में। वास्तव में, बिना किसी कोड के, केवल कमांड लाइन तर्क।
उदाहरण के लिए, आपके द्वारा वर्णित उपयोग मामला जहां आप अलग-अलग वातावरणों के लिए अलग कोड चाहते हैं।
वेबपैक + एनपीएम लिपियों के साथ, यह इतना आसान है:
"prebuild:dev": "npm run clean:wwwroot",
"build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.development.js --hot --profile --progress --colors --display-cached",
"postbuild:dev": "npm run copy:index.html && npm run rename:index.html",
"prebuild:production": "npm run clean:wwwroot",
"build:production": "cross-env NODE_ENV=production webpack --config config/webpack.production.js --profile --progress --colors --display-cached --bail",
"postbuild:production": "npm run copy:index.html && npm run rename:index.html",
"clean:wwwroot": "rimraf -- wwwroot/*",
"copy:index.html": "ncp wwwroot/index.html Views/Shared",
"rename:index.html": "cd ../PowerShell && elevate.exe -c renamer --find \"index.html\" --replace \"_Layout.cshtml\" \"../MyProject/Views/Shared/*\"",
अब आप बस दो वेबपैक कॉन्फिगरेशन स्क्रिप्ट्स को बनाए रखते हैं, एक डेवलपमेंट मोड के लिए webpack.development.js, और एक प्रोडक्शन मोड के लिए webpack.production.js। मैं webpack.common.jsसभी वातावरणों पर साझा किए गए घरों के वेबपैक कॉन्फ़िगरेशन का भी उपयोग करता हूं , और उन्हें मर्ज करने के लिए वेबपैकमर्ज का उपयोग करता हूं।
एनपीएम लिपियों की शीतलता के कारण, यह आसान श्रृंखलन के लिए अनुमति देता है, इसी तरह से कैसे गूप्स स्ट्रीम / पाइप करता है।
ऊपर के उदाहरण में, डेवलपमेंट के लिए निर्माण करने के लिए, आप बस अपनी कमांड लाइन पर जाएं और निष्पादित करें npm run build:dev।
- एनपीएम पहले चलाएगा
prebuild:dev,
- फिर
build:dev,
- और अंत में
postbuild:dev।
preऔर postउपसर्गों NPM बताओ जो क्रम में निष्पादित करने के लिए।
यदि आप ध्यान दें, तो वेबपैक + एनपीएम स्क्रिप्ट के साथ, आप एक देशी प्रोग्राम चला सकते हैं, जैसे कि rimrafएक देशी प्रोग्राम जैसे कि गल्प-रैपर के बजाय gulp-rimraf। आप देशी विंडोज .exe फ़ाइलों को भी चला सकते हैं जैसा कि मैंने elevate.exeलिनक्स या मैक पर देशी या निक्स फाइलों के साथ किया है ।
एक ही काम को गपशप के साथ करने की कोशिश करें। जिस कार्यक्रम का आप उपयोग करना चाहते हैं, उसके लिए आपको किसी के साथ आने और एक गल्प-रैपर लिखने का इंतजार करना होगा। इसके अलावा, आपको इस तरह से जटिल कोड लिखने की आवश्यकता होगी: ( कोणीय 2-बीज रेपो से सीधे लिया गया )
गुल्प विकास कोड
import * as gulp from 'gulp';
import * as gulpLoadPlugins from 'gulp-load-plugins';
import * as merge from 'merge-stream';
import * as util from 'gulp-util';
import { join/*, sep, relative*/ } from 'path';
import { APP_DEST, APP_SRC, /*PROJECT_ROOT, */TOOLS_DIR, TYPED_COMPILE_INTERVAL } from '../../config';
import { makeTsProject, templateLocals } from '../../utils';
const plugins = <any>gulpLoadPlugins();
let typedBuildCounter = TYPED_COMPILE_INTERVAL; // Always start with the typed build.
/**
* Executes the build process, transpiling the TypeScript files (except the spec and e2e-spec files) for the development
* environment.
*/
export = () => {
let tsProject: any;
let typings = gulp.src([
'typings/index.d.ts',
TOOLS_DIR + '/manual_typings/**/*.d.ts'
]);
let src = [
join(APP_SRC, '**/*.ts'),
'!' + join(APP_SRC, '**/*.spec.ts'),
'!' + join(APP_SRC, '**/*.e2e-spec.ts')
];
let projectFiles = gulp.src(src);
let result: any;
let isFullCompile = true;
// Only do a typed build every X builds, otherwise do a typeless build to speed things up
if (typedBuildCounter < TYPED_COMPILE_INTERVAL) {
isFullCompile = false;
tsProject = makeTsProject({isolatedModules: true});
projectFiles = projectFiles.pipe(plugins.cached());
util.log('Performing typeless TypeScript compile.');
} else {
tsProject = makeTsProject();
projectFiles = merge(typings, projectFiles);
}
result = projectFiles
.pipe(plugins.plumber())
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(tsProject))
.on('error', () => {
typedBuildCounter = TYPED_COMPILE_INTERVAL;
});
if (isFullCompile) {
typedBuildCounter = 0;
} else {
typedBuildCounter++;
}
return result.js
.pipe(plugins.sourcemaps.write())
// Use for debugging with Webstorm/IntelliJ
// https://github.com/mgechev/angular2-seed/issues/1220
// .pipe(plugins.sourcemaps.write('.', {
// includeContent: false,
// sourceRoot: (file: any) =>
// relative(file.path, PROJECT_ROOT + '/' + APP_SRC).replace(sep, '/') + '/' + APP_SRC
// }))
.pipe(plugins.template(templateLocals()))
.pipe(gulp.dest(APP_DEST));
};
गुल्प उत्पादन कोड
import * as gulp from 'gulp';
import * as gulpLoadPlugins from 'gulp-load-plugins';
import { join } from 'path';
import { TMP_DIR, TOOLS_DIR } from '../../config';
import { makeTsProject, templateLocals } from '../../utils';
const plugins = <any>gulpLoadPlugins();
const INLINE_OPTIONS = {
base: TMP_DIR,
useRelativePaths: true,
removeLineBreaks: true
};
/**
* Executes the build process, transpiling the TypeScript files for the production environment.
*/
export = () => {
let tsProject = makeTsProject();
let src = [
'typings/index.d.ts',
TOOLS_DIR + '/manual_typings/**/*.d.ts',
join(TMP_DIR, '**/*.ts')
];
let result = gulp.src(src)
.pipe(plugins.plumber())
.pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
.pipe(plugins.typescript(tsProject))
.once('error', function () {
this.once('finish', () => process.exit(1));
});
return result.js
.pipe(plugins.template(templateLocals()))
.pipe(gulp.dest(TMP_DIR));
};
वास्तविक gulp कोड बहुत अधिक जटिल है कि यह, क्योंकि यह रेपो में कई दर्जन gulp फ़ाइलों में से केवल 2 है।
तो, आपके लिए कौन सा आसान है?
मेरी राय में, एनपीएम स्क्रिप्ट्स प्रभावशीलता और उपयोग में आसानी, दोनों में गल्प और ग्रंट को पार कर जाती हैं, और सभी फ्रंट-एंड डेवलपर्स को अपने वर्कफ़्लो में इसका उपयोग करने पर विचार करना चाहिए क्योंकि यह एक प्रमुख समय बचाने वाला है।
अपडेट करें
एक परिदृश्य है जिसका मैंने सामना किया है जहाँ मैं एनपीएम लिपियों और वेबपैक के संयोजन में गुल्प का उपयोग करना चाहता था।
जब मुझे उदाहरण के लिए iPad या Android डिवाइस पर दूरस्थ डिबगिंग करने की आवश्यकता होती है , तो मुझे अतिरिक्त सर्वर शुरू करने की आवश्यकता होती है। अतीत में मैंने IntelliJ IDEA (या वेबस्टॉर्म) के भीतर से अलग-अलग प्रक्रियाओं के रूप में सभी सर्वरों को चलाया, जो "कम्पाउंड" रन कॉन्फ़िगरेशन के साथ आसान है। लेकिन अगर मुझे उन्हें रोकने और फिर से शुरू करने की आवश्यकता है, तो 5 अलग-अलग सर्वर टैब को बंद करना थकाऊ था, साथ ही आउटपुट अलग-अलग विंडो में फैल गया था।
गल्प का एक लाभ यह है कि यह सभी आउटपुट को अलग-अलग स्वतंत्र प्रक्रियाओं से एक कंसोल विंडो में चेन कर सकता है, जो सभी चाइल्ड सर्वर के माता-पिता बन जाते हैं।
इसलिए मैंने एक बहुत ही सरल gulp टास्क बनाया जो सिर्फ मेरी NPM स्क्रिप्ट्स या कमांड्स को सीधे चलाता है, इसलिए सभी आउटपुट एक विंडो में दिखाई देते हैं, और मैं gulp टास्क विंडो को बंद करके एक ही बार में सभी 5 सर्वरों को आसानी से समाप्त कर सकता हूं।
Gulp.js
/**
* Gulp / Node utilities
*/
var gulp = require('gulp-help')(require('gulp'));
var utils = require('gulp-util');
var log = utils.log;
var con = utils.colors;
/**
* Basic workflow plugins
*/
var shell = require('gulp-shell'); // run command line from shell
var browserSync = require('browser-sync');
/**
* Performance testing plugins
*/
var ngrok = require('ngrok');
// Variables
var serverToProxy1 = "localhost:5000";
var finalPort1 = 8000;
// When the user enters "gulp" on the command line, the default task will automatically be called. This default task below, will run all other tasks automatically.
// Default task
gulp.task('default', function (cb) {
console.log('Starting dev servers!...');
gulp.start(
'devserver:jit',
'nodemon',
'browsersync',
'ios_webkit_debug_proxy'
'ngrok-url',
// 'vorlon',
// 'remotedebug_ios_webkit_adapter'
);
});
gulp.task('nodemon', shell.task('cd ../backend-nodejs && npm run nodemon'));
gulp.task('devserver:jit', shell.task('npm run devserver:jit'));
gulp.task('ios_webkit_debug_proxy', shell.task('npm run ios-webkit-debug-proxy'));
gulp.task('browsersync', shell.task(`browser-sync start --proxy ${serverToProxy1} --port ${finalPort1} --no-open`));
gulp.task('ngrok-url', function (cb) {
return ngrok.connect(finalPort1, function (err, url) {
site = url;
log(con.cyan('ngrok'), '- serving your site from', con.yellow(site));
cb();
});
});
// gulp.task('vorlon', shell.task('vorlon'));
// gulp.task('remotedebug_ios_webkit_adapter', shell.task('remotedebug_ios_webkit_adapter'));
अभी भी सिर्फ 5 कार्यों को चलाने के लिए कोड का एक बहुत, मेरी राय में, लेकिन यह उद्देश्य के लिए काम करता है। एक चेतावनी यह है कि gulp-shellकुछ कमांड को सही ढंग से चलाना नहीं आता है, जैसे कि ios-webkit-debug-proxy। इसलिए मुझे एनपीएम स्क्रिप्ट बनानी पड़ी जो कि उसी कमांड को निष्पादित करती है, और फिर यह काम करती है।
इसलिए मैं मुख्य रूप से अपने सभी कार्यों के लिए एनपीएम लिपियों का उपयोग करता हूं, लेकिन कभी-कभी जब मुझे एक ही बार में सर्वर का एक गुच्छा चलाने की आवश्यकता होती है, तो मैं मदद करने के लिए अपने गुल्प कार्य को आग लगा दूंगा। सही काम के लिए सही टूल चुनें।
अद्यतन २
अब मैं समवर्ती नामक एक स्क्रिप्ट का उपयोग करता हूं जो ऊपर दिए गए कार्य के समान काम करता है। यह समानांतर में कई सीएलआई स्क्रिप्ट चलाता है और उन सभी को एक ही कंसोल विंडो में पाइप करता है, और इसका उपयोग करने के लिए बहुत सरल है। एक बार फिर, किसी भी कोड की आवश्यकता नहीं है (ठीक है, कोड समवर्ती के लिए नोड_मॉड्यूल के अंदर है, लेकिन आपको इसके लिए खुद को परेशान करने की आवश्यकता नहीं है)
// NOTE: If you need to run a command with spaces in it, you need to use
// double quotes, and they must be escaped (at least on windows).
// It doesn't seem to work with single quotes.
"run:all": "concurrently \"npm run devserver\" nodemon browsersync ios_webkit_debug_proxy ngrok-url"
यह एक टर्मिनल के समानांतर पाइप में सभी 5 स्क्रिप्ट चलाता है। बहुत बढ़िया! इसलिए कि इस बिंदु पर, मैं शायद ही कभी गपशप का उपयोग करता हूं, क्योंकि बिना कोड के समान कार्य करने के लिए बहुत सी लिपियां हैं।
मेरा सुझाव है कि आप इन लेखों को पढ़ें जो उनकी तुलना गहराई से करते हैं।