NPM betikleri yutkuyla aynı şeyi yapabilir, ancak yaklaşık 50 kat daha az kodda. Aslında, hiç kod olmadan, sadece komut satırı argümanları.
Örneğin, farklı ortamlar için farklı kodlara sahip olmak istediğiniz yerde açıkladığınız kullanım durumu.
Webpack + NPM Scripts ile bu kolay:
"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/*\"",
Şimdi, biri geliştirme modu, webpack.development.jsdiğeri üretim modu için olmak üzere iki web paketi yapılandırma komut dosyası bulundurmanız yeterlidir webpack.production.js. Ayrıca webpack.common.js, tüm ortamlarda paylaşılan bir webpack yapılandırmasını kullanır ve bunları birleştirmek için webpackMerge kullanırım.
NPM betiklerinin serinliğinden dolayı, yırtılma akışları / boruları gibi kolay zincirleme sağlar.
Yukarıdaki örnekte, geliştirme amacıyla oluşturmak için komut satırınıza gidin ve çalıştırın npm run build:dev.
- NPM ilk önce
prebuild:dev,
- Sonra
build:dev,
- Ve son olarak
postbuild:dev.
preVe postön ekler de yürütmek için hangi sırayla UÖM'yi söyle.
Dikkat ederseniz, Webpack + NPM komut dosyalarıyla, yerel bir program rimrafiçin yudum sarmalayıcı yerine yerel bir program çalıştırabilirsiniz gulp-rimraf. Ayrıca burada yaptığım gibi yerel Windows .exe dosyalarını elevate.exeveya Linux veya Mac'te yerel * nix dosyalarını da çalıştırabilirsiniz .
Aynı şeyi yudumla yapmayı deneyin. Birinin gelmesini beklemek ve kullanmak istediğiniz yerel program için bir yudum sarmalayıcısı yazmak zorunda kalacaksınız. Buna ek olarak, muhtemelen şöyle kıvrımlı kod yazmanız gerekecektir: (doğrudan açısal2-tohum deposundan alınır )
Gulp Geliştirme kodu
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));
};
Gulp Üretim kodu
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));
};
Gerçek küfür kodu, bundan daha karmaşıktır, çünkü bu, repodaki birkaç düzine gulp dosyasından sadece 2 tanesidir.
Peki hangisi senin için daha kolay?
Kanımca, NPM betikleri hem etkinlik hem de kullanım kolaylığı açısından yutkunluğu ve homurdanmayı çok aşıyor ve tüm ön uç geliştiricileri bunu iş akışlarında kullanmayı düşünmeli, çünkü bu büyük bir zaman tasarrufu.
GÜNCELLEME
Gulp'i NPM komut dosyaları ve Webpack ile birlikte kullanmak istediğim yerde karşılaştığım bir senaryo var.
Yapmam gereken zaman ayıklama uzaktan örneğin bir iPad veya Android cihazı, ekstra sunucularını başlamak gerekir. Geçmişte tüm sunucuları, "Bileşik" Çalıştırma Yapılandırması ile kolay olan IntelliJ IDEA (Veya Webstorm) içinden ayrı işlemler olarak çalıştırdım. Ancak bunları durdurup yeniden başlatmam gerekirse, 5 farklı sunucu sekmesini kapatmak sıkıcıydı, ayrıca çıktı farklı pencerelere yayıldı.
Yutmanın faydalarından biri, tüm bağımsız sunucuların tüm çıktılarını, tüm alt sunucuların üst öğesi olan tek bir konsol penceresine zincirleyebilmesidir.
Bu yüzden, sadece NPM komut dosyalarımı veya komutlarımı doğrudan çalıştıran çok basit bir yutkunma görevi yarattım, böylece tüm çıktı bir pencerede görünür ve yutmak görev penceresini kapatarak 5 sunucunun hepsini bir kerede kolayca bitirebilirim.
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'));
Bence, sadece 5 görev için biraz kod, bence, ama bu amaç için çalışıyor. Bir uyarı, gulp-shellbazı komutları doğru çalıştırmak gibi görünmüyor ios-webkit-debug-proxy. Bu yüzden sadece aynı komutu yürüten bir NPM Script oluşturmak zorunda kaldım ve sonra çalışıyor.
Bu yüzden öncelikle tüm görevlerim için NPM Komut Dosyalarını kullanıyorum, ancak bazen bir seferde bir grup sunucu çalıştırmam gerektiğinde, yardım etmek için Gulp görevimi ateşleyeceğim. Doğru iş için doğru aracı seçin.
GÜNCELLEME 2
Şimdi yukarıdaki yudum görevi ile aynı şeyi yapan eşzamanlı olarak adlandırılan bir komut dosyası kullanıyorum . Birden fazla CLI komut dosyasını paralel olarak çalıştırır ve hepsini aynı konsol penceresine bağlar ve kullanımı çok basittir. Bir kez daha, kod gerekmez (peki, eşzamanlı olarak kod node_module içinde bulunur, ancak kendinizi bununla ilgilenmeniz gerekmez)
// 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"
Bu, 5 komut dosyasının tümünü bir terminale paralel olarak bağlanır. Müthiş! Bu noktada, nadiren gulp kullanıyorum, çünkü aynı görevleri kod olmadan yapmak için çok fazla cli komut dosyası var.
Derinlemesine karşılaştıran bu makaleleri okumanızı tavsiye ederim.