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

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

Grunt, Gulp, Webpack, Browserify

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

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

미리 감사드립니다.



답변

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

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

러너와 번 들러 사이의 모호한 경계는 번 들러 가 런타임 중에 복잡한 변환 또는 트랜스 파일을 수행 할 수도 있으므로 태스크 러너가 수행 할 수있는 여러 작업을 수행 할 수 있다는 것입니다. 사실, 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

도움이되기를 바랍니다.


답변