NPM 스크립트 는 꿀꺽 꿀꺽과 동일하게 수행 할 수 있지만 코드는 약 50 배 줄어 듭니다. 실제로 코드가 전혀 없으면 명령 줄 인수 만 있습니다.
예를 들어, 유스 케이스는 환경마다 다른 코드를 사용하려는 위치를 설명했습니다.
Webpack + NPM 스크립트를 사용하면 다음과 같이 쉽습니다.
"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모든 환경에서 공유되는 webpack 구성을 포함하고 webpackMerge를 사용하여 병합합니다.
NPM 스크립트의 차가움으로 인해 gulp가 스트림 / 파이프와 비슷한 방식으로 체인을 쉽게 연결할 수 있습니다.
위의 예에서 개발을 위해 빌드하려면 간단히 명령 줄로 이동하여 실행하십시오. npm run build:dev .
- NPM이 먼저 실행됩니다
prebuild:dev ,
- 그때
build:dev ,
- 그리고 마지막으로
postbuild:dev .
그만큼 pre및 post접두사에서 실행되는 순서 NPM을 말한다.
Webpack + NPM 스크립트를 사용하면 다음과 같은 기본 프로그램 rimraf에 대한 gulp-wrapper 대신 과 같은 기본 프로그램을 실행할 수 있습니다.gulp-rimraf . 여기에서 한 것처럼 기본 Windows .exe 파일을 실행 elevate.exe하거나 Linux 또는 Mac에서 기본 * nix 파일을 실행할 수도 있습니다.
꿀꺽 꿀꺽 같은 일을 해보십시오. 누군가가 와서 사용하려는 기본 프로그램에 대한 꿀꺽 꿀꺽 래퍼를 작성해야합니다. 또한 다음과 같은 복잡한 코드를 작성해야 할 수도 있습니다. ( 각도 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 코드는 repo에있는 수십 개의 gulp 파일 중 2 개에 불과하므로 훨씬 복잡합니다.
어느 쪽이 더 쉬운가요?
필자의 의견으로는 NPM 스크립트는 효과와 사용 편의성 측면에서 괄목 할만한 수준을 넘어 설뿐 아니라 모든 프론트 엔드 개발자는 작업 시간을 크게 단축해야하므로 워크 플로에서이를 고려해야합니다.
최신 정보
NPM 스크립트 및 Webpack과 함께 Gulp를 사용하려는 시나리오가 하나 있습니다.
예를 들어 iPad 또는 Android 장치에서 원격 디버깅 을 수행 해야 할 경우 추가 서버를 시작해야합니다. 과거에는 "컴파운드"실행 구성으로 쉽게 IntelliJ IDEA (또는 Webstorm) 내에서 모든 서버를 별도의 프로세스로 실행했습니다. 그러나 중지하고 다시 시작 해야하는 경우 5 개의 다른 서버 탭을 닫아야하고 출력이 다른 창에 분산되어 지루했습니다.
gulp의 장점 중 하나는 별도의 독립적 인 프로세스의 모든 출력을 하나의 콘솔 창에 연결하여 모든 자식 서버의 부모가 될 수 있다는 것입니다.
따라서 NPM 스크립트 또는 명령을 직접 실행하는 매우 간단한 gulp 작업을 만들었으므로 모든 출력이 하나의 창에 표시되며 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입니다. 따라서 동일한 명령을 실행하는 NPM 스크립트를 작성해야 작동합니다.
따라서 주로 모든 작업에 NPM 스크립트를 사용하지만 한 번에 여러 대의 서버를 한 번에 실행해야 할 경우 Gulp 작업을 시작하여 도움이됩니다. 올바른 작업에 적합한 도구를 선택하십시오.
업데이트 2
이제는 위의 꿀꺽 꿀꺽 같은 작업과 동일한 작업을 동시에 수행 하는 스크립트를 사용합니다 . 여러 CLI 스크립트를 병렬로 실행하고 모두 동일한 콘솔 창에 파이프하며 사용하기 매우 간단합니다. 다시 한 번, 코드가 필요하지 않습니다 (코드는 동시에 node_module 안에 있지만 그에 대해 걱정할 필요는 없습니다)
// 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 개의 스크립트를 모두 병렬로 한 터미널에 파이프로 실행합니다. 대박! 따라서이 코드는 코드없이 동일한 작업을 수행하는 cli 스크립트가 너무 많기 때문에 gulp를 거의 사용하지 않습니다.
자세한 내용을 비교할 수있는이 기사를 읽으십시오.