[gruntjs] 태스크 러너 (Gulp, Grunt 등) 및 번 들러 (Webpack, Browserify). 왜 함께 사용합니까?

Program / 글쓴이

나는 태스크 러너 및 번 들러 세계에 조금 익숙하며 다음과 같은 일을 겪으면서

Grunt, Gulp, Webpack, Browserify

, 나는 그들 사이에 많은 차이가 있다고 생각하지 않았습니다. 즉, Webpack이 태스크 러너가하는 모든 것을 할 수 있다고 생각합니다. 그러나 여전히 gulp와 webpack이 함께 사용되는 거대한 예가 있습니다. 그 이유를 알 수 없었습니다.

이것에 익숙하지 않아서 잘못된 방향으로 가고있을 수 있습니다. 내가 놓친 것을 지적 할 수 있다면 좋을 것입니다. 유용한 링크를 환영합니다.

미리 감사드립니다.

답변

Grunt 와 Gulp 는 실제로 작업 실행자 이며 구성 기반 작업과 스트림 기반 변환과 같은 차이점이 있습니다. 각각 고유의 강점과 약점이 있지만 결국에는 더 큰 빌드 문제를 해결하기 위해 실행할 수있는 작업을 만드는 데 거의 도움이됩니다. 대부분의 경우 앱의 실제 런타임과 관련이 없지만 런타임이 예상대로 작동하도록 변환하거나 파일, 구성 및 기타 항목을 배치합니다. 때로는 앱을 실행하는 데 필요한 서버 또는 기타 프로세스를 생성하기도합니다.

Webpack 및 Browserify 는 패키지 번 들러 입니다. 기본적으로 패키지의 모든 종속성을 실행하고 소스를 브라우저에서 사용할 수있는 하나의 파일로 연결하도록 설계되었습니다. Node.js 및 v8 컴파일러 와 함께 실행되도록 설계된 많은 라이브러리를 사용하기 때문에 현대 웹 개발에 중요합니다 . 다시 말하지만, 일부 개발자가 둘 중 하나를 선호하거나 때로는 둘 다 선호하는 장단점과 다른 이유가 있습니다. 일반적으로 이러한 솔루션의 출력 번들에는 잠재적으로 큰 번들에서 올바른 파일 또는 모듈을 찾는 데 도움이되는 일종의 부트 스트랩 메커니즘이 포함되어 있습니다.

러너와 번 들러 사이의 모호한 경계는 번 들러 가 런타임 중에 복잡한 변환 또는 트랜스 파일을 수행 할 수도 있으므로 태스크 러너가 수행 할 수있는 여러 작업을 수행 할 수 있다는 것입니다. 사실, browserify와 webpack 사이에는 소스 코드를 수정하는 데 사용할 수있는 변환기 가 100 개 정도있을 것입니다 . 비교를 위해 현재 npm에 나열된 최소 2000 개의 gulp 플러그인이 있습니다 . 따라서 응용 프로그램에 가장 적합한 정의가 명확하게 (희망적으로 …;)) 있음을 알 수 있습니다.

즉, 실제로 태스크 러너와 패키지 번 들러를 동시에 또는 동시에 사용하는 복잡한 프로젝트를 볼 수 있습니다. 예를 들어 사무실에서 gulp를 사용하여 프로젝트를 시작하고 webpack은 실제로 브라우저에서 앱을 실행하는 데 필요한 소스 번들을 생성하는 특정 gulp 작업에서 실행됩니다. 그리고 우리 앱은 동형 이기 때문에 서버 코드의 일부 도 번들로 제공 합니다.

저의 겸손한 의견으로는 이러한 모든 기술에 익숙해지기를 원할 것입니다. 경력 과정에서 모든 기술을 볼 (사용) 할 가능성이 있기 때문입니다.

답변

방금 내 태스크 러너 / 번 들러를 만들었습니다.

꿀꺽 꿀꺽 마시고 아마 웹팩보다 사용하는 것이 더 간단합니다 (웹팩을 사용한 적이 없지만).

매우 간단하며 바벨, 브라우저 화, uglify, 축소 및 핸들 바를 즉시 사용할 수 있습니다.

구문은 다음과 같습니다.

const Autumn = require("autumn-wizard");




const w = new Autumn();

//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
    './lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
    var dstPath = w.replace('/src/', '/dist/', srcPath);
    dstPath = w.replace('.scss', '.css', dstPath);
    dstPath = w.replace('.css', '.min.css', dstPath);
    w.minify(srcPath, dstPath, {
        sourceMap: useSourceMap,
    });
});


//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
    debug: useSourceMap,
});


//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
    "./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);

그리고 문서는 여기에 있습니다 : https://github.com/lingtalfi/Autumn

도움이되기를 바랍니다.

답변