꿀꺽꿀꺽 + 웹팩? 아니면 JUST 웹팩?

꿀꺽꿀꺽 + 웹팩? 아니면 JUST 웹팩?

웹팩으로 꿀꺽꿀꺽 삼키는 사람들이 보이네요.그런데 웹팩이 꿀꺽꿀꺽 대신할 수 있다고 하던데요?난 여기서 완전히 혼란스러워 누가 설명해줄 수 있어요?

갱신하다

결국 저는 꿀꺽꿀꺽 삼키기 시작했습니다.저는 현대식 프론트 엔드를 처음 접했고 빨리 일어나서 달리고 싶었습니다.1년이 넘도록 발이 많이 젖었으니 웹팩으로 옮길 준비가 되었습니다.저는 같은 신발을 신고 출발하는 사람들에게도 같은 경로를 제안합니다.웹팩을 시도할 수 없다는 것이 아니라 먼저 꿀꺽꿀꺽 삼키는 것부터 시작해서 복잡해 보인다면 그냥 말입니다.그것은 아무런 문제가 없어.

만약 당신이 꿀꺽꿀꺽 마시고 싶지 않다면, 네, 그르렁거리는 소리도 있지만, 당신은 당신의 패키지에 명령어를 지정할 수도 있습니다.json 그리고 처음에 일어나서 실행하기 위해 작업 주자 없이 명령줄에서 그들을 호출합니다.예를 들어,

"scripts": {
      "babel": "babel src -d build",
      "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js",
      "build": "npm run clean && npm run babel && npm run prepare && npm run browserify",
      "clean": "rm -rf build && rm -rf dist",
      "copy:server": "cp build/server.js dist/server.js",
      "copy:index": "cp src/client/index.html dist/client/index.html",
      "copy": "npm run copy:server && npm run copy:index",
      "prepare": "mkdir -p dist/client/scripts/ && npm run copy",
      "start": "node dist/server"
    },

이 대답이 도움이 될 겁니다.태스크 러너(Gulp, Grunt 등) 및 번들러(Webpack, Browserify). 왜 같이 쓰죠?

...여기에 웹팩을 사용한 예가 있습니다.여기서 한 단계 더 나아가 웹팩 구성이 es6로 작성되었다고 가정합니다.

var gulp = require('gulp');
var webpack = require('webpack');
var gutil = require('gutil');
var babel = require('babel/register');
var config = require(path.join('../..', 'webpack.config.es6.js'));

gulp.task('webpack-es6-test', function(done){
   webpack(config).run(onBuild(done));
});

function onBuild(done) {
    return function(err, stats) {
        if (err) {
            gutil.log('Error', err);
            if (done) {
                done();
            }
        } else {
            Object.keys(stats.compilation.assets).forEach(function(key) {
                gutil.log('Webpack: output ', gutil.colors.green(key));
            });
            gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name));
            if (done) {
                done();
            }
        }
    }
}

앱이 복잡해질수록 위의 예와 같이 웹팩 작업과 함께 꿀꺽꿀꺽 사용할 수 있습니다.이를 통해 웹팩 로더와 플러그인이 실제로는 할 수 없는 몇 가지 흥미로운 작업을 빌드에서 수행할 수 있습니다. 즉, 출력 디렉토리를 생성하고 서버를 시작하는 등입니다.간단히 말하면, 웹팩은 실제로 그러한 일들을 할 수 있지만, 장기적인 필요에 제한적이라는 것을 알 수 있습니다.bulp -> webpack을 통해 얻을 수 있는 가장 큰 이점 중 하나는 웹팩 구성을 다양한 환경에 맞게 사용자 지정할 수 있고 적절한 작업을 적시에 수행할 수 있다는 것입니다.이것은 정말로 여러분에게 달려 있지만, 웹팩을 꿀꺽꿀꺽 실행하는 것은 문제가 없습니다. 사실, 그것을 실행하는 방법에 대한 몇 가지 꽤 흥미로운 예가 있습니다.위의 예는 기본적으로 jlongster에서 가져온 것입니다.

NPM 스크립트는 꿀꺽 삼키는 것과 동일한 작업을 수행할 수 있지만 코드는 약 50배 적습니다.코드가 전혀 없고 명령줄 인수만 있습니다.

예를 들어 환경별로 다른 코드를 사용하고자 하는 경우를 설명합니다.

Webpack + NPM Scripts를 사용하면 이렇게 간단합니다.

"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. 나는 또한 a를 사용합니다.webpack.common.js모든 환경에서 공유되는 webpack config를 수용하고 webpackMerge를 사용하여 이들을 병합합니다.

NPM 스크립트가 시원하기 때문에 스트림/파이프를 꿀꺽꿀꺽 마시는 방법과 유사하게 쉽게 연결할 수 있습니다.

하여 를 만 하면 npm run build:dev.

1. NPM 됩니다를 합니다.prebuild:dev,
2. 그리고나서build:dev,
3. 그리고 마지막으로postbuild:dev.

pre그리고.post접두사는 NPM에게 실행 순서를 알려줍니다.

+ + NPM 와 기본 할 수 .rimraf에 와 같은 대신gulp-rimraf .처럼 Windows .exe 를 할 수 .elevate.exe또는 Linux 또는 Mac의 네이티브 *nix 파일입니다.

꿀꺽꿀꺽 삼키면서 똑같은 일을 해보세요.누군가가 와서 당신이 사용하고 싶은 네이티브 프로그램을 위한 꿀꺽꿀꺽 포장지를 작성할 때까지 기다려야 할 것입니다.또한 다음과 같은 복잡한 코드를 작성해야 할 것입니다. (angular2-seed repo에서 바로 가져온 것)

