এনপিএম স্ক্রিপ্টগুলি গুল্পের মতো একই কাজ করতে পারে তবে প্রায় 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। 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));
};
আসল গুল্প কোডটি আরও জটিল যে এটি রেপোতে কয়েকটি ডজন গুল্প ফাইলের মধ্যে কেবল 2।
তাহলে, কোনটি আপনার পক্ষে সহজ?
আমার মতে, এনপিএম স্ক্রিপ্টগুলি কার্যকারিতা এবং ব্যবহারের সহজতা উভয় ক্ষেত্রে গল্প এবং গ্রান্টকে ছাড়িয়ে গেছে, এবং সমস্ত ফ্রন্ট-এন্ড বিকাশকারীকে এটি তাদের কার্যপ্রবাহে ব্যবহার করা বিবেচনা করা উচিত কারণ এটি একটি প্রধান সময় সাশ্রয়কারী।
হালনাগাদ
আমি এমন একটি দৃশ্যের মুখোমুখি হলাম যেখানে আমি গুলপকে এনপিএম স্ক্রিপ্ট এবং ওয়েবপ্যাকের সাথে একত্রে ব্যবহার করতে চেয়েছিলাম।
উদাহরণস্বরূপ যখন আমার কোনও আইপ্যাড বা অ্যান্ড্রয়েড ডিভাইসে রিমোট ডিবাগিং করা দরকার তখন আমার অতিরিক্ত সার্ভারগুলি শুরু করা দরকার। অতীতে আমি সমস্ত সার্ভারগুলি পৃথক প্রক্রিয়া হিসাবে চালিত করেছিলাম, ইন্টেলিজ আইডিইএ (বা ওয়েবস্টর্ম) এর মধ্যে যা "যৌগিক" রান কনফিগারেশনের সাহায্যে সহজ। তবে যদি আমি তাদের থামাতে এবং পুনরায় চালু করতে চাই তবে 5 টি ভিন্ন সার্ভার ট্যাব বন্ধ করে দেওয়া ক্লান্তিকর হয়েছিল, সাথে সাথে আউটপুটটি বিভিন্ন উইন্ডোতে ছড়িয়ে পড়েছিল।
গাল্পের অন্যতম উপকারিতা হ'ল পৃথক স্বতন্ত্র প্রক্রিয়াগুলি থেকে সমস্ত আউটপুটকে একটি কনসোল উইন্ডোতে শৃঙ্খলিত করা যায়, যা সমস্ত শিশু সার্ভারের পিতা-মাতা হয়।
সুতরাং আমি একটি খুব সহজ গাল্প টাস্ক তৈরি করেছি যা কেবলমাত্র আমার এনপিএম স্ক্রিপ্ট বা কমান্ডগুলি সরাসরি চালায়, তাই সমস্ত আউটপুট একটি উইন্ডোতে উপস্থিত হয়, এবং আমি সহজেই সমস্ত 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। সুতরাং আমাকে একটি এনপিএম স্ক্রিপ্ট তৈরি করতে হবে যা একই কমান্ডটি কার্যকর করে এবং তারপরে এটি কার্যকর হয়।
সুতরাং আমি আমার সমস্ত কাজের জন্য প্রাথমিকভাবে এনপিএম স্ক্রিপ্টগুলি ব্যবহার করি তবে মাঝে মাঝে যখন আমার একবারে একগুচ্ছ সার্ভার চালানোর প্রয়োজন হয় তখন আমি আমার গুল্প টাস্কটি সেরে ফেলব। সঠিক কাজের জন্য সঠিক সরঞ্জামটি চয়ন করুন।
আপডেট 2
আমি এখন একযোগে বলা স্ক্রিপ্ট ব্যবহার করি যা উপরের গুল্প টাস্কের মতো একই কাজ করে। এটি সমান্তরালভাবে একাধিক সিএলআই স্ক্রিপ্টগুলি চালায় এবং সেগুলি একই কনসোল উইন্ডোতে পাইপ করে এবং এটি ব্যবহার করা খুব সহজ। আবারও, কোনও কোডের প্রয়োজন নেই (ভাল, কোডটি নোড_মডিউলটির একযোগে জন্য রয়েছে, তবে আপনাকে এটি নিয়ে নিজেকে উদ্বেগ করতে হবে না)
// 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 স্ক্রিপ্ট চালায়। অসাধারণ! যাতে এই বিন্দুটি, আমি খুব কমই ঝাল ব্যবহার করি, যেহেতু কোনও কোড ছাড়াই একই কাজ করার জন্য অনেকগুলি ক্লাইপ স্ক্রিপ্ট রয়েছে।
আমি আপনাকে এই নিবন্ধগুলি পড়ার পরামর্শ দিচ্ছি যা তাদের গভীরতার সাথে তুলনা করে।