Gulp + Webpack atau JUST Webpack?

Saya melihat orang menggunakan tegukan dengan webpack. Tapi kemudian saya membaca webpack dapat menggantikan tegukan? Saya benar-benar bingung di sini ... bisakah seseorang menjelaskan?

MEMPERBARUI

pada akhirnya saya mulai dengan tegukan. Saya baru mengenal front-end modern dan hanya ingin bangun dan berlari cepat. Sekarang saya sudah cukup basah setelah lebih dari setahun, saya siap untuk pindah ke webpack. Saya menyarankan rute yang sama untuk orang-orang yang memulai dengan sepatu yang sama. Tidak mengatakan Anda tidak dapat mencoba webpack tetapi katakan saja jika tampaknya mulai rumit dengan tegukan pertama ... tidak ada yang salah dengan itu.

Jika Anda tidak ingin menelan, ya ada yang mendengus tetapi Anda juga bisa hanya menentukan perintah di paket Anda. Json dan memanggil mereka dari baris perintah tanpa pelari tugas hanya untuk bangun dan berjalan pada awalnya. Sebagai contoh:

"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"
    },

Jawaban ini mungkin bisa membantu. Pelari Tugas (Gulp, Grunt, dll) dan Bundlers (Webpack, Browserify). Mengapa digunakan bersama?

... dan inilah contoh penggunaan webpack dari dalam tugas tegukan. Ini melangkah lebih jauh dan mengasumsikan bahwa konfigurasi webpack Anda ditulis dalam 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();
            }
        }
    }
}

Saya pikir Anda akan menemukan bahwa ketika aplikasi Anda menjadi lebih rumit, Anda mungkin ingin menggunakan tegukan dengan tugas webpack seperti contoh di atas. Ini memungkinkan Anda untuk melakukan beberapa hal menarik di build Anda yang sebenarnya tidak dilakukan oleh loader dan plugin webpack. membuat direktori keluaran, memulai server, dll. Ya, singkatnya, webpack sebenarnya dapat melakukan hal-hal itu, tetapi Anda mungkin menemukan mereka terbatas untuk kebutuhan jangka panjang Anda. Salah satu keuntungan terbesar yang Anda dapatkan dari gulp -> webpack adalah Anda dapat menyesuaikan konfigurasi webpack Anda untuk lingkungan yang berbeda dan meminta gulp melakukan tugas yang tepat untuk waktu yang tepat. Ini benar-benar terserah Anda, tetapi tidak ada yang salah dengan menjalankan webpack dari tegukan, sebenarnya ada beberapa contoh yang cukup menarik tentang bagaimana melakukannya..

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.

1. NPM akan berjalan pertama kali prebuild:dev,
2. kemudian build:dev,
3. 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.

• Cara Menggunakan NPM sebagai Alat Bangun
• Mengapa kita harus berhenti menggunakan Grunt & Gulp
• Mengapa Saya Meninggalkan Gulp dan Grunt untuk Script NPM

Saya menggunakan kedua opsi di proyek saya yang berbeda.

Berikut adalah salah satu boilerplate bahwa saya menempatkan bersama-sama menggunakan gulpdenganwebpack - https://github.com/iroy2000/react-reflux-boilerplate-with-webpack .

Saya punya beberapa proyek lain yang hanya digunakan webpack dengan npm tasks.

Dan keduanya bekerja dengan sangat baik. Dan saya pikir itu terbakar adalah betapa rumitnya tugas Anda, dan seberapa banyak kontrol yang ingin Anda miliki dalam konfigurasi Anda.

Misalnya, jika Anda tugas sederhana, katakanlah dev, build, test... dll (yang sangat standar), Anda benar-benar baik-baik saja dengan hanya sederhana webpackdengannpm tasks .

Tetapi jika Anda memiliki alur kerja yang sangat rumit dan Anda ingin memiliki kontrol lebih besar terhadap konfigurasi Anda (karena ini adalah pengkodean), Anda bisa menggunakan rute tegukan.

Tapi dari pengalaman saya, ekosistem webpack menyediakan lebih dari cukup plugins dan loader yang akan saya butuhkan, jadi saya suka menggunakan pendekatan minimum yang telanjang kecuali ada sesuatu yang hanya dapat Anda lakukan dalam tegukan. Dan juga, itu akan membuat konfigurasi Anda lebih mudah jika Anda memiliki satu hal yang kurang di sistem Anda.

Dan sering kali, saat ini, saya melihat orang benar-benar mengganti gulp and browsifysemuanya bersama-sama dengan webpacksendirian.

Konsep Gulp dan Webpack sangat berbeda. Anda memberi tahu Gulp bagaimana cara menyatukan kode front-end langkah demi langkah, tetapi Anda memberi tahu Webpack apa yang Anda inginkan melalui file konfigurasi.

Berikut ini adalah artikel pendek (baca 5 menit) saya menulis menjelaskan pemahaman saya tentang perbedaan: https://medium.com/@Maokai/compile-the-front-end-from-gulp-to-webpack-c45671ad87fe

Perusahaan kami pindah dari Gulp ke Webpack pada tahun lalu. Meskipun butuh beberapa waktu, kami menemukan cara memindahkan semua yang kami lakukan di Gulp ke Webpack. Jadi bagi kami, semua yang kami lakukan di Gulp juga dapat kami lakukan melalui Webpack, tetapi tidak sebaliknya.

Mulai hari ini, saya sarankan hanya menggunakan Webpack dan menghindari campuran Gulp dan Webpack sehingga Anda dan tim Anda tidak perlu belajar dan mempertahankan keduanya, terutama karena mereka membutuhkan pola pikir yang sangat berbeda.

Jujur saya pikir yang terbaik adalah menggunakan keduanya.

• Webpack untuk semua javascript terkait.
• Gulp untuk semua css terkait.

Saya masih harus menemukan solusi yang layak untuk kemasan css dengan webpack, dan sejauh ini saya senang menggunakan tegukan untuk css dan webpack untuk javascript.

Saya juga menggunakan npmskrip sebagai @Tetradev seperti yang dijelaskan. Terutama sejak saya menggunakan Visual Studio, dan sementara NPM Task runnercukup dapat diandalkan Webpack Task Runner cukup buggy .