Gulp 개발 코드

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생산코드

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 코드는 레포에 있는 수십 개의 gulp 파일 중 2개에 불과하기 때문에 훨씬 더 복잡합니다.

그래서, 어떤 것이 당신에게 더 쉽습니까?

NPM 스크립트는 효율성과 사용 편의성 모두에서 그럽트(gulp and grunt)를 훨씬 능가하며, 주요 시간 절약 기능이기 때문에 모든 프론트엔드 개발자는 작업 흐름에 NPM 스크립트를 사용하는 것을 고려해야 합니다.

갱신하다

Gulp를 NPM 스크립트와 Webpack과 결합해서 사용하고 싶었던 시나리오가 하나 있습니다.

예를 들어 iPad나 Android 장치에서 원격 디버깅을 해야 할 때는 추가 서버를 시작해야 합니다.이전에는 "컴파운드" 실행 구성으로 쉬운 IntelliJ IDEA(또는 Webstorm) 내에서 모든 서버를 별도의 프로세스로 실행했습니다.그러나 서버를 중지하고 재시작해야 하는 경우 5개의 다른 서버 탭을 닫아야 하는 것이 지루했고, 출력이 여러 창에 분산되어 있었습니다.

Gulp의 장점 중 하나는 별도의 독립적인 프로세스에서 나오는 모든 출력을 모든 하위 서버의 상위가 되는 하나의 콘솔 창에 체인으로 연결할 수 있다는 것입니다.

그래서 NPM 스크립트나 명령어를 직접 실행하는 아주 간단한 gulp 작업을 만들어 모든 출력이 하나의 창에 나타나고, gulp 작업 창을 닫으면 5개의 서버를 한 번에 쉽게 끝낼 수 있습니다.

꿀꺽꿀꺽

/**
 * 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개의 스크립트를 모두 실행합니다.아주 좋아요!코드 없이 같은 작업을 할 수 있는 클리스크립트가 너무 많기 때문에 이 점은 거의 사용하지 않습니다.

나는 당신이 그것들을 깊이 비교할 수 있는 이 기사들을 읽을 것을 제안합니다.

• NPM을 빌드 도구로 사용하는 방법
• Grunt & Gulp 사용을 중단해야 하는 이유
• NPM 스크립트를 위해 Gulp and Grunt를 떠난 이유

저는 다른 프로젝트에서 두 가지 옵션을 모두 사용했습니다.

가 로 .gulp와 함께webpack- https://github.com/iroy2000/react-reflux-boilerplate-with-webpack .

만 하는 다른 .webpack와 함께npm tasks.

그리고 둘 다 아주 잘 작동합니다.작업이 얼마나 복잡한지, 그리고 구성에서 얼마나 많은 제어력을 확보하고자 하는지에 대한 문제로 귀결된다고 생각합니다.

를 들어, 만약 일이 , , ,dev,build,test... 등(매우 표준적인), 당신은 간단한 것만으로도 완전히 괜찮습니다.webpack와 함께npm tasks.

그러나 매우 복잡한 워크플로우를 가지고 있고 구성을 더 많이 제어하고 싶다면(코딩 중이므로), 선택의 폭을 넓힐 수 있습니다.

하지만 제 경험으로 볼 때, 웹팩 생태계는 제가 필요로 하는 플러그인과 로더를 충분히 제공하기 때문에, 저는 그저 입에 담기만 하는 것이 아니라면 최소한의 접근법을 사용하는 것을 좋아합니다.또한 시스템에 한 가지만 덜 있으면 구성이 더 쉬워집니다.

그리고 많은 경우에, 요즘에는 사람들이 실제로 대체하는 것을 봅니다.gulp and browsify다같이webpack홀로.

Gulp와 Webpack의 개념은 상당히 다릅니다.Gulp에게 프론트엔드 코드를 단계적으로 조합하는 방법을 알려주되, 구성 파일을 통해 원하는 것을 웹팩에 알려주는 것입니다.

다음은 제가 작성한 짧은 글(5분 읽기)입니다. https://medium.com/ @Maokai/compile-the-end-end-from-webpack-c45671ad87fe

우리 회사는 작년에 Gulp에서 Webpack으로 옮겼습니다.시간이 좀 걸렸지만, 우리는 Gulp에서 한 모든 것을 웹팩으로 옮기는 방법을 알아냈습니다.그래서 우리는 Gulp에서 했던 모든 일들을 웹팩을 통해서도 할 수 있지만, 그 반대는 할 수 없습니다.

현재로서는 웹팩을 사용하고 Gulp와 웹팩의 혼합을 피해서 여러분과 여러분의 팀이 서로 다른 사고방식을 요구하기 때문에 둘 다 배우고 유지할 필요가 없다고 생각합니다.

솔직히 둘 다 쓰는 게 제일 좋은 것 같아요.

• 모든 자바스크립트 관련 웹팩.
• 관련된 모든 CSS를 꿀꺽꿀꺽 삼킵니다.

저는 여전히 웹팩으로 cs를 포장하기 위한 괜찮은 해결책을 찾아야 하고, 지금까지 cs에는 gulp을, 자바스크립트에는 webpack을 사용하는 것에 만족합니다.

저도 사용합니다.npm@Tetradev와 같은 스크립트입니다.특히 제가 사용하고 있기 때문에.Visual Studio, 그리고 그 동안NPM Task runner꽤 믿을 만하다 Webpack Task Runner꽤 버그가 많습니다.

언급URL : https://stackoverflow.com/questions/33558396/gulp-webpack-or-just-webpack