Script NPM dapat melakukan hal yang sama seperti tegukan, tetapi dalam kode sekitar 50x lebih sedikit. Bahkan, tanpa kode sama sekali, hanya argumen baris perintah.
Misalnya, use case yang Anda jelaskan di mana Anda ingin memiliki kode yang berbeda untuk lingkungan yang berbeda.
Dengan Script Webpack + NPM, ini mudah:
"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/*\"",
Sekarang Anda cukup memelihara dua skrip konfigurasi webpack, satu untuk mode pengembangan webpack.development.js,, dan satu untuk mode produksi webpack.production.js,. Saya juga menggunakan webpack.common.jskonfigurasi webpack mana yang dibagikan di semua lingkungan, dan menggunakan webpackMerge untuk menggabungkan mereka.
Karena kesejukan skrip NPM, ini memungkinkan untuk perangkaian yang mudah, mirip dengan bagaimana menelan aliran / pipa.
Dalam contoh di atas, untuk membangun untuk pengembangan, Anda cukup pergi ke baris perintah dan jalankan npm run build:dev.
- NPM akan berjalan pertama kali
prebuild:dev,
- kemudian
build:dev,
- Dan akhirnya
postbuild:dev.
Perintah predan postawalan memberi tahu NPM untuk melakukan eksekusi.
Jika Anda perhatikan, dengan skrip Webpack + NPM, Anda dapat menjalankan program asli, seperti rimraf, bukannya gulp-wrapper untuk program asli seperti gulp-rimraf. Anda juga dapat menjalankan file .exe Windows asli seperti yang saya lakukan di sini dengan elevate.exeatau file * nix asli di Linux atau Mac.
Coba lakukan hal yang sama dengan tegukan. Anda harus menunggu seseorang untuk datang dan menulis gulp-wrapper untuk program asli yang ingin Anda gunakan. Selain itu, Anda mungkin perlu menulis kode berbelit-belit seperti ini: (diambil langsung dari angular2-seed repo)
Kode pengembangan tegukan
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));
};
Kode Produksi tegur
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));
};
Kode tegukan sebenarnya jauh lebih rumit daripada ini, karena ini hanya 2 dari beberapa lusin file tegukan dalam repo.
Jadi, mana yang lebih mudah bagi Anda?
Menurut pendapat saya, skrip NPM jauh melampaui menelan dan mendengus, baik dalam efektivitas dan kemudahan penggunaan, dan semua pengembang front-end harus mempertimbangkan menggunakannya dalam alur kerja mereka karena ini adalah penghemat waktu utama.
MEMPERBARUI
Ada satu skenario yang saya temui di mana saya ingin menggunakan Gulp dalam kombinasi dengan skrip NPM dan Webpack.
Ketika saya perlu melakukan debugging jarak jauh pada perangkat iPad atau Android misalnya, saya perlu memulai server tambahan. Di masa lalu saya menjalankan semua server sebagai proses yang terpisah, dari dalam IntelliJ IDEA (Atau Webstorm) yang mudah dengan "Compound" Run Configuration. Tetapi jika saya harus berhenti dan me-restart mereka, itu membosankan harus menutup 5 tab server yang berbeda, ditambah hasilnya tersebar di jendela yang berbeda.
Salah satu manfaat dari gulp adalah dapat mengaitkan semua output dari proses independen yang terpisah menjadi satu jendela konsol, yang menjadi induk dari semua server anak.
Jadi saya membuat tugas tegukan yang sangat sederhana yang hanya menjalankan skrip NPM saya atau perintah secara langsung, jadi semua output muncul dalam satu jendela, dan saya dapat dengan mudah mengakhiri semua 5 server sekaligus dengan menutup jendela tugas menelan.
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'));
Masih sedikit kode hanya untuk menjalankan 5 tugas, menurut saya, tetapi berfungsi untuk tujuan tersebut. Satu peringatan adalah bahwa gulp-shelltampaknya tidak menjalankan beberapa perintah dengan benar, seperti ios-webkit-debug-proxy. Jadi saya harus membuat Script NPM yang hanya menjalankan perintah yang sama, dan kemudian berfungsi.
Jadi saya terutama menggunakan Script NPM untuk semua tugas saya, tetapi kadang-kadang ketika saya perlu menjalankan banyak server sekaligus, saya akan menjalankan tugas Gulp saya untuk membantu. Pilih alat yang tepat untuk pekerjaan yang tepat.
PEMBARUAN 2
Saya sekarang menggunakan skrip yang disebut bersamaan yang melakukan hal yang sama dengan tugas tegukan di atas. Ini menjalankan beberapa skrip CLI secara paralel dan menyalurkan semuanya ke jendela konsol yang sama, dan sangat mudah digunakan. Sekali lagi, tidak ada kode yang diperlukan (yah, kode itu ada di dalam node_module untuk secara bersamaan, tetapi Anda tidak perlu khawatir dengan itu)
// 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"
Ini menjalankan semua 5 skrip secara paralel disalurkan ke satu terminal. Luar biasa! Jadi pada titik ini, saya jarang menggunakan tegukan, karena ada begitu banyak skrip cli untuk melakukan tugas yang sama tanpa kode.
Saya sarankan Anda membaca artikel ini yang membandingkannya secara mendalam.